Tailwind css hover 没有更改我网站中的文本颜色

Question

我是顺风 CSS 世界的新手。 我尝试在顺风 CSS 中更改 hover 上的颜色。 我使用hover:text-red-800 。 我尝试了两种方法。 但是 hover 颜色没有改变。

第一种方式

 <a href="#">
    <h1 class="mt-2 text-black sm:text-2xl xl:text-2xl hover:text-red-800">Why javascript is so famous right now? 5</h1>
 </a>

第二种方式

 <a class="hover:text-red-800" href="#">
     <h1 class="mt-2 text-black sm:text-2xl xl:text-2xl hover:text-red-800">Why javascript is so famous right now? 5</h1>
 </a>

在这两种方式中，hover 颜色都不会改变。 请告诉我我在做什么。 我的tailwind.config.js文件。

 module.exports = {
  purge: ["./public/**/*.html"],
  theme: {
    extend: {},
    colors: {}
  },
  variants: {},
  plugins: []
  };

我的postcss.config.js文件看起来像

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [require("cssnano")] : []),
  ],
};

Answer 1

您可以尝试像这样使用postcss.config.js ：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

和tailwind.config.js像这样：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

并且也尝试使用最新版本的tailwindcss

按照此链接正确配置tailwindcss ！