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

Emit Livewire event from Table Actions

Table builder

by Uzzair B, 1 year ago

1 4153

Twitter like user popover

Admin panel Integration

by Arthur Minasyan, 1 year ago

1 1633

Auto scrolling for navigation selected menu

Admin panel

by Shipu Ahamed, 1 year ago

3 1784

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 →