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

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!