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

【问题标题】：Configuring colors in Tailwind in Next.js project broke all colors在 Next.js 项目中的 Tailwind 中配置颜色会破坏所有颜色
【发布时间】：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: [],
};

【问题讨论】：

标签： next.js tailwind-css

【解决方案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"
            }
        }
    },
    //...
};

【讨论】：