Tailwind CSS breaking existing styles

Question

When I added Tailwind to my React project, it breaks existing styles.

I was hoping to just use Tailwind classes (like mb-3) for shortcuts.
I didn't expect it to overwrite existing styles, like changing button background to transparent.

Am I doing it wrong? Or does Tailwind overwrite styles on purpose?

EDIT:

This is what I'm talking about: (which comes from node_modules\tailwindcss\src\css\preflight.css)

The issue goes away when I exclude base, i.e:

//@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

EDIT 2:

Found the solution!

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Innards

What were you working on ? Bootstrap ? or plain css ? or any other before using tailwind css – Interregnum

I've got Bootstrap, but does it matter? I was wondering why Tailwind is changing my buttons to transparent – Innards

Answer 1

When you use both bootstrap and tailwind-css at the same time, you will face naming conflicts which will lead to undefined behavior ,

To avoid this, use the prefix option in your tailwind.config.js file

// tailwind.config.js
module.exports = {
  prefix: 'tw-',
}

So now you can use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles.

Note if you want tailwind classes to get more precedence than any other css styles , you can set the important option to true on tailwind.config.js

module.exports = {
  important: true,
}

To understand the css precedence follow this What is the order of precedence for CSS?

Extended answer:

Thanks to Aximili ,

Tailwind-Css implements Preflight by default in their projects which is an opinionated set of base styles.

And this is build on top of modern-normalize

And Tailwind automatically injects these styles in @tailwind base.

So to overcome this .Remove @tailwind base from the css file or Add preflight: false,

module.exports = {
   corePlugins: {
      preflight: false,
   }
}

Hope it helps!

Interregnum

Thanks Krishna! Unfortunately I am already using a lot of Tailwind classes everywhere. But excluding base might fix it (although I'm not sure if any side effect). See my EDIT on the question. – Innards

Thanks Aximili for letting me know the concept ! I made some changes in my answer giving you the credits in Extended answer section to complete the answer. – Interregnum

Answer 2

Add the following line to your tailwind.config.js

module.exports = {
  prefix: 'tw-',
}

An now you can use both bootstrap and tailwind but you will have to use tw- before tailwind classes such as tw-mb-2, tw-text-right etc.

while you still can use bootstrap normally. The classes won't conflict anymore.

I will not recommend using important in tailwind.config.css because you still might want to use the bootstrap at some location so the prefix is the best bet here.

Cochineal

Answer 3

I faced an issue with conflicting classes between Tailwind CSS and Bootstrap. I found a solution to resolve the conflicts.

Change to:

module.exports = {
  content: ["./src/**/*.{jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

I modified the content configuration. Previously, it was: content: ["./src/**/*.{js,jsx,ts,tsx}"]

By removing the .js extension, it works fine because I only use Bootstrap in JavaScript files. Where I use Tailwind, I changed the file extensions from .js to .jsx. This way, Tailwind only applies to my .jsx files, not to my .js files. This approach saved me a lot of time because I had already written a lot of code and was aware of the conflicts between Tailwind and Bootstrap classes.

Tuba