diff --git a/docs/08-styling/01-overview.md b/docs/08-styling/01-overview.md index 14c067910e..b6f4713975 100644 --- a/docs/08-styling/01-overview.md +++ b/docs/08-styling/01-overview.md @@ -1,6 +1,7 @@ --- title: Overview --- +import Aside from "@components/Aside.astro" ## Changing the colors @@ -126,18 +127,21 @@ By default, this command will use NPM to install dependencies. If you want to us ```bash php artisan make:filament-theme --pm=bun ```` -This command generates a CSS file and a Tailwind configuration file in the `resources/css/filament` directory. To complete the setup, follow these steps: -1. Add the theme's CSS file to the input array in `vite.config.js`: -``` +This command generates a CSS file in the `resources/css/filament` directory. + +Add the theme's CSS file to the input array in `vite.config.js`: + +```js input: [ // ... 'resources/css/filament/admin/theme.css', -], +] ``` -2. Register the theme in the admin panel provider: -``` +Now, register the Vite-compiled theme CSS file in the panel's provider: + +```php use Filament\Panel; public function panel(Panel $panel): Panel @@ -148,11 +152,16 @@ public function panel(Panel $panel): Panel } ``` -3. Compile the theme: -``` +Finally, compile the theme with Vite: + +```bash npm run build ``` -Note: Check the command output for the exact file path `(e.g., admin/theme.css)`, as it may vary depending on your panel configuration. + + + You can now customize the theme by editing the CSS and Tailwind configuration files in `resources/css/filament`. ## Using Tailwind CSS classes in your Blade views or PHP files