next.js JIT tailwindcss在bg中使用变量-[]未呈现颜色

jpfvwuh4  于 2023-01-25  发布在  其他
关注(0)|答案(4)|浏览(186)

当我把我的颜色作为 prop 时
查看chrome开发工具时,颜色正确添加,如bg-[#84AB86]
虽然把颜色手动没有采取它从 prop ,它确实工作正确
经过更多的测试,似乎也不可能这样做

const color = "#84CC79"
className={`bg-[${color}]`}

知道为什么吗

z6psavjg

z6psavjg1#

要在JIT tailwind中使用动态类,您需要使用safelist配置键或创建存根文件,在其中列出您将使用的所有动态类。
配置示例:

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    'bg-red-500',
    'text-3xl',
    'lg:text-4xl',
  ]
  // ...
}

或者在src文件夹中创建safelist.txt,然后像这样添加类:

bg-[#84AB86]
bg-[#fffeee]

// etc..

别忘了把这个safelist.txt文件包含到你的配置content中,这样tailwind就可以看到它了。
来自顺风文档的解释
如果您不使用JIT,则可以使用safelist选项来清除CSS:

// 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,
    },
  },
  // ...
}
jm81lzqq

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)结合使用。

rdlzhqv9

rdlzhqv93#

一个简单的解决方案是使用内置的样式属性。
例如,在React中:

不要用途:

className={`bg-[${color}]`}

改为使用:

style={{
    backgroundColor: color,
}}
mrzz3bfm

mrzz3bfm4#

如上所述为了动态地呈现一个定制类:
不喜欢:

className={`bg-[${custom-color}]-100`}

它期望:

const customBgColorLight = 'bg-custom-color-100';

className={`${customBgColorLight} .....`}

要使其正常工作,您必须在tailwind.config.js中包含safelist:[]中的类名。对于tailwind v.3

/** @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`
              }`}
 />

相关问题