Nuxt 3与TailwindCSS ->英雄
Nuxt 3与TailwindCSS ->英雄
提问于 2022-12-04 15:52:58
有人能帮助设置Heroicons与Nuxt 3结合吗？
我运行了以下命令：
yarn add @heroicons/vue我还在我的nuxt.config.js中添加了@海洛因/vue
build: {
transpile: ["@headlessui/vue", "@heroicons/vue"],
postcss: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
但我似乎无法让它运转起来。
你能告诉我我要做什么吗？
回答 2
Stack Overflow用户
发布于 2022-12-04 16:18:42
下面是如何将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
Stack Overflow用户
发布于 2022-12-04 16:59:59
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中：
- 将
main.css文件添加到具有以下内容的资产中：
- 全局添加
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库:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74678254
复制相关文章
相似问题
腾讯云开发者
