Vue.js项目中添加Tailwind.css后，某些类没有效果

Question

我正在尝试将 Tailwind.css 添加到 Vue.js 项目中。有很多关于如何执行此操作的资源，其中大多数都遵循与此视频相同的路径。为了确保我处于与视频中相同的条件，我使用vue-cli默认预设从头开始创建了一个 Vue 应用程序。在此步骤之后，我执行了以下操作：

• npm install tailwind.css
• 创造src/styles/tailwind.css
• 将以下内容添加到 css 文件中：

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

• 调用在项目根目录npx tailwind init创建文件tailwind.config.js
• postcss.config.js在项目的根目录下创建，并将以下内容添加到该文件中：

module.exports = {
  plugins: [require("tailwindcss"), require("autoprefixer")],
};

• 将自定义颜色添加到tailwind.config.js文件中：

module.exports = {   
  theme: {
    colors: {
      "awesome-color": "#56b890",
    },
    extend: {},
  },   
  variants: {},   
  plugins: [], 
};

• 将一个简单<p>元素添加到HelloWorld.vue生成的组件中vue-cli
• 尝试使用Tailwind类来设计它的样式

最后，问题是：我可以应用一些类，例如bg-awesome-colorortext-xl并让它们正确渲染，但许多其他类将无法工作。

例如，删除这些类并尝试改为bg-black, bg-orange-500, ortext-orange-500完全没有效果。我做错什么了吗？这会是 Vue.js 和 Tailwind.css 之间的兼容性问题吗？

我不知道这是否相关，但我还注意到，添加 Tailwind.css 后，原来模板中居中的 Vue 徽标vue-cli现在在页面中向左对齐。

非常感谢您的帮助！

Answer 1

如果您想保留原始内容，那么您应该将其放在“extend”中。

module.exports = { 
  theme: { 
    extend: {
      colors: { 
        "awesome-color": "#56b890", 
      }, 
    }
  }, 
  variants: {}, 
  plugins: [], 
};

了解更多信息： https: //tailwindcss.com/docs/configuration/