如何在nextjs中编辑我的tailwindcss.config.ts文件

Question

我的tailwindcss.config.ts文件如下所示。在 admin 文件夹的仪表板中检测到 tailwindcss 颜色，但登录时在 admin 文件夹中未检测到该颜色。当我将 tailwindcss.config.ts 文件作为项目安装的开始时，我的问题就解决了。如何修复我的 tailwindcss.config.ts 文件？

tailwindcss.config.ts

import { createThemes } from "tw-colors";
import colors from "tailwindcss/colors";

const baseColors = [
  "gray",
  "red",
  "yellow",
  "green",
  "blue",
  "indigo",
  "purple",
  "pink",
];

const shadeMapping = {
  "50": "900",
  "100": "800",
  "200": "700",
  "300": "600",
  "400": "500",
  "500": "400",
  "600": "300",
  "700": "200",
  "800": "100",
  "900": "50",
};

const generateThemeObject = (colors: any, mapping: any, invert = false) => {
  const theme: any = {};
  baseColors.forEach((color) => {
    theme[color] = {};
    Object.entries(mapping).forEach(([key, value]: any) => {
      const shadeKey = invert ? value : key;
      theme[color][key] = colors[color][shadeKey];
    });
  });
  return theme;
};

const lightTheme = generateThemeObject(colors, shadeMapping);
const darkTheme = generateThemeObject(colors, shadeMapping, true);

const themes = {
  light: {
    ...lightTheme,
    white: "#ffffff",
  },
  dark: {
    ...darkTheme,
    white: colors.gray["950"],
    black: colors.gray["50"],
  },
};

const config: Config = {
 
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
   
  ],
  theme: {
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
        "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
    },
  },
  darkMode:[ "class"],
  mode: 'jit',
  plugins: [createThemes(themes)],
};

export default config;

Answer 1

我不想在配置中进行这么多计算：

• 配置将在构建时评估，但暗/亮模式将在运行时评估
• 您基本上是在说“在黑暗模式下，黑色是白色，白色是黑色”，因此您的组件代码将会令人困惑
• TW 将淘汰未使用的定义，除非您明确包含它们

有几种方法可以解决这个问题，而无需在配置中增加这种复杂性：

1. 在组件中需要时使用

   dark

   修饰符，例如

   className="bg-grey-50 dark:bg-grey-900"

   对于一次性情况很有用。

2. 定义响应您在应用程序顶部显式导入的基本 CSS 层中的媒体查询的 CSS 变量，并在 TW 配置中引用这些变量。这有点复杂：

• 在你的CSS中：例如

:root {
  --color-primary: theme(colors.grey.50);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: theme(colors.grey.900);
  }
}

然后在你的配置中：

... // start of config
colors: {
  primary: 'var(--color-primary)'
}
... // end of config

那么您在组件中使用颜色就很简单，而且渲染时的预期效果也很明显：

className="bg-primary"

让主题查找主题中引用的 CSS 变量，该变量是 MQ 感知的并在渲染时计算。

检查 TW 文档以将适当的指令添加到 CSS 文件 - https://tailwindcss.com/docs/adding-custom-styles#adding-base-styles