Question

我使用 next.js 文档中提供的 tailwind starter repo 创建了 next.js 应用程序，并且 tailwind 运行良好。然而，我最近遇到了一个问题，即某些顺风类停止工作，特别是与颜色相关的任何类。

我已经尝试再次运行 npm -i，但没有发生任何变化。

postcss.config

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors:{
      transparent:"transparent",
      current:"currentColor",
      primary:{
        superlight:"#FFFFFF",
        light:"#FFF8F0",
        DEFAULT:"#FFEBD1",
        dark:"#978F85"
      },
      secondary:{
        light:"#EFEFEF",
        DEFAULT:"#A0A0A0",
        dark:"#26221D"
      }
  },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

_app.js

import 'tailwindcss/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Answer 1

您需要extend主题，而不是覆盖它。

module.exports = {
  mode: "jit",
  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        transparent: "transparent",
        current: "currentColor",
        primary: {
          superlight: "#FFFFFF",
          light: "#FFF8F0",
          DEFAULT: "#FFEBD1",
          dark: "#978F85"
        },
        secondary: {
          light: "#EFEFEF",
          DEFAULT: "#A0A0A0",
          dark: "#26221D"
        }
      }
    }
  },
  variants: {
    extend: {}
  },
  plugins: []
};

另外，请记住，JIT 模式仍然不是完全没有错误。如果您再次遇到类似问题，请尝试重新启动服务器。

Tailwind CSS 未应用某些样式

1 个答案: