在 Next.js 项目中的 Tailwind 中配置颜色会破坏所有颜色

Posted 2023-03-07

【中文标题】在 Next.js 项目中的 Tailwind 中配置颜色会破坏所有颜色

【英文标题】：Configuring colors in Tailwind in Next.js project broke all colors

【发布时间】：2021-10-12 14:14:10

【问题描述】：

我是第一次使用 TailwindCSS，而且是在 Next.js 项目中。我关注了他们关于“如何在 Nextjs 中使用顺风”的文档，并尝试在 tailwind.config.js 中添加颜色，但最终破坏了所有颜色。其他样式也可以。

我在 Tailwind 上观看了一个 YouTube 视频，但该人在常规 html/CSS 项目中使用它。他通过运行tailwindcss build styles/globals.css -o public/styles.css 以public/styles.css 输出文件，但我按照文档在Next.js 中使用styles/globals.css。

我的tailwind.config.js 文件：

module.exports = 
  purge: ["./pages/**/*.js,ts,jsx,tsx", "./components/**/*.js,ts,jsx,tsx"],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: ,
    colors: 
     //ADDED THIS
      white: 
        0: "#fff",
      ,
    ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],
;

【参考方案1】：

使用theme.colors 添加新颜色将完全覆盖默认的 Tailwind 调色板。

您要么明确定义要在theme.colors 中使用的所有颜色。

const colors = require('tailwindcss/colors')

module.exports = 
    //...
    theme: 
        colors: 
            black: colors.black,
            // Define all desired colors
            white: "#fff"
        
    ,
    //...
;

或者，如果您仍想访问所有默认颜色并且只需要扩展它们，请改用theme.extend.colors。

module.exports = 
    //...
    theme: 
        extend: 
            colors: 
                white: "#fff"
            
        
    ,
    //...
;