Tailwind is not working with some classes in my project

I have followed the installation steps here:
https://tailwindcss.com/docs/guides/laravel

And followed the steps over here too:
https://filamentphp.com/docs/2.x/forms/installation#configuring-styles

Here are some files that I'm using:
/* resources/css/app.css */

@import "../../vendor/filament/forms/dist/module.esm.css";

@tailwind base;
@tailwind components;
@tailwind utilities;


/* resources/css/filament.css */
@import "../../vendor/filament/filament/resources/css/app.css";


// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}


// tailwind.config.js
import colors from "tailwindcss/colors";
import forms from "@tailwindcss/forms";
import typography from "@tailwindcss/typography";

export default {
    content: [
        "./resources/**/*.blade.php",
        "./vendor/filament/**/*.blade.php",
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
    ],
    darkMode: "class",
    theme: {
        extend: {
            colors: {
                danger: colors.rose,
                primary: colors.blue,
                success: colors.green,
                warning: colors.yellow,
                ...colors,
            },
        },
    },
    plugins: [forms, typography],
};


// 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",
                "resources/css/filament.css",
            ],
            refresh: [
                ...refreshPaths,
                "app/Http/Livewire/**",
                "app/Tables/Columns/**",
                "app/Forms/Components/**",
            ],
        }),
    ],
});
Setting up Tailwind CSS in a Laravel project.
Filament
The elegant TALL stack form builder for Laravel artisans.
Was this page helpful?