@kellymears Unsure if a bug (maybe) or my misunderstanding (probably)
Use case: I have a tailwind.config.js file with some global safelist options. My custom theme utilizes blocks in folders that contain everything related to the block (script, view, schema, styles etc). Due to a lot of these components having options in the admin that correlate to tailwind classes (border, padding, color etc) I have to safelist using regex. This happens at a component level so they are drag and drop into projects.
The Problem: In my bud.config.js file I am using bud.globSync to grab all of the block safelist files, and trying to set the tailwind config:
export default async app => {
let currentSafelist = app.tailwind.config.safelist
let blockSafeList = []
// glob all js imports from ./MyBlocks/**/.tailwind.js and then push them into an array
const tailwindFiles = app.globSync('./MyBlocks/**/tailwind.js')
for (const file of tailwindFiles) {
let {safelist} = await import(file);
blockSafeList= [...blockSafeList, ...safelist]
}
let twConfig = app.tailwind.config
twConfig.safelist = [
...currentSafelist,
...blockSafeList
]
app.tailwind.setConfig(twConfig)
console.log(app.tailwind.config)
My original tailwind.config.js file has the this as the safelist:
safelist: [
{
pattern: /bg-(blue)-(50|100|200|300|900)/,
}
]
And the console log above shows that it is correctly adding in the safelist patterns:
{
content: [ './app/**/*.php', './resources/**/*.{php,vue,js}' ],
theme: { extend: { colors: [Object] } },
plugins: [],
safelist: [
{ pattern: /bg-(blue)-(50|100|200|300|900)/ },
{ pattern: /bg-(claret)-(50|100|200|300|900)/ },
{ pattern: /bg-(tahiti)-(50|100|200|300|900)/ }
]
}
The Result: While the console log shows the added safelist options, only the safelist item hardcoded from the tailwind config is being applied on the front end.
Any help on telling me how im doing this wrong is appreciated!