Nuxt3 引入 Tailwind CSS v3.0

1. 创建 Nuxt3 项目

跟着官网创建即可,参考地址

创建项目

npx nuxi init nuxt-app

进入项目目录

code nuxt-app

安装依赖

yarn install

运行测试

yarn dev

2. 安装 Tailwind CSS

参考官网：https://tailwindcss.com/docs/guides/nuxtjs

• 安装

npm install -D tailwindcss postcss@latest autoprefixer@latest 

不要安装 @nuxt/postcss8 ，目前 Nuxt3 还不支持。
而且 Tailwind 的官网上要使用buildModules来配置 @nuxt/postcss8,但是这个API 在 Nuxt3 中也失效了，现在使用的API是 modules。

• 初始化Tailwind

npx tailwindcss init -p

项目根目录将会生成tailwind.config.js和postcss.config.js文件

• 创建并引入Tailwind的样式

在项目根目录创建如下层级文件

- assets
	- css
		- tailwind.css

tailwind.css 填入如下内容

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

• 修改nuxt.config.ts文件，文件完整代码如下

import { defineNuxtConfig } from "nuxt";

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  css: ["@/assets/css/tailwind.css"],
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
});

• 配置 tailwind.config.js 文件

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

按需要配置，也可以在content中添加 "./app.vue"。

至此，就可以使用tailwind编写样式了。