Nuxt•2w 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

7 Replies

kapa.ai•2w 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•2w ago

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