Filament•11mo ago

Tailwind classes not found outside of filament

I'm using Filament for the first time and it is working beautifully, however I'm unable to use regular TW classes such as "font-3xl" in my other livewire components. I'm pretty sure this is a vite config issue, but I've followed the guide and even attempted to add a custom theme. This has been driving me nuts for a day!

24 Replies

hhnkOP•11mo ago

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from 'tailwindcss';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js',`resources/css/filament/admin/theme.css`],
            refresh: [
                'app/Livewire/**',
            ],
        }),
    ],
    server: {    
        host: '0.0.0.0',
        port: '5173',
        hmr: {
            host: 'vite.local',
            clientPort: '5173',
        }
    },
});

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from 'tailwindcss';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js',`resources/css/filament/admin/theme.css`],
            refresh: [
                'app/Livewire/**',
            ],
        }),
    ],
    server: {    
        host: '0.0.0.0',
        port: '5173',
        hmr: {
            host: 'vite.local',
            clientPort: '5173',
        }
    },
});

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import preset from './vendor/filament/support/tailwind.config.preset'


/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',        
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],

};

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';
import preset from './vendor/filament/support/tailwind.config.preset'


/** @type {import('tailwindcss').Config} */
export default {
    presets: [preset],
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
        './resources/views/livewire/**/*.blade.php',        
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],

};

postcss.config.js

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
};

postcss.config.js

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
};

Disouric•11mo ago

Can you look at this thread, I think it's the same issue https://discord.com/channels/883083792112300104/1192461271837196400/1192461271837196400

hhnkOP•11mo ago

I'll check it out! Haven't seen that thread yet 👍🏻 thanks for the response Just to clarify, the TW classes aren't being applied in standalone Livewire components which do not contain Filament forms or tables

Disouric•11mo ago

But still in the panel right?

hhnkOP•11mo ago

Nope

Disouric•11mo ago

Just to be sure, the Livewire component is not on a custom page in the panel or something like that

hhnkOP•11mo ago

This is just some text in a regular Livewire componenet with some classes:

Disouric•11mo ago

Yeah but where is the Livewire component included

hhnkOP•11mo ago

weird huh?

Disouric•11mo ago

In a custom page on the panel or just some custom route or something

hhnkOP•11mo ago

It's a full page component with just one line of text ina div

Disouric•11mo ago

So a custom route?

hhnkOP•11mo ago

yup So bizarre!

Disouric•11mo ago

Aight, that's what I needed to know. Are you running npm run build or npm run dev?

hhnkOP•11mo ago

I build, then dev

Disouric•11mo ago

What do you include in your layout? The app.css or the filament theme?

hhnkOP•11mo ago

@filamentStyles
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  @livewireStyles

@filamentStyles
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  @livewireStyles

Disouric•11mo ago

Is the view made inside a .blade.php file in the resources/views/ directory? Or in the Livewire component itself?

hhnkOP•11mo ago

The blade file is under resources/views/livewire/pages

Disouric•11mo ago

So /resources/views/->

hhnkOP•11mo ago

yup

Disouric•11mo ago

Then I'm lost, you could try to still make a custom theme and include the custom theme in your page

hhnkOP•11mo ago

It's so weird because some TW classes are working

hhnkOP•11mo ago

I will try this, thanks!!!

Gaming

Programming

Tailwind classes not found outside of filament