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

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!

chojnicki · Accepted Answer · 2020-04-23 16:03:11Z

6

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/

answered Apr 23, 2020 at 16:03

chojnicki

3,6821 gold badge26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adam Patterson Over a year ago

It's odd, I tried this months ago. Did not work. Came back my project and had overwritten all of my height properties. used the extend and everything was fixed again.

paupaulaz · Accepted Answer · 2020-04-23 16:02:06Z

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

answered Apr 23, 2020 at 16:02

paupaulaz

9961 gold badge12 silver badges20 bronze badges

Comments

Paulo Tijero · Accepted Answer · 2020-10-20 04:12:16Z

0

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.

edited Oct 20, 2020 at 4:12

answered Oct 20, 2020 at 4:01

Paulo Tijero

594 bronze badges

Comments

ouflak · Accepted Answer · 2022-01-17 19:41:39Z

-3

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

edited Jan 17, 2022 at 19:41

ouflak

2,56310 gold badges46 silver badges53 bronze badges

answered Jan 17, 2022 at 10:39

has1234513

591 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related