Nuxt•4mo ago

Nuxt3 with Tailwind v4

I've setup a Nuxt3 project with tailwind v4. I only have a tailwind.config.js and the imports in the css files but I can not use font styling or colors only position and sizes.

11 Replies

kapa.ai•4mo ago

Hi @Spctr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- It looks like with Tailwind CSS v4 (as used in Nuxt 3 and Nuxt UI), the configuration approach has changed from JavaScript-based (tailwind.config.js) to a CSS-first approach using the @theme directive and CSS variables. This means that to use custom fonts and colors, you should define them in your CSS (typically in assets/css/main.css) rather than only in tailwind.config.js. If you only have a tailwind.config.js and import Tailwind in your CSS, but haven't defined your theme variables using @theme, then utilities for fonts and colors may not be generated—only the default position and sizing utilities will work. To fix this: 1. Create or update your main CSS file (e.g., assets/css/main.css):

@import "tailwindcss";
@import "@nuxt/ui"; /* or "@nuxt/ui-pro" if using Pro */

@theme static {
  --font-sans: 'Your Font', sans-serif;
  --color-primary-500: #00C16A;
  /* Add other color variables as needed */
}

@import "tailwindcss";
@import "@nuxt/ui"; /* or "@nuxt/ui-pro" if using Pro */

@theme static {
  --font-sans: 'Your Font', sans-serif;
  --color-primary-500: #00C16A;
  /* Add other color variables as needed */
}

2. Register this CSS file in your Nuxt config:

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

3. Do not rely solely on tailwind.config.js for theme customization. With Tailwind v4 in Nuxt UI, you must use the @theme directive in your CSS for fonts and colors to work as expected. The tailwind.config.js is now mostly for content paths and plugin registration, not for theme extension or overrides. Summary:
If you only use tailwind.config.js, you won't get font and color utilities in Tailwind v4 with Nuxt UI. You must define your fonts and colors using the @theme directive in your CSS file for these utilities to be available. This is a key change in Tailwind v4 and Nuxt UI v3's integration. For more details, see the official Nuxt UI Theme documentation and migration guide for v4 changes.

"Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your theme with CSS variables inside a @theme directive to define your project's custom design tokens, like fonts, colors, and breakpoints"

Nuxt UI Theme documentation ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

SpctrOP•4mo ago

@kapa.ai What do I need to install or configure for tailwind v4 in Nuxt3

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To use Tailwind CSS v4 in a Nuxt 3 project, you should: 1. Install Tailwind CSS
You can add Tailwind CSS to your project using your preferred package manager. For example:

   pnpm add tailwindcss

   pnpm add tailwindcss

   npm install tailwindcss

   npm install tailwindcss

   yarn add tailwindcss

   yarn add tailwindcss

Nuxt UI Installation Guide 2. Create a main CSS file
In your project (e.g., assets/css/main.css), import Tailwind CSS and (optionally) Nuxt UI or Nuxt UI Pro:

   @import "tailwindcss";
   @import "@nuxt/ui"; /* or "@nuxt/ui-pro" if using Pro */

   @import "tailwindcss";
   @import "@nuxt/ui"; /* or "@nuxt/ui-pro" if using Pro */

3. Register the CSS file in your Nuxt config
In nuxt.config.ts:

   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })

   export default defineNuxtConfig({
     css: ['~/assets/css/main.css']
   })

Theme Customization 4. (Recommended) Use the @theme directive for customization
Tailwind v4 in Nuxt UI uses a CSS-first approach. Customize fonts, colors, and other design tokens using the @theme directive in your CSS:

   @theme static {
     --font-sans: 'Your Font', sans-serif;
     --color-primary-500: #00C16A;
     /* Add other variables as needed */
   }

   @theme static {
     --font-sans: 'Your Font', sans-serif;
     --color-primary-500: #00C16A;
     /* Add other variables as needed */
   }

Theme Customization 5. (If using Nuxt UI or Nuxt UI Pro) Add the module
In nuxt.config.ts:

   export default defineNuxtConfig({
     modules: ['@nuxt/ui'] // or ['@nuxt/ui-pro']
   })

   export default defineNuxtConfig({
     modules: ['@nuxt/ui'] // or ['@nuxt/ui-pro']
   })

Nuxt UI Installation Guide Note:
With Tailwind v4 and Nuxt UI, you no longer use tailwind.config.js for theme customization. Instead, use the @theme directive in your CSS for fonts, colors, and breakpoints. If you follow these steps, Tailwind v4 will be properly configured in your Nuxt 3 project. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

SpctrOP•4mo ago

@kapa.ai heading tags do not set a text size

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- In Nuxt 3 projects using Nuxt UI Pro and Tailwind CSS v4, heading tags (like <h1>, <h2>, etc.) do set text sizes, but only if the appropriate theme configuration is present. The text size and other styles for headings are controlled by the prose configuration in your app.config.ts or via the @theme directive in your CSS. For example, the default configuration for headings in app.config.ts looks like this:

export default defineAppConfig({
  uiPro: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      },
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          // ...
        }
      },
      h3: {
        slots: {
          base: [
            'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          // ...
        }
      },
      h4: {
        slots: {
          base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary',
          // ...
        }
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
          link: 'inline-flex items-center gap-2'
        }
      },
      h2: {
        slots: {
          base: [
            'relative text-2xl text-highlighted font-bold mt-12 mb-6 scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-xl/7 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          // ...
        }
      },
      h3: {
        slots: {
          base: [
            'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
            '[&>a>code]:transition-colors'
          ],
          // ...
        }
      },
      h4: {
        slots: {
          base: 'text-lg text-highlighted font-bold mt-6 mb-2 scroll-mt-[calc(24px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(24px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary',
          // ...
        }
      }
    }
  }
})

Here, classes like text-4xl, text-2xl, text-xl, and text-lg are applied to the respective heading tags, which set their text sizes. If you are not seeing text sizes applied to your headings, make sure: - You have the correct prose configuration in your app.config.ts. - Your CSS includes the necessary imports and the @theme directive if you are customizing fonts and colors. If you do not have this configuration, or if your theme variables are not set up correctly, heading tags may not have the expected text sizes applied Typography: h1, h2, h3, h4. If you are still not seeing text sizes, double-check your configuration and ensure you are not missing the required setup. If you are using only Tailwind CSS without Nuxt UI Pro, you may need to add the appropriate Tailwind classes manually to your headings. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

SpctrOP•4mo ago

@kapa.ai I wanna get the default sizes for text when i'm using a heading tag

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The default text sizes for heading tags when using Nuxt UI Pro are set via the prose configuration in app.config.ts. According to the knowledge sources, the following Tailwind CSS classes are applied by default: - h1: text-4xl - h2: text-2xl - h3: text-xl - h4: text-lg These classes correspond to the default text sizes for each heading level:

export default defineAppConfig({
  uiPro: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl ...'
        }
      },
      h2: {
        slots: {
          base: 'text-2xl ...'
        }
      },
      h3: {
        slots: {
          base: 'text-xl ...'
        }
      },
      h4: {
        slots: {
          base: 'text-lg ...'
        }
      }
    }
  }
})

export default defineAppConfig({
  uiPro: {
    prose: {
      h1: {
        slots: {
          base: 'text-4xl ...'
        }
      },
      h2: {
        slots: {
          base: 'text-2xl ...'
        }
      },
      h3: {
        slots: {
          base: 'text-xl ...'
        }
      },
      h4: {
        slots: {
          base: 'text-lg ...'
        }
      }
    }
  }
})

You can find these settings in the Nuxt UI Typography documentation. If you need to customize these sizes, you can override the base class for each heading in your own configuration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

Nuxt3 with Tailwind v4

Did you find this page helpful?