Forcing a CSS definition inclusion even when no pages use that definition #2708
-
Hi everyone, If I create a test page somewhere and include a single line of text with that definition in use, then the Vercel site works properly. This is a bit hacky - is there a tailwind term or similar that I can use to ensure an unused CSS definition is included in the final computed CSS file? Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
Hey! You can use the // tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.html'],
// These options are passed through directly to PurgeCSS
+ options: {
+ whitelist: ['bg-red-500', 'px-4', 'any-class-you-want-to-keep'],
+ }
},
// ...
} Important note: Tailwind 2.0, which ships in ~2 weeks, updates to PurgeCSS 3, which will lead to a change in this option: the // tailwind.config.js
module.exports = {
purge: {
content: ['./src/**/*.html'],
// These options are passed through directly to PurgeCSS
options: {
- whitelist: ['bg-red-500', 'px-4', 'any-class-you-want-to-keep'],
+ safelist: ['bg-red-500', 'px-4', 'any-class-you-want-to-keep'],
}
},
// ...
} Hope it helps! 👍 |
Beta Was this translation helpful? Give feedback.
Hey!
You can use the
whitelist
option in thepurge
section of your Tailwind config to achieve that - add the class name(s) you want to preserve even if not present in any of the templates, and they will be skipped by purge!Important note: Tailwind 2.0, which ships in ~2 weeks, updates to PurgeCSS 3, which will lead to a change in this option: the
whitelist
option will becomesafelist
, so when you upgrade, you'll need to adjust stat in y…