Tailwind 默认颜色类不起作用

Question

我正在使用Tailwind CSS Framework构建React应用程序。我已使用NPM按以下方式在我的 React 应用程序中安装 tailwind：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

然后我还按以下方式编辑了tailwind.config.js文件：

module.exports = {

  content: [
  "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

并按以下方式更新了我的index.css文件：

@tailwind base;
@tailwind components;
@tailwind utilities;

然后我尝试按以下方式使用 tailwind CSS 提供的默认颜色类：

<h1 className='text-white'>...</h1>

或者

<div className='bg-white'>
    ...
</div>

但是使用这个类并不会改变文本的颜色或div的背景。请告诉我如何解决这个问题？提前致谢。

对于您的信息，我可以通过按以下方式将自定义颜色类编写在tailwind.config.js中来使用它们：

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      'custom-base-red': '#ff2f23',
      'custom-light-red': '#fb4a40',
      'custom-white': '#fefcfb',
      'custom-dark-gray': '#5f5f6c',
      'custom-light-gray': '#f7f7f7',
      'custom-border-gray': '#eeeeee',
      'custom-footer-bg': '#1d2124',
    },
    fontFamily: {
      'poppins': ["'Poppins'", 'sans-serif'],
    },
    dropShadow: {
      'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
    },
    extend: {},
  },
  plugins: [],
}

Answer 1

Tailwind 的默认类不起作用，因为您在主题中设置的自定义类会覆盖它们。要添加自定义类，请将它们移动到扩展对象中。

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        'custom-base-red': '#ff2f23',
        'custom-light-red': '#fb4a40',
        'custom-white': '#fefcfb',
        'custom-dark-gray': '#5f5f6c',
        'custom-light-gray': '#f7f7f7',
        'custom-border-gray': '#eeeeee',
        'custom-footer-bg': '#1d2124',
      },
      fontFamily: {
        poppins: ["'Poppins'", 'sans-serif'],
      },
      dropShadow: {
        'custom-btn-shadow': '0px 5px 15px rgba(255, 47, 35, 0.4)',
      },
    },
  },
  plugins: [],
};