Tailwind css not rendering in 404 error Phoenix templates

Phoenix Forum Questions / Help
,
1

I have set up a phoenix project with TailwindCSS after following this guide from the Tailwind folks: Install Tailwind CSS with Phoenix - Tailwind CSS

When using TailwindCSS in regular templates that get called from my PageController the UI renders properly. However I am trying to use a template in templates/error/404.html.heex, I find that none of the css renders, and I essentially get a plaintext HTML page. Is there a way to get tailwind picked up in the error templates?

page-controller
page-controller2436×1506 54.5 KB

Template rendered from PageController renders TailwindCSS

error-template
error-template2436×1506 60.7 KB

Error template rendered by Phoenix without TailwindCSS (I edited the dev.exs config to debug_errors: false so that the page could render instead of a Phoenix error message)

2

hi @Raees678, refer to this thread: How to add layout to 404 page in phoenix? - #6 by c4710n, or you can start reading here.

2 Likes
3

Thanks @soyjeansoy. That worked for me. Although I’m still not sure why tailwindcss only works when a root layout is specified?

4

It is worth noting that we did not render our 404.html.heex template through our application layout, even though we want our error page to have the look and feel of the rest of our site. This is to avoid circular errors. For example, what happens if our application failed due to an error in the layout? Attempting to render the layout again will just trigger another error. So ideally we want to minimize the amount of dependencies and logic in our error templates, sharing only what is necessary.

source: that paragraph is above Custom Exceptions section

1 Like