HeroIcons component not working in Phoenix 1.8.0 with Tailwind CSS 4.1.10

Phoenix Forum Questions / Help
, , , ,
1

I’m going through Pragmatic Studio’s Full-Stack Phoenix course, but the HeroIcons aren’t working for me. Has anyone else run into this issue? Tailwind CSS classes seem to be applying just fine. Below are my config.exs and a sample .icon code snippet from the layouts.ex file.

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

# layouts.ex
<.icon name="hero-arrow-path" class="ml-1 size-3 motion-safe:animate-spin" />
2

Looks like no one knows or cares. Anyhow, I figured it out…if you’re using the latest TailwindCSS 4.1.x, add the following to the top of your /assets/css/app.css file and you’re good to go:

/* new style for importing tailwindcss 4*/
@import "tailwindcss";

/* Load plugins you placed in assets/vendor */
@plugin "../vendor/heroicons.js";
@plugin "../vendor/daisyui.js";
@plugin "../vendor/daisyui-theme.js";
3 Likes