Skip to content

Commit

Permalink
Update Minimal Theme docs
Browse files Browse the repository at this point in the history
  • Loading branch information
zepfietje committed Dec 15, 2023
1 parent 4e31413 commit e3e9ddb
Showing 1 changed file with 38 additions and 0 deletions.
38 changes: 38 additions & 0 deletions content/plugins/filament-minimal-theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,26 @@ Next, replace the imported Panel Builder stylesheet with the Minimal Theme style
+ @import '/vendor/filament/minimal-theme/resources/css/index.css';
```

Make sure the PostCSS Nesting plugin is installed in your project:

```bash
npm install postcss-nesting --save-dev
```

Then register it by adding it to your `postcss.config.js` file:

```diff
export default {
plugins: {
+ 'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}
```

Now compile your theme stylesheet using `npm run build`.

#### Configuration

Finally, register the theme plugin in your panel configuration file, and configure the colors and icons:
Expand Down Expand Up @@ -94,6 +114,24 @@ If you're using Filament packages outside the Panel Builder, you may install the

First, make sure you've properly installed any Filament packages. Your project should have a Tailwind CSS config file that extends the Filament preset, a stylesheet (e.g. `resources/css/app.css`), and a layout view that renders `@filamentStyles`.

Also, make sure the PostCSS Nesting plugin is installed in your project:

```bash
npm install postcss-nesting --save-dev
```

Then register it by adding it to your `postcss.config.js` file:

```diff
export default {
plugins: {
+ 'tailwindcss/nesting': 'postcss-nesting',
tailwindcss: {},
autoprefixer: {},
},
}
```

#### Stylesheet

In your app CSS file, import the Minimal Theme stylesheets for the Filament packages you're using:
Expand Down

0 comments on commit e3e9ddb

Please sign in to comment.