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

Compile new admin panel Tailwind CSS classes

Admin panel

by Dan Harrin, 2 years ago

7 4075

Brand logos with dark mode

Admin panel

by ewilan-riviere, 1 year ago

3 2949

Composer update with password protected package

FAQ Integration

by Caspar Bisschop, 1 year ago

0 1125

Adam Weston

2 years 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 →