CODEWITHSUNDEEP
cssangulartailwind-css
Newsha Nik
Newsha Nik

Reputation: 947

tailwindcss breaks some of my styles in my angular project

I just finished adding tailwindcss 2.0.4 to my angular 11.2.6 project.

The page's appearance was not the same after I had installed and added the necessary imports.

Like this button for example:

signin/signup button after adding tailwindcss

Which used to look like this before adding tailwindcss:

signin/signup button before adding tailwindcss

After using devtools, I noticed some styles have been applied to this button from a file named 'base.css', which is the stylesheet Tailwind adds to the project.

All of my button styles returned to the way they were when I removed all of the styles associated with a base.css file.

What is the correct way to handle this? Do I need to go and change the base.css file? Can I do that? Or is there a better way to handle overriding base.css styles?

Upvotes: 2

Views: 1568

Answers (1)

Dani Tulp
Dani Tulp

Reputation: 91

Tailwind resets some default browser styles to make them consistent across all browsers. A full list can be found here. To disable this behaviour you can add the following snippet to the tailwind-config.js.

// tailwind.config.js
  module.exports = {
    corePlugins: {
     preflight: false,
    }
  }

Upvotes: 5

Related Questions