Nuxt 3与TailwindCSS ->英雄

Question

有人能帮助设置Heroicons与Nuxt 3结合吗？

我运行了以下命令：

yarn add @heroicons/vue

我还在我的nuxt.config.js中添加了@海洛因/vue

​

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

​

但我似乎无法让它运转起来。

你能告诉我我要做什么吗？

Answer 1

下面是如何将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包含所有的Hero图标以及100 K+更多的图标。

下面是使用这个图标库的方法：https://stackoverflow.com/a/73810640/6310260

Answer 2

Tailwindcss和Nuxt

首先，安装顺风包：

npm install -D tailwindcss postcss autoprefixer

然后生成顺风cona图文件：

npx tailwindcss init

将尾风添加到您的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 ，则更正路径

然后将尾风指令添加到CSS中：

1. 将main.css文件添加到具有以下内容的资产中：

1. 全局添加main.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: {},
    },
  },
})

Heroicons和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大纲图标可以从@海洛因图标/vue/24/ outline导入，24x24实体图标可以从@海洛因图标/vue/24/固态导入，20x20实体图标可以从@海洛因图标/vue/20/固态导入。

了解更多信息：https://github.com/tailwindlabs/heroicons#vue

但是尝试一下nuxt-icon库:)