Tailwind 默认颜色类不起作用答案

【问题标题】：Tailwind default color classes not workingTailwind 默认颜色类不起作用
【发布时间】：2022-12-11 12:15:11
【问题描述】：

我正在建造一个反应应用程序使用顺风 CSS 框架.我用过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: [],
}

并更新了我的索引.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: [],
}

【问题讨论】：

你的反应文件实际上在 src 文件夹中吗？
是的，我的反应文件在 src 文件夹中。
您对以下答案的回复说您的“自定义颜色类工作正常”。你如何添加自定义类？如果您要将它们添加到您的tailwind.config.js，您可以显示添加了这些内容的文件吗？
感谢您的评论。我已经用我的tailwind.config.js 文件更新了这个问题。请检查一下。谢谢你。 @EdLucas

标签： javascript reactjs npm npm-install tailwind-css

【解决方案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: [],
};

【讨论】：

它的工作！太感谢了。那确实是我犯的一个愚蠢的错误。 :) @Aaditey Nair
很高兴为您服务

【解决方案2】：

检查是否有导入'./index.css'在 index.js 文件中。

另外，请确保您正在编辑应用程序.js文件

【讨论】：

谢谢你的回答。是的，我检查过，index.js 文件中有 import './index.css'。但我不明白你回答的第二部分。我应该提一下，其他班级工作正常。只是面临默认颜色类的问题。但是自定义颜色类工作正常。
正如目前所写，您的答案尚不清楚。请edit 添加更多详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写出好的答案的信息in the help center。

【解决方案3】：

这个问题也发生在我身上。

我应用了上述解决方案，它们运行良好。谢谢。

如果您编写的 tailwind 没有框架，请不要忘记运行此命令（基于此 document：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

这在使用 text-[color] 时也有效

【讨论】：