'Some classes have no effect after adding Tailwind.css to a Vue.js project

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!

cssvue.jsvue-clitailwind-css


Solution 1:[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/

Solution 2:[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: [],
};

Solution 3:[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.

Solution 4:[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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 chojnicki
Solution 2 paupaulaz
Solution 3
Solution 4 ouflak

Related Questions