Nuxt3项目安装使用TailWindCSS

如果您觉得这篇文章有帮助的话！给个点赞和评论支持下吧，感谢~

作者：哇子

IT技术(摸鱼)交流QQ群：374984174

效果演示：https:www.soulmategzh.com

安装 @nuxtjs/tailwindcss 依赖到你的项目

1
2
3
4
5
6
7
8
9
10
11
# 方式1：nuxi
npx nuxi@latest module add tailwindcss
 
# 方式2：yarn 
yarn add -D @nuxtjs/tailwindcss
 
# 方式3：npm
npm install -D @nuxtjs/tailwindcss
 
# 方式4：pnpm
pnpm i -D @nuxtjs/tailwindcss

nuxt.config配置

1
2
3
4
# nuxt3
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss']
})

使用

在html元素上添加class类即可，例如：

1
2
3
4
5
<template>
  <div class="textcolor mt-[30px]">
    hhhhh
  </div>
</template>

具体使用tailwindcss，查看官网：https://tailwind.nodejs.cn/