Filament•13mo ago•

23 replies

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)

Route::get('path', LivewireComponent::class)

Tailwind css not working on it.
First error was

components.layouts.app not found

components.layouts.app not found

So i created the folder

components/layouts

components/layouts

and inside created

app.blade.php

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

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

npm run dev

Jump to solution

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)

Route::get('path', LivewireComponent::class)

Tailwind css not working on it.
First error was

components.layouts.app not found

components.layouts.app not found

So i created the folder

components/layouts

components/layouts

and inside created

app.blade.php

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

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

npm run dev

Jump to solution

Tailwind css not working on full-page livewire component

Tailwind css not working on full-page livewire component

Similar Threads

Similar Threads

Similar Threads