Laravel 11 + Tailwind CSS - Some Classes Not Working

I installed a fresh Laravel 11 project and set up Tailwind CSS following the official Laravel documentation. However, I encountered an issue where some Tailwind classes work while others don’t.

My Setup:

Vite Configuration (vite.config.js)

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

export default defineConfig({
    plugins: [
        tailwindcss(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Tailwind Configuration (tailwind.config.js)

import defaultTheme from 'tailwindcss/defaultTheme';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },
    plugins: [],
};

CSS (resources/css/app.css)

@tailwind base;
@tailwind components;
@tailwind utilities;

Package.json Dependencies
jsonCopierModifier{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "postcss": "^8.5.3",
        "tailwindcss": "^3.4.17",
        "vite": "^6.0.11"
    },
    "dependencies": {
        "@tailwindcss/vite": "^4.0.8",
        "alpinejs": "^3.14.8"
    }
}

Issue: After running:

php artisan serve | npm run dev

I tested this simple Blade file (resources/views/welcome.blade.php):

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    @vite('resources/css/app.css')
    @vite('resources/js/app.js')
</head>
<body>
    <p class="underline text-white">Hello World</p>
</body>
</html>

Expected Behavior: The text should be underlined and white. Actual Behavior: ✅ underline works ❌ text-white does not work (the text remains black)

tykus

1 year ago

Level 104

Please format your code correctly by wrapping it within triple backticks

```
// your code
```

1 like

BouchantoufZakaria

1 year ago

Level 1

@tykus i have done that , soory for the mistake , i hope some one can tell me what the heck is going on

RemiM

1 year ago

Level 16

First, you can use an array in your @vite directive:

 @vite(['resources/css/app.css', 'resources/js/app.js'])

Then I guess you have a formatting problem in your original message. I don't know what jsonCopierModifier stands for, but your app.css should include only the Tailwind directive. As for your package.json, try removing the dependencies.

Example:

{
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.2.0",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.1.0",
        "vite": "^6.0.11"
    }
}

This come from a basic installation using laravel new [project-name] using Breeze and Alpine. As you can see in the file, there are no regular dependencies, only dev dependencies.

Also, you should open two terminals: one running your php artisan serveand another for npm run dev.

Please or to participate in this conversation.