Why tailwind classes are not supported on new laravel 11 / inertiajs site?

Reading docs at https://tailwindcss.com/docs/installation I try to add tailwindcss into my new laravel 11 / inertiajs 1.2 / vuejs 3 site I

and having in resources/views/app.blade.php :

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite('resources/js/app.js', 'resources/css/app.css')
    @inertiaHead
</head>

in resources/css/app.css :

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

and in vite.config.js :

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

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

In tailwind.config.js I have :

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms],
};

and in resources/js/app.js :

import './bootstrap';
import '../css/app.css';

Not shure have I to run command :

npx tailwindcss -i ./resources/css/app.css  --watch

and in which command ? Have it valid params ? But anyway tailwind classes are not supported anyway...

    "php": "^8.2",
    "inertiajs/inertia-laravel": "^1.3",
    "laravel/framework": "^11.9",

and

"devDependencies": {
    "axios": "^1.6.4",
    "laravel-vite-plugin": "^1.0",
    "tailwindcss": "^3.4.8",
    "vite": "^5.0"
},
"dependencies": {
    "@inertiajs/vue3": "^1.2.0",
    "@vitejs/plugin-vue": "^5.1.2",
    "vue": "^3.4.36"
}

Thanks in advance!

Rebwar

1 year ago

Level 32

@petrogromovo try

npm run dev

Refer to the documentation for further details.

PetroGromovo

1 year ago

Level 5

@Rebwar sure I run this command. The error anyway

Rebwar

1 year ago

Level 32

@petrogromovo Update the content array in your tailwind.config.js file by adding the following lines:

 './resources/**/*.js',
 './resources/**/*.vue'

If you encounter any errors while running npm run dev, feel free to share the error details here, and I'll assist you.

Please or to participate in this conversation.