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!