How to isolate tailwind? #10751
Replies: 3 comments 1 reply
-
Hi! To avoid the naming conflicts use the prefix option in your tailwind.config.js file
So now you can use the prefix tw- before the class name of tailwind-css which wont break any of your existing styles. Note
Hope this answer helps! |
Beta Was this translation helpful? Give feedback.
-
Hi @andrepichardo and thank you for the suggestion. we have tried that, but it seems like the tailwind is not properly working without the preflight and/or base. And the css reset is breaking bootstrap. Therefore it seems like this approach is not enough. In general, is it even possible to nest tailwind like I am trying above? |
Beta Was this translation helpful? Give feedback.
-
Try this module.exports = { |
Beta Was this translation helpful? Give feedback.
-
We are currently in the process of gradually migrating a large Reactstrap/Bootstrap-based application to Tailwind. We have tried several approaches, but have encountered issues each time. Either Tailwind breaks the old Bootstrap components, or Bootstrap breaks the new Tailwind components.
The next idea was to isolate Tailwind into a class, so that all components within this class would use Tailwind exclusively. I found a solution here, but am having trouble making it work.
Do you have any tips on how to set up PostCSS to make the tailwind directives apply only within a class like so?
Beta Was this translation helpful? Give feedback.
All reactions