Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 36 additions & 0 deletions src/pages/docs/content-configuration.mdx
Original file line number Diff line number Diff line change
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