'Override specific CSS selectors with Tailwind CSS
I added Tailwind CSS to our company project. It's a 5-6 years old codebase and it's already using bootstrap CSS + custom bootstrap theme.
My tailwind JS config file looks like this:
I have added a custom prefix in order to avoid class conflict and also applied !important to all of the tailwind classes.
And I need to override the specificity of those selectors. How could I achieve this using tailwind CSS?
Solution 1:[1]
Please dont't post images of code, just use the code tags available in the editor!
What you could do is overwrite those selectors manually in your tailwind css file which i guess is loaded AFTER the bootstrap file?
The order of css evaluation is key here.
If both pieces of CSS have the same specificity (for example, they're both body{), then whichever gets called LAST will override the previous one. BUT, if something has higher specificity (a more specific selector), it will be used regardless of the order.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Laisender |