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

Posted 2023-02-22

【中文标题】将 Tailwind.css 添加到 Vue.js 项目后，某些类没有效果

【英文标题】：Some classes have no effect after adding Tailwind.css to a Vue.js project

【发布时间】：2020-08-06 20:04:54

【问题描述】：

我正在尝试将 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，并将以下内容添加到该文件中：

module.exports = 插件：[require("tailwindcss"), require("autoprefixer")], ;

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

module.exports = 主题： 颜色： "awesome-color": "#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 logo 现在在页面中左对齐了。

非常感谢您的帮助！

【参考方案1】：

如果你想保留原始内容，那么你应该把它放在“扩展”里面。

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

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

【讨论】：

这很奇怪，我几个月前就试过了。不工作。回来我的项目并覆盖了我所有的高度属性。使用了扩展，一切都再次修复了。

【参考方案2】：

在发布问题后，我从 Tailwind.css 的维护者那里得到了答案。我实际上在tailwind.config.js 中放错了colors 对象，导致它用我的覆盖所有现有颜色，因此实际上删除了所有现有颜色。这是在不删除所有原始颜色的情况下添加/覆盖颜色的正确方法：

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

【参考方案3】：

同样的事情发生在我身上，我花了几个小时试图了解为什么我的自定义样式不起作用，您的错误可能在 postcss.config.js，请确保在导入 tailwind.config.js 时您调用正确，我离开几个例子：

// postcss.confing.js
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = 
  plugins: [
    tailwindcss("./tailwind.config.js"), // name your custom tailwind
    ...
  ],
;

// postcss.confing.js
module.exports = 
  "plugins": [
    require('tailwindcss')('tailwind.config.js'), // name your custom tailwind
    require('autoprefixer')(),
  ]

在这两种情况下，它都为我解决了问题，希望对您有所帮助。

【参考方案4】：

你必须用 vue-tailwind 安装 tailwindcss。

运行npm install tailwindcss。

更多信息，你可以去这里https://tailwindcss.com/docs/guides/vite