Skip to content

Commit

Permalink
Document new blocklist feature (#1427)
Browse files Browse the repository at this point in the history
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
  • Loading branch information
adamwathan and adamwathan committed Nov 11, 2022
1 parent dc3cc81 commit 53b6c87
Showing 1 changed file with 36 additions and 0 deletions.
36 changes: 36 additions & 0 deletions src/pages/docs/content-configuration.mdx
Expand Up @@ -383,6 +383,42 @@ module.exports = {
}
```

### Discarding classes

Since Tailwind uses a very simple approach to detecting class names in your content, you may find that some classes are being generated that you don't actually need.

For example, this HTML would still generate the `container` class, even though that class is not actually being used:

```html
<div class="text-lg leading-8 text-gray-600">
Every custom pool we design starts as a used shipping **container**, and is
retrofitted with state of the art technology and finishes to turn it into
a beautiful and functional way to entertain your guests all summer long.
</div>
```

You may also want to prevent Tailwind from generating certain classes when those classes would conflict with some existing CSS, but you don't want to go so far as to prefix all of your Tailwind classes.

In these situations, you can use the `blocklist` option to tell Tailwind to ignore specific classes that it detects in your content:

```js tailwind.config.js
module.exports = {
content: [
'./pages/**/*.{html,js}',
'./components/**/*.{html,js}',
],
blocklist: [
'container',
'collapse',
],
// ...
}
```

The `blocklist` option only affects CSS that would be generated by Tailwind, not custom CSS you've authored yourself or are importing from another library.

Unlike `safelist`, the `blocklist` option only supports strings, and you cannot block classes using regular expressions.

---

## Transforming source files
Expand Down

1 comment on commit 53b6c87

@vercel
Copy link

@vercel vercel bot commented on 53b6c87 Nov 11, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.