Generating TailwindCSS safelist with function? - tailwind-css

Question

I'm attempting to generate a safelist for TailWindCSS 3.0.23 using a function so I can cover some ranges.
For some reason, the classes still seem to be purged.
module.exports = {
content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
safelist: function(){
let list = [
'user-administrator:not(.wp-admin)',
];
for(let i = 0; i <= 100; i += 5 ){
list[list.length] = 'opacity-' + i;
}
return list;
},
Is this type of thing possible? Any ideas?

Answer 1

You could the following code in javascript.
const tailwindColors = require("./node_modules/tailwindcss/colors")
const colorSafeList = []
// Skip these to avoid a load of deprecated warnings when tailwind starts up
const deprecated = ["lightBlue", "warmGray", "trueGray", "coolGray", "blueGray"]
for (const colorName in tailwindColors) {
if (deprecated.includes(colorName)) {
continue
}
// Define all of your desired shades
const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900]
const pallette = tailwindColors[colorName]
if (typeof pallette === "object") {
shades.forEach((shade) => {
if (shade in pallette) {
// colorSafeList.push(`text-${colorName}-${shade}`) <-- You can add different colored text as well
colorSafeList.push(`bg-${colorName}-${shade}`)
}
})
}
}
// tailwind.config.js
module.exports = {
safelist: colorSafeList, // <-- add the safelist here
content: ["{pages,app}/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: tailwindColors,
},
},
plugins: [],
}

Answer 2

I ended up solving this by adding a pair of parenthesis after the closing bracket of the function so it executes.
module.exports = {
content: ['./app/**/*.php', './resources/**/*.{php,vue,js}'],
safelist: function(){
let list = [
'user-administrator:not(.wp-admin)',
];
for(let i = 0; i <= 100; i += 5 ){
list[list.length] = 'opacity-' + i;
}
return list;
}(),