Tailwindcss v4 with Vite on Nuxt4 seems to ignore the tailwind.config.js

[cnicodeme]

Hi,

sorry if this is a dumb question but I can't make it work.

I've installed Nuxt (4.0.3) and Tailwindcss (4.1.12) and it works, except the properties I set on the tailwind.config.js

Here's my nuxt.config.js :

import tailwindcss from '@tailwindcss/vite'

export default defineNuxtConfig({
    compatibilityDate: '2025-07-15',
    devtools: { enabled: true },
    css: ['~/assets/css/main.css'],
    modules: [
        '@nuxt/content',
        '@nuxt/eslint',
        '@nuxt/image',
        'motion-v/nuxt',
        '@nuxtjs/color-mode'
    ],
    vite: {
        plugins: [tailwindcss()],
    },
    app: {
        rootAttrs: { class: 'w-full' }
    }
})

And in the same folder, the tailwind.config.js (simplified here):

const typographyStyles = require('./typography')
const typographyPlugin = require('@tailwindcss/typography')
const headlessuiPlugin = require('@headlessui/tailwindcss')

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "{srcDir}/components/**/*.{vue,js,jsx,mjs,ts,tsx}",
        "{srcDir}/layouts/**/*.{vue,js,jsx,mjs,ts,tsx}",
        "{srcDir}/pages/**/*.{vue,js,jsx,mjs,ts,tsx}",
        "{srcDir}/plugins/**/*.{js,ts,mjs}",
        "{srcDir}/composables/**/*.{js,ts,mjs}",
        "{srcDir}/utils/**/*.{js,ts,mjs}",
        "{srcDir}/{A,a}pp.{vue,js,jsx,mjs,ts,tsx}",
        "{srcDir}/{E,e}rror.{vue,js,jsx,mjs,ts,tsx}",
        "{srcDir}/app.config.{js,ts,mjs}",
        "{srcDir}/app/spa-loading-template.html"
    ],
    darkMode: 'selector',
    theme: {
        fontSize: {
            '2xs': ['0.75rem', { lineHeight: '1.25rem' }],
            xs: ['0.8125rem', { lineHeight: '1.5rem' }],
            sm: ['0.875rem', { lineHeight: '1.5rem' }],
            base: ['1rem', { lineHeight: '1.75rem' }],
            lg: ['1.125rem', { lineHeight: '1.75rem' }],
            xl: ['1.25rem', { lineHeight: '1.75rem' }],
            '2xl': ['1.5rem', { lineHeight: '2rem' }],
            '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
            '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
            '5xl': ['3rem', { lineHeight: '1' }],
            '6xl': ['3.75rem', { lineHeight: '1' }],
            '7xl': ['4.5rem', { lineHeight: '1' }],
            '8xl': ['6rem', { lineHeight: '1' }],
            '9xl': ['8rem', { lineHeight: '1' }],
        },
        typography: typographyStyles,
        extend: {
            maxWidth: {
                lg: '33rem',
                '2xl': '40rem',
                '3xl': '50rem',
                '5xl': '66rem',
            },
        },
    },
    plugins: [typographyPlugin, headlessuiPlugin],
}

Looking at --container-5xl returns 64rem, and not 66rem as it should be.

Moreover, requiring anything at the top of the tailwind.config.js file (something that doesn't exist) doesn't break Nuxt, which makes me believe it's completely ignored.

How can I do ?

(I'm only interested in changing the config, if it's somewhere else, that's all good for me too)

Thank you !

[wongjn]

In v4, configuration should be done in the input CSS file, see https://tailwindcss.com/docs/theme.

[cnicodeme]

Oh ok, thank you.

Is there a way to convert my tailwind.config.js to this ?

[wongjn]

If you were on v3 previously, you can try rolling back via git and reinstalling v3. Then use the upgrade tool. Otherwise, you can create a minimal v3 project elsewhere with your Tailwind config. Then, run the upgrade tool on this project and copy the updated CSS.

[cnicodeme]

Perfect! It worked, thank you !