Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document new blocklist feature #1427

Merged
merged 1 commit into from Nov 11, 2022
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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