Tailwind does not apply CSS in Phoenix app

Hey there!

I have a bizarre issue with Tailwind on Phoenix.

This is HTML I’m struggling with Tailwind Play
The idea is to have some stacked cards that represent months. Everything looks good there, however, if I have exactly the same HTML layout with exactly the same CSS classes applied inside an empty Phoenix app, some classes are simply not applied.

Here is how devtools look like in play.tailwindcss.com

As you can see there -translate-x-8 class applied and it’s reflected in the devtools.

This is how exactly the same HTML looks like when it’s generated from Phoenix

As you can see, divs are not shifted and despite the fact that divs have -translate-x-{} classes applied, actually there is no CSS added to them. Some translate classes are actually applied, like -translate-x-16, but some are not.

I’ve added Tailwind according to the official guide. The Phoenix app is a pristine app with no changes whatsoever. How can it be explained?

Thank you a lot for your time, folks!


What’s the contents of your tailwindcss.config file? Make sure you have properly configured where TailwindCSS will search for classes in your project using the content key:

content: [

Anything outside of these files will not get generated: Content Configuration - Tailwind CSS

1 Like

Ok, I think I figured it out. Since my classes are generated ad-hoc, I have to tell tailwind to generate them upfront using Safelist option Content Configuration - Tailwind CSS
If I put all translate-x-4/8/12/16 classes there, everything seems to be working fine.