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

【问题标题】：Some classes have no effect after adding Tailwind.css to a Vue.js project将 Tailwind.css 添加到 Vue.js 项目后，某些类没有效果
【发布时间】：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 现在在页面中左对齐了。

非常感谢您的帮助！

【问题讨论】：

标签： css vue.js vue-cli tailwind-css

【解决方案1】：

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

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

【讨论】：

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

【解决方案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

【讨论】：