Nuxt•4mo ago

Nuxt with tailwind and DaisyUI

Hi everyone, recently I tried to install Tailwind and DaisyUI. I followed the documentation https://daisyui.com/docs/install/nuxt/

Install daisyUI for Nuxt — Tailwind CSS Components ( version 5 up...

How to install Tailwind CSS and daisyUI in a Nuxt project

8 Replies

kapa.ai•4mo ago

Hi @micbianchi97. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To use Tailwind CSS and DaisyUI together in a Nuxt project, you can follow these general steps, which are supported by the knowledge sources: 1. Install Tailwind CSS
Add the Tailwind CSS module to your Nuxt project:

   npm install -D @nuxtjs/tailwindcss

   npm install -D @nuxtjs/tailwindcss

Then, add it to your nuxt.config.ts:

   export default defineNuxtConfig({
     modules: ['@nuxtjs/tailwindcss']
   })

   export default defineNuxtConfig({
     modules: ['@nuxtjs/tailwindcss']
   })

See official Nuxt docs for styling. 2. Install DaisyUI
Install DaisyUI as a Tailwind plugin:

   npm install daisyui

   npm install daisyui

Then, add DaisyUI to your tailwind.config.js:

   module.exports = {
     plugins: [require('daisyui')],
     // Optional: configure DaisyUI themes
     daisyui: {
       themes: [
         'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
         'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
         'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
         'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
         'night', 'coffee', 'winter'
       ],
     },
   }

   module.exports = {
     plugins: [require('daisyui')],
     // Optional: configure DaisyUI themes
     daisyui: {
       themes: [
         'light', 'dark', 'cupcake', 'bumblebee', 'emerald', 'corporate',
         'synthwave', 'retro', 'cyberpunk', 'valentine', 'halloween', 'garden',
         'forest', 'aqua', 'lofi', 'pastel', 'fantasy', 'wireframe', 'black',
         'luxury', 'dracula', 'cmyk', 'autumn', 'business', 'acid', 'lemonade',
         'night', 'coffee', 'winter'
       ],
     },
   }

This explicit theme list is necessary for DaisyUI v4+ to ensure theme switching works as expected. In earlier versions, this was not required, but with v4+ you must specify the themes you want to use, as confirmed by user experience in the knowledge sources How to use daisyui 4.7.3 with Nuxt3. 3. Use DaisyUI Components
You can now use DaisyUI classes in your Vue components. For example:

   <button class="btn btn-primary">Button</button>

   <button class="btn btn-primary">Button</button>

4. Troubleshooting
- If you are using a monorepo or custom layers, and DaisyUI/Tailwind styles are not being applied correctly (e.g., missing dialog backdrops), you may need to use the @source directive in your main CSS file to help Tailwind pick up all relevant files:

     @source "../components/**/*";
     @source "../layouts/**/*";
     @source "../pages/**/*";

     @source "../components/**/*";
     @source "../layouts/**/*";
     @source "../pages/**/*";

This ensures Tailwind scans all your source files for class usage, which is especially important in layered or monorepo setups Nuxt Layers not processing CSS correctly from base layer. Summary:
- Install both Tailwind and DaisyUI. - Add DaisyUI as a plugin in your Tailwind config. - Explicitly list DaisyUI themes if using v4+. - Use the @source directive in your CSS if you have issues with styles not being applied in layered/monorepo setups. If you follow these steps, you should have Tailwind and DaisyUI working together in your Nuxt project. If you encounter specific issues, please provide error messages or describe the problem for more targeted help. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1054325509691015169> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

micbianchi97OP•4mo ago

i think is old as answer

⛧ RedStar ⛧•4mo ago

What kind of problem do you have? Wait You have missing a another denpencies

⛧ RedStar ⛧•4mo ago

pnpm add -D @tailwindcss/typography

pnpm add -D @tailwindcss/typography

--- https://github.com/tailwindlabs/tailwindcss-typography

GitHub

GitHub - tailwindlabs/tailwindcss-typography: Beautiful typographic...

Beautiful typographic defaults for HTML you don't control. - tailwindlabs/tailwindcss-typography

⛧ RedStar ⛧•4mo ago

https://daisyui.com/docs/layout-and-typography/

Tailwind Layout and Typography Component — Tailwind CSS Component...

Tailwind Layout and Typography examples: How to use layouts and typography in daisyUI component

⛧ RedStar ⛧•4mo ago

You have to install that dependency to work

micbianchi97OP•3mo ago

HI, I discovered the reason and i wrote an article in this regard, in case it can help someone https://medium.com/@michele.bianchi.fe/tailwind-css-v4-and-scss-the-breakup-911445ebe17d

Medium

Tailwind CSS v4 and SCSS: The Breakup

Recently, I started working on a personal project using Nuxt. At work, I’ve always been used to working with SCSS, but lately, I’ve…

Gaming

Programming

Nuxt with tailwind and DaisyUI

Did you find this page helpful?