Level 75
Did you follow https://laravel.com/docs/12.x/vite#main-content to use the assets?
Feb 27, 2025
6
Level 1
tailwind v4 and livewire (I am cooked )
Tailwind CSS v4 Not Working with Laravel Livewire Hi everyone,
I’m having trouble getting Tailwind CSS v4 to work with Laravel Livewire. I’ve followed the new Tailwind CSS v4 setup, but the styles aren’t being applied to my Livewire component. Here’s what I’ve done so far: I have installed the new laravel kit with livewire and everything is setup but I create a livewire component and use Route::view("customRegister",'Livewire.customregister'); and I styled the customregister but it did not work there are components laravel (v12 )install with the new kit they use tailwind v4 and it work for them I am noobie please help
Level 102
Did you start npm run dev ?
Level 1
@Sinnbeck yeah I use cli composer dev and also tried the npm run dev
but still wont work
as I told you the there are components that laravel provider with the new start kit but when I create one using cli command
php artisan make:volt "name"
no style appieled such as flex bg-green-500 px-2 ... etc
app.css configure to style every page on the views folder
// app.css page
@import 'tailwindcss';
@import '../../vendor/livewire/flux/dist/flux.css'; @import "tailwindcss"; @source "../views"; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/.blade.php'; @source '../../vendor/livewire/flux-pro/stubs/**/.blade.php'; @source '../../vendor/livewire/flux/stubs/**/.blade.php'; @source '../../vendor/livewire/.blade.php';
Level 102
@bilalness Check tailwind.config.js. Make sure it includes the files you are editing in the "content" array
Level 1
@Sinnbeck I think I figure out the component should be wrapper inside a layout and my component, I want to use it as page which mean that there is no header to apply the this @vite('resources/css/app.css') solution : I create blade page call it custome and apply @vite('resources/css/app.css') on it then import the livewire component and yeah this fix my problem but I question can I use livewire as page with layout somthing I can import vite to my component and work right out of the box
Level 3
It appears that Tailwind is not working with the Laravel 12 Starter Kit for Livewire.
This got it working for me:
Level 1 adrianojsle Posted 3 months ago The bug happens because the recent version of Laravel already comes with a pre-installed version of Tailwind. Do the following:
1- Remove all Tailwind and PostCSS dependencies from the package.json file 2- Run "npm i -c" 3- Follow all the steps from tutorial Tailwind Vite Laravel official doc 4- Run "npm i @tailwindcss/postcss" 5- Change the postcss.config.js to: export default { plugins: { "@tailwindcss/postcss": {}, autoprefixer: {}, }, }; 6- Run "npm run dev -c"
https://tailwindcss.com/docs/installation/framework-guides/laravel/vite
Please or to participate in this conversation.