Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind JIT Safelist String Generator
module.exports = {
purge: {
content: [
"..."
],
safelist: [
...createSafeListString({
rules: ["mt", "mb", "pt", "pb"],
values: [1, 2, 3, 4, 6, 8, 12, 16, 24],
responsive: [null, "xs", "sm", "md", "lg"],
modifiers: ['hover']
}),
],
},
mode: 'jit'
};
function createSafeListString(opts) {
const { rules = [], values = [], modifiers = [], responsive = [] } = opts;
const results = [];
for (let rule of rules) {
for (let value of values) {
const lastPart = rule + "-" + value;
for (let bp of responsive) {
if (Boolean(modifiers.length)) {
for (var modifier of modifiers) {
results.push(bp + ":" + modifier + ":" + lastPart);
}
} else if (Boolean(bp)) {
results.push(bp + ":" + lastPart);
} else {
results.push(lastPart);
}
}
}
}
return results;
}
module.exports = createSafeListString;
@philipdanielhayton
Copy link
Author

philipdanielhayton commented Sep 5, 2021

Tailwind JIT doesn't support regex classes, but sometimes you need to whitelist a whole load of classes (for example values that are added dynamically from a CMS). This snippet allows you to quickly generate large numbers of safelist rules with complete granularity.

This is not fully tested!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment