Search code examples
csssasstailwind-css

remove specific style from tailwind base

I have a project with tailwind and a (work in progress) UI library that we want to gradually migrate to.

I am importing the style on my index.css like this

@tailwind base;
@tailwind components;
@tailwind utilities;


@import '@customPackage/ui-react/dist/style.css';

the problem is, tailwind base import some style that conflict with my customPackage styles :

enter image description here

.ak2yjgf is a style generated by the customPackage css, while button, [type='button'], [type='reset'], [type='submit'] is by tailwind.

I know it's possible to add custom styling useing @layers base for tailwind, but this do not override the base style, it just add more. I would like to know if there is a way to override or remove the base import for buttons only.

Solution

  • Disabling Tailwind preflight is the closest thing that can help

    module.exports = {
  corePlugins: {
    preflight: false,
  }
}

    Then add their preflight stylesheet and edit the section that's clashing with your styles.