TailwindCSS classes don't seem to work on a brand-new 'mix phx.new' project, Phoenix v1.6.13

I created a new Phoenix project with mix phx.new (Phoenix v1.6.13).

When I modify some of the CSS classes on the /templates/page.index.html.heex file, for example:

  <p>Peace of mind from prototype to production</p>

Changed to:

<p class="block w-full bg-red-500">Peace of mind from prototype to production</p>

I would expect the text to change on screen. But it doesn’t. A hard-refresh doesn’t work either.
No errors in the console (apart from a warning about changing mix.exs config for :gettext).

Should this work out of the box? Or do I need to do some extra tweaking somewhere to get tailwind to do its thing?

1 Like

Welcome. Phoenix does not include tailwindCSS; You are free to choose whatever CSS solution you like. Just curious, how did you get the impression that Phoenix and TailwindCSS are somehow related? There is no mentioning of Tailwind from the official Phoenix documentation.

1 Like

Phoenix 1.7 will have tailwind generators (Add new component based generators with tailwind by chrismccord · Pull Request #4955 · phoenixframework/phoenix · GitHub)

But for 1.6 you need to install it. There’s a guide in the tailwind docs or here: GitHub - phoenixframework/tailwind: An installer for tailwind


No wonder I couldn’t find the Tailwind instructions in Phoenix.
We use tailwind on some production projects, I think I just assumed tailwind was built-in, because I always use it on the production project. Didn’t realize there was custom configuration to get tailwind working.

So, naive assumption on my part!

Thanks tcoopman, makes sense. :+1: