在Next.js项目中，Tailwind自定义颜色无法正常工作。

19 浏览
0 Comments

在Next.js项目中，Tailwind自定义颜色无法正常工作。

在tailwind.config.js中配置的自定义颜色无法工作，当我将其分配给一个变量并像下面的示例中使用时。

其中button.colour = "custom-blue"（颜色数据从cms获取，并可以在cms中设置）

但是下面的代码运行得很好。

tailwind.config.js文件：

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ]
  ,
  theme: {
    extend: {
      colors: {
        'custom-blue':'#4AD7D1',
       },
    },
  },
  plugins: [],
  important: true
}

如何解决这个问题？

0

2 答案

0 Comments

在Next.js项目中，Tailwind自定义颜色无法正常工作可能的原因是因为使用了Tailwind v3+的版本。解决方法是参考Tailwind的视频教程，该视频展示了如何使自定义颜色正常工作，以及为什么无法工作。

0
0 Comments

问题的出现原因是Tailwind在Next.js项目中无法使用自定义颜色，这是因为Tailwind不会运行源代码，无法检测动态构建的类名。而Tailwind的类清除工具（PurgeCSS）只会检查类是否在源代码中被引用，并保留它们。它不会包括像bg-${button.color}这样动态创建的类。

解决方法是使用一个变通的方法，具体步骤如下：

首先，创建一个包含自定义颜色和对应类名的映射对象，例如：

const backgroundClassMap = {
    "custom-blue": "bg-custom-blue",
};

然后，在需要使用颜色的地方，将对应的类名动态添加到元素上，例如：

<button class={`some other classes ${backgroundClassMap[button.color]}`}>

通过这种方法，类名bg-custom-blue会被正确地引用和使用，因此不会被从构建中排除掉。

0