Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
After modifying the app by moving the code to a separate LiveView Component, as the tutorial suggests:
defmodule CounterComponent do use Phoenix.LiveComponent # Avoid duplicating Tailwind classes and show hot to inline a function call: defp btn(color) do "text-6xl pb-2 w-20 rounded-lg bg-#{color}-500 hover:bg-#{color}-600" end def render(assigns) do ~H""" <div class="text-center"> <h1 class="text-4xl font-bold text-center"> Counter: <%= @val %> </h1> <button phx-click="dec" class={btn("red")}> - </button> <button phx-click="inc" class={btn("green")}> + </button> </div> """ end end
This also avoids some duplication by defining the common css in a helper function.
Unfortunately, this has a consequence: colors stop being rendered:
Inspecting HTML, the classes are being applied.
However, it turns out, definitions of bg-green-500 etc. are missing from the app.css file. (Maybe it worked in older versions of Phoenix?)
bg-green-500
app.css
After investigation I found this thread: https://elixirforum.com/t/phoenix-tailwind-not-producing-correct-css/46624
with explanation that this is due to the classes being computed dynamically.
Apparently the framework is not smart enough to deduce that such class will appear, and does not include it in rendered app.css.
One way to fix this is by including a comment in the HTML template with the full class names spelled out:
def render(assigns) do ~H""" <div class="text-center"> <!-- bg-green-500 hover:bg-green-600 bg-red-500 hover:bg-red-600 --> <h1 class="text-4xl font-bold text-center"> Counter: <%= @val %> </h1> <button phx-click="dec" class={btn("red")}>-</button> <button phx-click="inc" class={btn("green")}>+</button> </div> """ end
Yeah. Stupid quirk with a stupid fix.
The text was updated successfully, but these errors were encountered:
After modifying the app by moving the code to a separate LiveView Component, as the tutorial suggests:
This also avoids some duplication by defining the common css in a helper function.
Unfortunately, this has a consequence: colors stop being rendered:
Inspecting HTML, the classes are being applied.
However, it turns out, definitions of
bg-green-500
etc. are missing from theapp.css
file.(Maybe it worked in older versions of Phoenix?)
After investigation I found this thread:
https://elixirforum.com/t/phoenix-tailwind-not-producing-correct-css/46624
with explanation that this is due to the classes being computed dynamically.
Apparently the framework is not smart enough to deduce that such class will appear, and does not include it in rendered
app.css
.One way to fix this is by including a comment in the HTML template with the full class names spelled out:
Yeah. Stupid quirk with a stupid fix.
The text was updated successfully, but these errors were encountered: