Tailwind does not apply CSS in Phoenix app

Phoenix Forum Questions / Help
,
1

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

Screen Shot 2022-09-08 at 18.19.34
Screen Shot 2022-09-08 at 18.19.341200×680 69.2 KB

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

Screen Shot 2022-09-08 at 18.20.24
Screen Shot 2022-09-08 at 18.20.241200×880 40.8 KB

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!

2 Likes
2

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: [
    "./js/**/*.js",
    "./css/**/*.*css",
    "../lib/*_web/**/*.*ex",
  ],

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

1 Like
3

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.