While rendering the progress bar, we set the width property of it to percentage value. We cannot do it via inline style because of the security policy. We need to set it via tailwind class. However, since the value is dynamic and tailwind class is not known at the compile time, thus not added to the generated css. To solve this, we add certain colors and width percentages to the safelist.
21 lines
375 B
JavaScript
21 lines
375 B
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
"./views/**/*.erb",
|
|
"./assets/**/*.js",
|
|
],
|
|
theme: {
|
|
extend: {},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
safelist: [
|
|
...[...Array(101).keys()].flatMap(i => `w-[${i}%]`),
|
|
{
|
|
pattern: /bg-[a-z]+-500/,
|
|
}
|
|
]
|
|
}
|