Integrate with Existing CSS
One problem you might have if you’re using Tailwind in conjunction with a lot of existing CSS is name conflict. Your existing CSS might already define hidden, flex-grow, or (admittedly less likely) mx-64. Tailwind gives you a way to prevent this problem by offering you the ability to put a common prefix in front of all Tailwind utilities: prefix: "<SOMETHING>". If you declare prefix: "twind", then all the Tailwind utilities are transformed, so you end up with twind-hidden, twind-flex-grow, and even twind-mx-64. If you have a modifier, it attaches normally, as in hover:twind-text-black.
A different problem is that your existing CSS may be set up in such a way that all the existing CSS selectors have high specificity ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access