Tailwind 默认颜色类无效

Question

我正在使用 Tailwind CSS Framework 构建一个 React 应用程序。我已经使用 NPM 通过以下方式在我的 React 应用程序中安装顺风：

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 以下列方式提供的默认颜色 classes：

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

或

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

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

为了您的好意，我可以使用 自定义颜色 classes，方法是将它们写在 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

查看index.js文件中是否有import './index.css'.

此外，请确保您正在编辑 App.js 文件

Answer 2

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

Tailwind 默认颜色类无效

Tailwind default color classes not working

javascript

reactjs

npm

npm-install

tailwind-css

Tailwind 默认颜色 类 无效

Tailwind default color classes not working

javascript

reactjs

npm

npm-install

tailwind-css

Tailwind 默认颜色类无效