From 740871f3a8133fa11d7c6347128bed585ad0da7c Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 11 Nov 2022 12:12:08 -0500 Subject: [PATCH] Document new blocklist feature --- src/pages/docs/content-configuration.mdx | 36 ++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/pages/docs/content-configuration.mdx b/src/pages/docs/content-configuration.mdx index 0494386e6..bddbeb8a8 100644 --- a/src/pages/docs/content-configuration.mdx +++ b/src/pages/docs/content-configuration.mdx @@ -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 +
+ 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. +
+``` + +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