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

Question

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

• 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-color 或 text-xl 并让它们正常渲染，但很多其他类就不行了。

例如，删除这些类，然后尝试 bg-black, bg-orange-500或 text-orange-500 严格来说没有任何效果。我是不是做错了什么？是否是Vue.js和Tailwind.css的兼容性问题？

我不知道这是否有关系，我也注意到在添加了Tailwind.css之后，Vue的标志，在原来的Vue.js中是居中的。vue-cli 模板，现在在页面中向左对齐。

非常感谢你的帮助

Answer 1

如果你想保持原来的内容，那么你应该把这个里面的 "扩展"。

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

阅读更多内容。https:/tailwindcss.comdocsconfiguration

Answer 2

我在发了一个问题后，得到了尾风.css的维护者的回答。其实我是放错了位置。colors 对象 tailwind.config.js导致它用我的颜色覆盖了所有现有的颜色，从而实际上删除了所有现有的颜色。这里是正确的方法，添加覆盖一个颜色，而不删除所有原有的颜色。

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