有些类在添加顺风后没有效果。css到Vue。js项目

Question

我试图增加顺风。css到Vue。js项目。关于如何做到这一点，有很多资源，其中大多数都遵循与本视频相同的路径。为了确保我的状态与视频中的状态相同，我从头开始创建了一个Vue应用程序，使用带有默认预设的Vue cli。在这一步之后，我做了以下工作：

• npm安装顺风。css

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

• 调用npx tailwind init创建tailwind。配置。js项目根目录下的文件
• 创建 ，并将以下内容添加到此文件：

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

• 向顺风添加自定义颜色。配置。js文件：

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

• 添加一个简单的

最后，这里有一个问题：我可以应用一些类，如bg-arwy-Color或text-xl并让它们正确渲染，但很多其他类不会工作。

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

我不知道这是否有关系，但我也注意到在添加了顺风之后。在css中，Vue徽标以前在原始的Vue cli模板中居中，现在在页面中左对齐。

非常感谢您的任何帮助！




Answer 1

同样的事情也发生在我身上，我花了几个小时试图理解为什么我的自定义样式不起作用，你的错误可能在postsss中。配置。js，请确保导入顺风时。配置。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')(),
  ]
}

在这两种情况下，它都为我解决了问题，我希望它能帮助你。

Answer 2

我从顺风的维护者那里得到了答案。发布问题后的css。实际上我把颜色对象放错了顺风。配置。js，使其用我的颜色覆盖所有现有颜色，从而实际删除所有现有颜色。以下是在不删除所有原始颜色的情况下添加/覆盖颜色的正确方法：

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

Answer 3

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

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

更多信息请访问：https://tailwindcss.com/docs/configuration/