Filament•2d ago

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 ```bash...

Jump to solution

20 Replies

ModestasV•18h ago

This might help you: https://filamentexamples.com/tutorial/tailwind-css-class-not-found-how-to-add-them?source=search In short - tailwind comes with required classes for Filament to work. If you need anything custom - you have to create a theme 🙂

Filament Examples

Filament Tailwind CSS Class Not Found: How to Activate It

Some elements in your panel require an existing Tailwind CSS class, but often, it's not pre-compiled and doesn't work. So let's see how we can use any class!

yohananOP•16h ago

this not working too. i already had custom theme configured. applying style in theme.css do not work also.

ModestasV•16h ago

Have you compiled the assets after you used tailwind classes?

yohananOP•16h ago

Yes, npm run dev. And also tried npm run build. Nothing changed.

ModestasV•16h ago

Is the theme being loaded correctly? Try to override some filament styling and see if it works

krekas•16h ago

wait, what this have to do with filament here? that's the first important question

yohananOP•15h ago

I'm using filament. Already build the backend with it. I need to show a livewire full-page component via a route to display for exemple a list of orders for kitchen. So, that's why.

ModestasV•15h ago

Okay, but how did you import the theme/asset files into your layout?

krekas•15h ago

This page. Is it also in a filament panel or outside?

yohananOP•14h ago

no, i want it to be outside, no need to login. i just created a livewire component and called it via the web route.

LeandroFerreira•14h ago

Are you using Filament outside the panel?

ModestasV•14h ago

I think that the resources are not being loaded in the components/layouts correctly

krekas•14h ago

then you are doing everything wrong. Nothing works from the filament outside of the panel until you tell it in this case you need to learn more about livewire and laravel

LeandroFerreira•14h ago

If you want to install the TALL preset, you can use this If you want to use Filament Form builder, for example, you need to install the Form Builder assets, Tailwind, etc

GitHub

GitHub - laravel-frontend-presets/tall: A TALL (Tailwind CSS, Alpin...

A TALL (Tailwind CSS, Alpine.js, Laravel and Livewire) Preset for Laravel - laravel-frontend-presets/tall

Installation - Form Builder - Filament

yohananOP•14h ago

LeandroFerreira•14h ago

use TALL Stack preset https://tallstack.dev/

TALL stack

TALL Stack: Tailwind CSS, Alpine.js, Laravel, and Livewire. One Hap...

Learn more about the newest stack for Laravel developers. Full stack, all in Laravel-inspired syntax.

yohananOP•14h ago

Sorry for this question, but this can be installed in the same project with filament ? As i said, i'm already using filament for backend.

krekas•14h ago

it can

Solution

LeandroFerreira•13h ago

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

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/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;

/* 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: [],
}

/* 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/**',
            ],
        }),
    ],
})

/* 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: {},
    },
};

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

run npm run dev

yohananOP•13h ago

Great. It's working now. I've tried to use TALL preset but after installing the ui the dashboard route for filament didn't work anymore, so mooving to this solution and css work now. Thanks for your help. Thanks you all.

Gaming

Programming

Tailwind css not working on full-page livewire component

Did you find this page helpful?