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

Phoenix will soon have a new generator flag: --no-tailwind
https://github.com/phoenixframework/phoenix/blob/main/CHANGELOG.md#172-dev

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.

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.

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.

I started thinking about this after trying to remove Tailwind yesterday. I haven’t tried this yet, and it’s apparently the “wrong” way to use Tailwind, but it’s possible to create reusable classes with @apply. The page says:

If you start using @apply for everything, you are basically just writing CSS again…

…which is what some people want.

3 out of 4 of the disadvantages it lists aren’t really problems for people who don’t want to use Tailwind.

There’s also a Tailwind component library called daisyUI that looks like it might be based on that idea.

It isn’t a perfect solution, but I’m just trying to get the CSS out of the way as quickly as possible, and I don’t want to do things the Tailwind way because it’s slower and adds cognitive load.

Edit: I tried daisyUI with a Phoenix site. I’m not sure if this is useful to anyone, but if you add daisyUI and set styled to false, it will remove all of daisy’s design decisions and leave the site with the default reset-CSS Tailwind.

Then it looks like you can create your own CSS classes with raw CSS or @apply in the main CSS file. From this comment it sounds like using Tailwind’s @layer directive will automatically purge unused styles.

The end result is that I didn’t have to remove Tailwind, but it looks like I can use named classes and write normal CSS with it. I’m going to try using their components first, because it seems like a halfway point between Tailwind and something like Bootstrap.

I am really not that fond of Tailwind, unless I am building a very simple site.