Search code examples
cssreactjsuser-interfacetailwind-css

Tailwind CSS breaking existing styles

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) enter image description here

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

  • 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!