Phoenix/Tailwind not producing correct CSS

Phoenix Forum Questions / Help
,
1

I am having trouble with my Phoenix/LiveView/Tailwind app not displaying correctly. The proper Tailwind classes are being created, but not all of them are being turned into CSS classes. I created a demo app below to illustrate the problem.

The Tailwind labels

absolute
top-0 (8, 16, 24, 32, 40)
left-0 (8, 16, 24, 32, 40)
bg-red-500 (yellow)
h-8
w-8
pt-px
pl-px

are all being created in the HTML, but the CSS classes do not include

top-x
left-x

Any idea on why the correct CSS is not being generated for all Tailwind classes?

TWTest demo app

Erlang 24.3.1 and Elixir 1.13.3-otp-24.

$ mix phx.new tw_test --no-ecto --no-mailer

mix.exs, deps:

{:tailwind, "~> 0.1", runtime: Mix.env() == :dev}

config.exs, add:

config :tailwind,
  version: "3.0.10",
  default: [
  args: ~w(
  --config=tailwind.config.js
  --input=css/app.css
  --output=../priv/static/assets/app.css
  ),
  cd: Path.expand("../assets", __DIR__)
  ]

$ mix deps.get
$ mix tailwind.install
$ mix tailwind default

dev.exs, watchers:

tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}

mix.exs, aliases add:

"assets.deploy": ["tailwind default --minify", ...]

router.ex, change route to:

    live "/", Demo

Add demo.ex:

defmodule TwTestWeb.Demo do
  use TwTestWeb, :live_view

  def render(assigns) do
    ~H"""
    <h1>Tailwind Test</h1>

    <div class={"relative w-screen h-80 bg-teal-50"}>
    <%= for i <- 0..4 do %>
      <.box
        style="bg-red-500"
        x={assigns.nodes[i].x}
        y={assigns.nodes[i].y}
      />
      <.box
        style="bg-yellow-500"
        x={assigns.nodes[i].y}
        y={assigns.nodes[i].x}
      />
    <% end %>
    </div>
    """
  end

  def mount(_params, _session, socket) do
    nodes =
      Map.new(0..4, &{&1, %{x: 4 - &1, y: &1}})
      |> IO.inspect()

    {:ok, assign(socket, nodes: nodes)}
  end

  def box(assigns) do
    ~H"""
        <div
      class={
        "absolute top-#{8 * assigns.y} left-#{8 * assigns.x} #{assigns.style} h-8 w-8 pt-px pl-px"
      }
    >
    </div>
    """
  end
end
2

This is because you’re computing the classes dynamically - Tailwind purges the top-8, top-16 etc. classes since it doesn’t “see” them being used.

One way to fix this would be to list them explicitly in a comment:

def box(assigns) do
    ~H"""
    <!-- top-8 top-16 ... ->
    """
7 Likes
3

Hi!

Or you could put all possible computed CSS classes in tailwind.config.js exclude list.

2 Likes