damirca
Hey there!
I have a bizarre issue with Tailwind on Phoenix.
This is HTML I’m struggling with 429: An unexpected error has occurred
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!
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Error tracking, logs, APM, uptime and cron monitoring in one dev-friendly platform. Find and fix problems before your users notice.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
First 2 of 2 Posts
thiagomajesk
What’s the contents of your
tailwindcss.configfile? Make sure you have properly configured where TailwindCSS will search for classes in your project using thecontentkey:Anything outside of these files will not get generated: Detecting classes in source files - Core concepts - Tailwind CSS
damirca
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 Detecting classes in source files - Core concepts - Tailwind CSS
If I put all
translate-x-4/8/12/16classes there, everything seems to be working fine.