Вот как вы должны настроить файл nuxt.config.js вместе с библиотекой tailwindcss и nuxt-icon:

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

Как я уже писал в комментарии, nuxt-icon содержит все Heroicons, а также более 100 000 значков.

Вот как вы можете использовать эту библиотеку значков: https://stackoverflow.com/a/73810640/6310260

Tailwindcss и Nuxt

сначала вы должны установить пакет tailwind:

npm install -D tailwindcss postcss autoprefixer

затем сгенерируйте файл попутного ветра cona fig:

npx tailwindcss init

Добавьте Tailwind в свою конфигурацию PostCSS

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

затем внутри вашего tailwind.config.js Настройте пути к шаблону:

/** @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: [],
}

! если поставить srcDir поправьте пути

затем добавьте директивы Tailwind в свой CSS:

1. добавьте файл main.css в свои активы с этим содержимым:

2. Добавьте main.css файл CSS глобально

файл main.css:

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

nuxt.config.js

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

наконец, вы можете использовать попутный ветер.

окончательный nuxt.config.js файл:

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

Героиконы и Nuxt

Во-первых, вы должны установить пакет Heroicons:

npm install @heroicons/vue

то вы можете использовать его следующим образом:

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

Контурные значки 24x24 можно импортировать из @heroicons/vue/24/outline, сплошные значки 24x24 можно импортировать из @heroicons/vue/24/solid, а сплошные значки 20x20 можно импортировать из @heroicons/vue/20/. твердый.

узнайте больше здесь: https://github.com/tailwindlabs/heroicons#vue

но попробуйте nuxt-icon библиотеку :)