Providing styles with your plugin by Ryan Chandler - Tricks

In a lot of cases, you'll likely want to provide some styles with your Filament plugin. We'll be focusing on an admin panel plugin here for simplicity.

Create a package.json file in the root of your plugin.

{
    "private": true
}

Install Tailwind CSS.

npm install tailwindcss -D

Create a Tailwind configuration file.

npx tailwindcss init

Add your views directory to the content array in the configuration file.

module.exports = {
    content: [ 
        './resources/views/**/*.blade.php' 
    ], 
    theme: {
        extend: {},
    },
    plugins: []
}

Disable Tailwind's preflight plugin to prevent the reset styles being duplicated.

module.exports = {
    content: [
        './resources/views/**/*.blade.php'
    ],
    theme: {
        extend: {},
    },
    plugins: [],
    corePlugins: { 
        preflight: false, 
    } 
}

Enable dark mode with the class configuration.

module.exports = {
    content: [
        './resources/views/**/*.blade.php'
    ],
    darkMode: 'class', 
    theme: {
        extend: {},
    },
    plugins: [],
    corePlugins: {
        preflight: false,
    }
}

Add an important specifier to ensure the generated styles are scoped to your plugin.

module.exports = {
    content: [
        './resources/views/**/*.blade.php'
    ],
    important: '.my-filament-plugin', 
    darkMode: 'class',
    theme: {
        extend: {},
    },
    plugins: [],
    corePlugins: {
        preflight: false
    }
}

Ensure that your important specifier is added to your Blade views, e.g. around the field class or page components that you're providing.
Generate your CSS using the Tailwind CLI.

npx tailwindcss -o ./dist/my-plugin.css

Register your stylesheet with Filament inside of your PluginServiceProvider.

class MyPluginServiceProvider extends PluginServiceProvider
{
    public static string $name = 'my-plugin';
 
    protected array $styles = [ 
        'my-plugin' => __DIR__ . '/../dist/my-plugin.css', 
    ]; 
}

Your plugin's CSS will now be loaded inside of the admin panel.

Other tricks

Custom Laravel error pages

Admin panel

by Jeff Greco, 10 months ago

8 2469

Use a slide over instead of a modal

Admin panel Table builder

by Martin Mildner, 1 year ago

2 1968

Generate slugs from a title whilst typing (without overriding)

Form builder

by Ralph J. Smit, 1 year ago

28 7806

Adam Weston

1 year ago

I've found that using

important: '.my-filament-plugin'

breaks dark mode in plugins since it generates classes like '.my-filament-plugin .dark' insetead of '.dark .my-filament-plugin'. This is due to that fact that class based dark mode only add's '.dark' to the html element in Filament and not anywhere under '.my-filament-plugin'.

Best way to support default Filament classes, dark mode and user overwritten themes is to simply include the Filament defalut color pallete in your plugin's tailwind config.

const colors = require("tailwindcss/colors");
 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./resources/views/**/*.blade.php", "./src/**/*.php"],
  darkMode: "class",
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      colors: {
        danger: colors.rose,
        primary: colors.yellow,
        success: colors.green,
        warning: colors.amber,
      },
    },
  },
  plugins: [],
};

Sign in to comment →