Search code examples
phoenix-frameworktailwind-css

How do I add tailwindcss to my Phoenix project without breaking the existing styling?

Adding tailwindcss to my Phoenix project seems to have broken a lot of the styling. For example, here is a button before adding tailwindcss:

Before adding Tailwind

and here it is afterwards:

After adding Tailwind

What can I do to get the benefits of tailwind without breaking my existing styling?

Solution

  • The reason that the native Phoenix styles break is because Tailwind comes with Preflight, which is a bunch of default styles. Preflight can conflict with whatever native styling you might have. That's why it broke in my case. I was able to solve this problem by adding:

    corePlugins: { preflight: false, },

    To module.exports in tailwind.config.js. This disables Preflight and lets the native Phoenix styles stay. If you don't need Preflight this is a good choice.