Filament•3y ago•

9 replies

tailwind css classes not working in custom theme

I'm asking this here because I don't think it's a purely tailwindcss issue. I think it's related to custom themes. I'm trying to use

bg-slate-100

bg-slate-100

, but no matter what I do, I can't get it to show up in my rendered view.

I did the following:
1) I created the custom theme
2) I added the file I need to get the styles from to the content array in the

tailwind.config.js

tailwind.config.js

file.
3) I ran

npm run build

npm run build

.
4) I'm referencing the css file like so in my layout file (separate layout file from the main one):

<link href="{{ asset('css/filament/filament/app.css') }}" rel="stylesheet" />

<link href="{{ asset('css/filament/filament/app.css') }}" rel="stylesheet" />

5) I also added the colors plugin to the

tailwind.config.js

tailwind.config.js

file, but I'm not sure that was necessary.

I can

dd

dd

the view and see that the class is in the markup, but it's not rendering. There are a couple of other styles that seem to not be rendering, but it doesn't seem like it's all the styles.

Here's my tailwind.config.js file:

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
const colors = require('tailwindcss/colors')

export default {
    presets: [preset],
    content: [
        './app/Filament/Admin/**/*.php',
        './resources/views/pdf/*.blade.php', <---this is the file with needed css.
        './resources/views/filament/admin/**/*.blade.php',
        './resources/views/filament/app/resources/**/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                ...colors,
            }
        }
    }
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
const colors = require('tailwindcss/colors')

export default {
    presets: [preset],
    content: [
        './app/Filament/Admin/**/*.php',
        './resources/views/pdf/*.blade.php', <---this is the file with needed css.
        './resources/views/filament/admin/**/*.blade.php',
        './resources/views/filament/app/resources/**/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                ...colors,
            }
        }
    }
}

The page that I want to use the CSS file on is outside of the normal filament tenant, but I'm thinking it should still work the same way if I'm referencing the CSS file. I can't find the value #f1f5f9 in the compiled css file either, which is the slate-100 color.

Solution

Also you should use

@vite

@vite

instead of

<link href="asset(">

<link href="asset(">

Jump to solution

tailwind css classes not working in custom theme

I'm asking this here because I don't think it's a purely tailwindcss issue. I think it's related to custom themes. I'm trying to use

bg-slate-100

bg-slate-100

tailwind.config.js

tailwind.config.js

file.
3) I ran

npm run build

npm run build

.
4) I'm referencing the css file like so in my layout file (separate layout file from the main one):

<link href="{{ asset('css/filament/filament/app.css') }}" rel="stylesheet" />

<link href="{{ asset('css/filament/filament/app.css') }}" rel="stylesheet" />

5) I also added the colors plugin to the

tailwind.config.js

tailwind.config.js

file, but I'm not sure that was necessary.

I can

dd

dd

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
const colors = require('tailwindcss/colors')

export default {
    presets: [preset],
    content: [
        './app/Filament/Admin/**/*.php',
        './resources/views/pdf/*.blade.php', <---this is the file with needed css.
        './resources/views/filament/admin/**/*.blade.php',
        './resources/views/filament/app/resources/**/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                ...colors,
            }
        }
    }
}

import preset from '../../../../vendor/filament/filament/tailwind.config.preset'
const colors = require('tailwindcss/colors')

export default {
    presets: [preset],
    content: [
        './app/Filament/Admin/**/*.php',
        './resources/views/pdf/*.blade.php', <---this is the file with needed css.
        './resources/views/filament/admin/**/*.blade.php',
        './resources/views/filament/app/resources/**/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
    theme: {
        extend: {
            colors: {
                ...colors,
            }
        }
    }
}

Solution

Also you should use

@vite

@vite

instead of

<link href="asset(">

<link href="asset(">

Jump to solution

tailwind css classes not working in custom theme

tailwind css classes not working in custom theme

Similar Threads

Similar Threads

Similar Threads