Tailwind Form Field components

Questions & Help Questions
, , ,
2

I would choose another approach and simply collect all these in Tailwind components. In your assets/css there should be an app.css file with components. You can add new ones to it such as:

.form-label {
    @apply
        block
        text-sm
        font-medium
        text-gray-700
}

As for your svg and error objects, it’s possible to utilise what Phoenix already provides. I’ve made an svg helper:

defmodule ProjectName.IconHelper do
  @moduledoc """
  Give some icons to be used on templates.
  """

  use Phoenix.HTML

  alias ProjectName.Router.Helpers, as: Routes

  def icon_tag(name, opts \\ []) do
    id = Keyword.get(opts, :id, "")
    classes = Keyword.get(opts, :class, "")

    content_tag(:svg, id: id, class: classes) do
      tag(:use, href: Routes.static_path(ProjectName.Endpoint, "/svg/#{name}.svg"))
    end
  end
end

As well as an error helper based on the one Phoenix provides:

  def error_label_style(form, field) do
    form.errors
    |> Keyword.get_values(field)
    |> Enum.map(fn _error ->
      "invalid-feedback-label"
    end)
  end

with the component

.invalid-feedback-label {
    @apply
        text-red-500
}

I hope this was at all helpful and that I didn’t misunderstand you too bad. :sweat_smile:
My team uses Tailwind and really enjoy it. We use a mix of components and just writing Tailwind directly into the HTML depending on whether we’re going to use this styling a lot (then it goes into a component) or if it’s single use (then it goes into the html).