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

Phoenix Forum Questions / Help
1

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.

Thank you!

3 Likes
2

Phoenix will soon have a new generator flag: --no-tailwind

3 Likes
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!

14 Likes
4

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.

9 Likes
5

I’m really only chiming in to say that for the longest time I was afraid that I might be the only one having this major gripe.

When I started discovering Phoenix (back in the 1.4 days I think it was) and especially after LiveView, I was sure I had found my most loved framework of all time. Now they’ve jumped the Tailwind bandwagon and make it extremely hard/painful for us who actually remember the horrid days of inline styling, to opt out of if. I won’t share my rant-like opinion on Tailwind here, and really whatever floats anyone’s boat, but please put it behind a flag.

2 Likes
6

One more critical step!

Restore to assets/js/app.js the line:

import "../css/app.css"

or equivalent.

This is needed for esbuild to automatically bundle the CSS and write it to the same directory as your app.js (as documented in deps/esbuild/README.md).

At least for our project, after following the upgrade steps, that line had been removed, and although we did not need it for actually using the CSS we needed it for esbuild to do its work.

As for core_components being polluted with tailwind classes, i agree, but we are informed if we want to change the classes in core_components we need to override each one.

1 Like