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,
  }
}

What were you working on ? Bootstrap ? or plain css ? or any other before using tailwind css — krishnaacharyaa, Jun 17 '22 at 05:42
I've got Bootstrap, but does it matter? I was wondering why Tailwind is changing my buttons to transparent — Aximili, Jun 17 '22 at 06:17

score 8 · Accepted Answer · edited Sep 20 '22 at 02:16

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!

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. — Aximili, Jun 18 '22 at 00:41
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. — krishnaacharyaa, Jun 18 '22 at 09:38

score 1 · Answer 2 · answered Jun 17 '22 at 09:39

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.

Tailwind CSS breaking existing styles

2 Answers2