一、nuxt3项目引入tailwindcss3

K先生 2022-11-17 爱技术2609

可能还有人不知道tailwindcss，没关系，它只是一个好用的css框架，简单的来说，以前写style样式现在改为写class了。好不好用，试试看。

关于nuxt3项目的创建，上个文章已经写过了：nuxt3稳定版终于等到了，前排吃瓜

现在tailwindcss的最新版本是3.24，在nuxt3发现了有tailwindcss现成的模块@nuxtjs/tailwindcss，直接用吧。

pnpm add -D @nuxtjs/tailwindcss

安装完成之后，打开nuxt.config.ts配置文件，将@nuxtjs/tailwindcss模块添加到配置中：

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss']
})

然后，然后，然后就OK了。

因为新创建的nuxt3项目除了一个node_modules目录和一个自身的.nuxt文件夹就没有其他文件夹了，所以我们就直接在app.vue里面测试tailwindcss3有没有安装成功吧。

<template>
  <div>
    <p class="text-3xl text-green-500 m-20">这是nuxt3+tailwindcss3新项目</p>
    <NuxtWelcome />
  </div>
</template>

然后运行项目，你就会看到：

一、nuxt3项目引入tailwindcss3

在这里我们还没有手动写样式，但是通过tailwindcss我们能使用class类为元素设置颜色、大小、边距等等。

tailwindcss3就是这了！