How to create components in Phoenix?

Phoenix Forum Questions / Help
4

You could also import the module as suggested here :slight_smile:

defmodule MyAppWeb do
  defp view_helpers do
    quote do
      import MyAppWeb.ButtonComponent
    end
  end
end

Furthermore I’d recommend using semantic class names (.button) in combination with Tailwind’s @apply or theme(...) over utility classes for two reasons:

  1. you won’t run into specificity issue once you try to pass a class to the component (<.button class="p-2">... ← this could otherwise conflict with a p-3 utility class within the component)
  2. source code is a lot easier to read (especially when you have a lot of conditionals)

See my explanation here: "Petal Components" package - a set of Tailwind styled components written in HEEX - #45 by thomasbrus

1 Like