How to remove tailwind from Phoenix completely ? (I only want vanilla CSS)

Phoenix Forum Questions / Help
3

Just in case someone stumbles upon this page like I did: if you have already generated a Phoenix application, and only later decided that you want to get rid of Tailwind, then you should do the following:

  • remove :tailwind from mix.exs
  • remove commands like tailwind.install, tailwind default from aliases in mix.exs (make sure to preserve esbuild-related commands, if you still plan to use that!)
  • remove @import "tailwindcss/... from app.css
  • delete file /assets/tailwind.config.js
  • remove block starting with config :tailwind from config.exs
  • remove tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]} from watchers inside dev.exs
  • run mix deps.clean --unlock --unused

Boom! Your app has been de-tailwindizied! Now all that remains is to remove god awful Tailwind classes in core_components.exs and fix layouts, but that is on you!

21 Likes