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

Question

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

我在 Tailwind 上观看了 YouTube 视频，但那家伙正在常规HTML/CSS项目中使用它。public/styles.css他通过运行在 a 中输出文件tailwindcss build styles/globals.css -o public/styles.css，但我styles/globals.css按照文档在 Next.js 中使用。

我的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: [],
};

Answer 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"
            }
        }
    },
    //...
};