CODEWITHSUNDEEP
csssasstailwind-css
Crocsx
Crocsx

Reputation: 7589

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.

Upvotes: 23

Views: 22369

Answers (6)

maazakn
maazakn

Reputation: 404

This issue is resolved in tailwind v3.4.3

Upvotes: 2

LeulAria
LeulAria

Reputation: 605

one good option i found is to turn off tailwind preflight and use custom pre-flight then you can remove styles you don't want

module.exports = {
  ...
  corePlugins: {
    preflight: false,
  },
  plugins: [],
};

import the preflight manually from https://unpkg.com/[email protected]/src/css/preflight.css

then add in your css

@import preflight.css

then customize the preflight.css file.

Upvotes: 1

Crocsx
Crocsx

Reputation: 7589

A bit late on this but I ended debugging with the solution above and once found the issue, I used https://www.npmjs.com/package/patch-package to remove that problematic style from the package.

Is not ideal, but been working for 2 years now.

Upvotes: 0

felixreithmaier
felixreithmaier

Reputation: 19

You can replace your "@tailwind base" line with an import of your own tailwind base file. Looks like that:

@import "/src/preflight.css";
@tailwind components;
@tailwind utilities;

You can download Tailwinds base file from here: https://unpkg.com/[email protected]/src/css/preflight.css

You can make as many changes you want in your preflight.css file

Upvotes: 0

Ahad
Ahad

Reputation: 119

I solved this issue by adding all of default styles inside of a .scss file within a class for example called .ql-wrapper{} and when I need somewhere to show the details that I added from a form.

Upvotes: 1

Chris Claude
Chris Claude

Reputation: 1372

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.

Upvotes: 27

Related Questions