tailwindcss breaks some of my styles in my angular project

Question

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:

Which used to look like this 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?

Dani Tulp · Accepted Answer · 2021-04-02 08:47:24Z

5

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

answered Apr 2, 2021 at 8:47

Dani Tulp

911 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

O-9 Aug 21 at 14:24

tailwind.config.js not -

Collectives™ on Stack Overflow

tailwindcss breaks some of my styles in my angular project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related