0

I bought and installed TailwindUI. I copied and pasted one of the Navigation components just to see how it looks in the app and the hamburger menu and the notification bell (both part of Heroicons) aren't appearing.

enter image description here

When I click on the part where the menu should dropdown it works. But all that's present is a little square that sort of looks like a checkbox.

Here is what it looks like in Firefox (mobile debugger):

enter image description here

Testing on Safari and it looks like Chrome.

In node_modules I can see heroicons are present:

enter image description here

The app uses Elixir/Phoenix, Vue, Webpack, and Tailwindcss.

Anyone know what the issue is or how I'd go about debugging it?

Loading...
  • 863
  • 9
  • 21

2 Answers2

0

If you are not using SVG syntax, you have to install and import @heroicons/react package into your project using npm/yarn

npm install @heroicons/react
Tejas Chaudhari
  • 31
  • 5
0

TailwindUI supports Vue 3, which does not appear to include @vue/compat. @vue/compat is a compatibility build for when one wants to migrate from Vue 2 to Vue 3. the compat build (aka, migration build) is supposed to be Vue 3 compatible but I guess it's still not enough for TailwindUI.

Loading...
  • 863
  • 9
  • 21