FilamentF
Filament•12mo ago
yohanan

Tailwind css not working on full-page livewire component

Hi, hope you all are doing well.
I'm trying to render livewire component as full-page via:
Route::get('path', LivewireComponent::class)

Tailwind css not working on it.
First error was components.layouts.app not found

So i created the folder components/layouts and inside created app.blade.php.

The component view is showing correctly but tailwind css not working on it.

Am i missed something ?
Solution
you can do this if you don't want to use TALL preset..

php artisan livewire:layout

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p


<!-- resources/views/components/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>{{ $title ?? 'Page Title' }}</title>

        @vite('resources/css/app.css')
    </head>
    <body>

        <h1 class="text-3xl font-bold underline">
            Hello world!
        </h1>

        {{ $slot }}

        @vite('resources/js/app.js')
    </body>
</html>


/* resources/css/app.css */
@tailwind base;
@tailwind components;
@tailwind utilities;


/* tailwind.config.js */
export default {
    content: [
        "./resources/**/*.blade.php",
        "./resources/views/livewire/*.blade.php",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}


/* vite.config.js */
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})


/* postcss.config.js */
export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};


run npm run dev
Jump to solution
Was this page helpful?