// tailwind.config.js
module.exports = {
purge: {
// Configure as you need
content: ['./src/**/*.html'],
// These options are passed through directly to PurgeCSS
options: {
// List your classes here, or you can even use RegExp
safelist: ['bg-red-500', 'px-4', /^text-/],
blocklist: [/^debug-/],
keyframes: true,
fontFace: true,
},
},
// ...
}
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
safelist: [
'bg-custom-color-500', // your-custom-css-class
'text-custom-color-500',
'border-custom-color-500',
..... // other classes
'hover:bg-custom-color-500', // *** also include it with the selector if needed ***
.... // other classes
],
theme: {
extend: {
colors: {
'custom-color': { // you have to use quotes if key is not in camelCase format
100: '#d6d6d6',
500: '#5E8EA2',
..... //other variants
},
...... // other colors
因此,您可以使用它:
// if you want store the values to an object
const yourClassObj = {
customBgColor: 'bg-custom-color-500',
customBrdColor: 'border-custom-color-500',
customTxtColor: 'text-custom-color-500',
};
const { customBgColor, customBrdColor, customTxtColor } = yourClassObj;
<YourComponent
className={`mb-2 font-semibold py-2 px-4 rounded-lg
${ conditionGoesHere ? `${customBgColor} text-white cursor-default`
: `${customTxtColor} border ${customBrdColor}
bg-transparent hover:border-transparent
hover:${customBgColor} hover:text-white`
}`}
/>
4条答案
按热度按时间z6psavjg1#
要在JIT tailwind中使用动态类,您需要使用
safelist
配置键或创建存根文件,在其中列出您将使用的所有动态类。配置示例:
或者在
src
文件夹中创建safelist.txt
,然后像这样添加类:别忘了把这个
safelist.txt
文件包含到你的配置content
中,这样tailwind就可以看到它了。来自顺风文档的解释
如果您不使用JIT,则可以使用
safelist
选项来清除CSS:jm81lzqq2#
从the Tailwindcss documentation开始
动态值注意,当使用任意值时,您仍然需要编写可清除的HTML,并且您的类需要作为完整的字符串存在,以便Tailwind正确地检测它们。
不要使用字符串连接来创建类名--〉
<div className={
mt-[${size ==='lg'?'22px':'17像素'}]}></div>
动态地选择一个完整的类名--〉
<div className={ size === 'lg' ? 'mt-[22px]' : 'mt-[17px]' }></div>
Tailwind不包含任何类型的客户端运行时,因此类名需要在构建时静态地提取,并且不能依赖于任何类型的在客户端上更改的任意动态值。在这些情况下使用内联样式,或者如果对您的项目有意义,将Tailwind与CSS-in-JS库(如Emotion)结合使用。rdlzhqv93#
一个简单的解决方案是使用内置的样式属性。
例如,在React中:
不要用途:
改为使用:
mrzz3bfm4#
如上所述为了动态地呈现一个定制类:
不喜欢:
它期望:
要使其正常工作,您必须在
tailwind.config.js
中包含safelist:[]
中的类名。对于tailwind v.3因此,您可以使用它: