I’ve already started building the page out using tailwind styling, but the client wants to include some of their own integrations on the page using bootstrap 5 imported by the linked stylesheet and bundle:
The tailwind styling I had in place on the rest of the page was getting overridden after adding bootstrap, so I added important: true to module.exports in the tailwind.config.cjs file in order to prioritize tailwind. This works perfectly fine when serving locally using npm run dev but doesn’t work when I use npm run build:serve or push to staging.
It might be because of CSS Specificity process executing on live according to which If HTML elements are targeted by multiple CSS selectors of the same specificity, the last one will override the others and only its style properties will apply.
Just to confirm, has it been considered and checked already?
Yep, I noticed that bootstrap has built-in styling for element selectors (<a>, <ul>, headings, etc.) so I had to go back and add specific tailwind styling classes for each of those elements to override the base bootstrap styling. The issue I’m having now is that some of the tailwind breakpoint classes aren’t working as expected.
For example I have this element: <div className="flex flex-col border-b border-brand-lightgray2 pb-4 md:border-none md:pb-0">
It would be expected that on screen sizes wider than 768px (the built-in md: tailwind breakpoint) the padding-bottom would be 0px but it remains 24px:
Hi @Rohit_Chhatre1
Thank you for sharing further details here. It helps to understand current stage you are right now. It is still looks more about specificity algorithm that calculates the weight of a [CSS selector] to determine which rule from competing CSS declarations gets applied to an element.
Since CSS overridden can be caused by a number of reason including the way it has been implied/used like Class, ID, and Type, a few cases can be checked to apply the needed solution accordingly via Specificity - CSS: Cascading Style Sheets | MDN.
