将Tailwind.css添加到Vue.js项目后，某些类不起作用 [英] Some classes have no effect after adding Tailwind.css to a Vue.js project

问题描述

我正在尝试将Tailwind.css添加到Vue.js项目中。有很多关于如何做到这一点的资源，其中大多数遵循与this video相同的路径。为了确保我与视频中的情况相同，我从头开始创建了一个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，并将以下内容添加到该文件中：

模块.exports={ 插件：[Required("tavidcss")，Required("autoprefix")]， }；

• 向tailwind.config.js文件添加自定义颜色：

模块.exports={主题：{ 颜色：{ "色彩超赞"："#56b890"， }, 扩展：{}，}，变量：{}，插件：[]，}；

• 向vue-cli生成的HelloWorld.vue组件添加一个简单的<p>元素
• 正在尝试使用tailwind类设置样式

最后，问题来了：我可以应用一些类，如bg-awesome-color或text-xl，并让它们正确呈现，但许多其他类不能工作。

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

我不知道这是否相关，我还注意到，添加Tailwind.css后，以前位于原始vue-cli模板中央的Vue徽标现在在页面中左对齐。

非常感谢您的帮助！

推荐答案

如果要保留原始内容，则应将此内容放入"扩展"中。

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

阅读更多信息：https://tailwindcss.com/docs/configuration/

这篇关于将Tailwind.css添加到Vue.js项目后，某些类不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！