html - Tailwind css悬停不改变我网站中的文本颜色

Question

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

第一种方式

 <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>

在这两种方式中，悬停颜色都不会改变。请告诉我我在做什么。我的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！