The transition to v4 is broken...

[vb-connect]

Hello everyone!

I'm using Tailwind CSS for a Laravel/Vuejs project, and my upgrade to v4 doesn't seem to be working: The variables in app.css aren't being generated, and I don't understand what's causing the problem.

My tailwind.config.js file looks like this:

@import "tailwindcss";

body,
html {
    --font-sans:
        'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --border:214.3 31.8% 91.4%;
	...
    }

    .dark {
	...
        --background:222.2 84% 4.9%;
        --foreground:210 40% 98%;
        --border:217.2 32.6% 17.5%;

    }
}

@layer base { 
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }
}

And tailwind.config.js :

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    darkMode: ['class'],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './resources/js/**/*.{vue,js,ts,jsx,tsx}',
    ],
    theme: {
    	extend: {
		...
    		colors: {
    			background: 'hsl(var(--background))',
    			foreground: 'hsl(var(--foreground))',
    			border: 'hsl(var(--border))',

    		},
    		...
    	}
    },
    plugins: [require('tailwindcss-animate')],
};

It seems that tailwind.config.js is not loaded to get the colors? And so I have a black and white app...

My vite.config.ts have a Cannot find module '@tailwindcss/vite' or its corresponding type declarations. alert in this line : import tailwindcss from '@tailwindcss/vite';

import vue from '@vitejs/plugin-vue';
import laravel from 'laravel-vite-plugin';
import path from 'path';
import tailwindcss from '@tailwindcss/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.ts'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        tailwindcss(),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './resources/js'),
        },
    }
});

But, I did sail npm install tailwindcss @tailwindcss/vite and it appears in my package-lock.json : "@tailwindcss/vite": "^4.1.11",
I am not expert enough to find the solution and so I appeal to you, I have the impression that I am not far from the solution...

Tks !
Vincent

[rozsazoltan]

From v4 onwards, we no longer use the tailwind.config.js file. Instead, we have switched to CSS-first configuration by default. Useful links:

• Upgrade guide
• What's breaking changes from v4?
• Tailwind CSS v4: more packages and new Vite support
• How to switch to a CSS-first configuration in Tailwind CSS v4 and above

content property no longer needed:

• Automatic Source Detection from TailwindCSS v4
• Adding an external source or a package from within node_modules for detection

@tailwind directives deprecated:

• Removed @tailwind directives

Avoid @apply:

You don't need to use @apply. Adam Wathan also advocates avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097
• https://discord.com/channels/486935104384532500/1404418351584776243/1404427682040647811

Use @layer base for default styling:

• From v4 the reset style cannot be overridden by TailwindCSS classes

Themes, colors, dark mode:

By the way, put style-related formatting inside the @layer theme instead. The base layer is more for default appearances.

For example, you should write custom colors in the @theme layer, which you can override in different themes like this:

• How to use custom color themes in TailwindCSS v4
• Dynamic custom color themes
• How to override theme variables in TailwindCSS v4 - @theme vs @layer theme vs :root
• Should I use @theme or @theme inline?
  Official docs:
• https://tailwindcss.com/docs/functions-and-directives#theme-directive
• https://tailwindcss.com/docs/theme
• https://tailwindcss.com/docs/dark-mode#toggling-dark-mode-manually

[vb-connect]

I did migrate, but I didn't understand the concept of deleting tailwind.config (it's true that the documentation no longer mentions it).
I have a lot to look at because I'm completely unfamiliar with it.

Thanks for all these links and this read!