Is there a command that Phoenix can be generated with that removes tailwind and only uses the most vanilla CSS?
I would like to be able to have a straight vanilla CSS setup. so that when I go to assets/css/app.css I can apply css to any element, including the body tag with no problems. FYI I am working in LiveView.
As it stands when I try to use assets/css/app.css I can’t seem to apply styles.
When I go to the statis/assets/app.css file it works as expected but I assume those will be overwritten during copile/server start up.
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!
Why are the core_components still being generated with tailwind classes when the --no-tailwind flag is used?
Look, I’m all for using what works for you but I feel like the framework should be a little more agnostic to what CSS “framework” someone might want to use.
The core_components should be generated with no CSS applied by default and should be as semantic as possible when it comes to HTML and what tags are used. The table component does not used attribute scope=“row” for example.
Personally, tailwind is a huge /fail/ and should not belong in the default generators. Put that stuff behind a flag.
