Tricks

Providing styles with your plugin

Jun 3, 2022
Ryan Chandler
Admin panel, Integration

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.

  1. Create a package.json file in the root of your plugin.
{
"private": true
}
  1. Install Tailwind CSS.
npm install tailwindcss -D
  1. Create a Tailwind configuration file.
npx tailwindcss init
  1. Add your views directory to the content array in the configuration file.
module.exports = {
content: [
'./resources/views/**/*.blade.php'
],
theme: {
extend: {},
},
plugins: []
}
  1. 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,
}
}
  1. Enable dark mode with the class configuration.
module.exports = {
content: [
'./resources/views/**/*.blade.php'
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false,
}
}
  1. 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
}
}
  1. Ensure that your important specifier is added to your Blade views, e.g. around the field class or page components that you're providing.

  2. Generate your CSS using the Tailwind CLI.

npx tailwindcss -o ./dist/my-plugin.css
  1. 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.

No comments yet…