Nuxt 3 with TailwindCSS -> heroicons

Problem Description:

Can someone help with setting up Heroicons in combination with Nuxt 3?

I ran the following command:

yarn add @heroicons/vue

I also added @heroicons/vue as following to my nuxt.config.js:

    build: {
        transpile: ["@headlessui/vue", "@heroicons/vue"],
        postcss: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {},
            },
        },
    },

But I can’t seem to make it work at all.

Could you tell me what I have to do?

Solution – 1

Here is how you should set up a nuxt.config.js file together with tailwindcss and nuxt-icon library:

export default defineNuxtConfig({
    modules: ['nuxt-icon'],
    css: ['~/assets/css/main.css'], // css file with @tailwind base etc.
    postcss: {
        plugins: {
            tailwindcss: {},
            autoprefixer: {}
        }
    }
})

Like I wrote in comment, nuxt-icon contains all Heroicons together with 100k + more.

Here is the way you can use this icon library: https://stackoverflow.com/a/73810640/6310260

Solution – 2

Tailwindcss and Nuxt

first you should ,install tailwind package:

npm install -D tailwindcss postcss autoprefixer

then generate tailwind cona fig file:

npx tailwindcss init

Add Tailwind to your PostCSS configuration

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

then inside your tailwind.config.js Configure your template paths:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./pages/index.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

! if you set srcDir correct the paths

then add the Tailwind directives to your CSS:

1. add main.css file to your assets with this content:

2. Add main.css the CSS file globally

main.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.js

css: ['~/assets/css/main.css'],

finally you can use tailwind.

final nuxt.config.js file :

export default defineNuxtConfig({
css: ["@/assets/styles/main.scss"],
  postcss: {
    plugins: {
      "postcss-import": {},
      "tailwindcss/nesting": {},
      tailwindcss: {},
      autoprefixer: {},
    },
  },
})

Heroicons and Nuxt

First, you should install Heroicons package:

npm install @heroicons/vue

then you can use it like this:

<template>
<BeakerIcon class="h-6 w-6 text-blue-500" />
</template>
<script lang="ts" setup>
import { BeakerIcon } from "@heroicons/vue/24/solid";
</script>

The 24×24 outline icons can be imported from @heroicons/vue/24/outline, the 24×24 solid icons can be imported from @heroicons/vue/24/solid, and the 20×20 solid icons can be imported from @heroicons/vue/20/solid.

learn more here: https://github.com/tailwindlabs/heroicons#vue

but try nuxt-icon library 🙂