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

Question

I am trying to add Tailwind.css to a Vue.js project. There are a lot of resources on how to do this, most of them following the same path as this video . To make sure I was in the same conditions as in the video, I created a Vue app from scratch, using vue-cli with the default presets. After this step, I did the following:

• npm install tailwind.css
• create src/styles/tailwind.css
• adding the following to the css file:

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

• call npx tailwind init to create a tailwind.config.js file at the root of the project
• create postcss.config.js at the root of the project, and add the following to this file:

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

• add a custom color to the tailwind.config.js file:

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

• adding a simple <p> element to the HelloWorld.vue component generated by vue-cli
• trying to style it using Tailwind classes

Finally, here is the problem: I can apply some classes like bg-awesome-color or text-xl and have them render properly, but a lot other classes won't work.

For instance, removing those classes and trying instead bg-black , bg-orange-500 , or text-orange-500 has strictly no effect. Did I do something wrong? Would that be a problem of compatibility between Vue.js and Tailwind.css?

I do not know if this is related, but I also noticed that after adding Tailwind.css, the Vue logo that used to be centered in the original vue-cli template was now aligned left in the page.

Thank you very much for any help!

Answer 1

If You want to keep original content, then you should put this inside "extend".

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

Read more at: https://tailwindcss.com/docs/configuration/

Answer 2

I got the answer from a maintainer of Tailwind.css after posting an issue. I actually misplaced the colors object in tailwind.config.js , causing it to override all existing colors with mine, thus actually removing all the existing ones. Here is the correct way to add / override a color without removing all the original ones:

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

Answer 3

The same thing happened to me, and I spent hours trying to understand why my custom styles weren't working, your error may be in the postcss.config.js , make sure when importing tailwind.config.js you are calling correctly, I leave a couple of examples:

// 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')(),
  ]
}

In both cases it solved the problem for me, I hope it will help you.

Answer 4

You have to install tailwindcss with vue-tailwind .

Run npm install tailwindcss .

For more information, you can go here https://tailwindcss.com/docs/guides/vite