Nuxt 3 with TailwindCSS -> heroicons - vue.js

Question

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?

Answer 1

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:
add main.css file to your assets with this content:
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 24x24 outline icons can be imported from #heroicons/vue/24/outline, the 24x24 solid icons can be imported from #heroicons/vue/24/solid, and the 20x20 solid icons can be imported from #heroicons/vue/20/solid.
learn more here: https://github.com/tailwindlabs/heroicons#vue
but try nuxt-icon library :)

Answer 2

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