在Nuxt3中使用Tailwind Css

本文以创建Nuxt3项目为起始进行记录。如有问题还望纠正讨论。

1. 创建Nuxt3项目

参考官网：v3.nuxtjs.org/getting-sta…

创建项目命令

npx nuxi init nuxt3-tailwind

进行项目目录

cd nuxt3-tailwind

进行npm安装，⌛️等待完成（如果偏好yarn也可以使用yarn进行安装，后续运行同理）

npm install

运行新建的项目，正常运行后进行下一步

npm run dev

2. 安装Tailwind Css

参考官网：tailwindcss.com/docs/guides…

注意⚠️：要先停止上一步运行的项目！

安装Tailwind

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

注意⚠️：此处的命令和官网的有差异，未安装@nuxt/postcss8

初始化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 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
    css: ["~/assets/css/tailwind.css"],
    build: {
        postcss: {
            postcssOptions: {
                plugins: {
                    tailwindcss: {},
                    autoprefixer: {},
                },
            },
        },
    }
})

修改tailwind.config.js文件，文件完整代码如下。

注意⚠️：这里没有按照官网文档引入nuxt.config模板文件

如果引入会报错：

ERROR Importing directly from a nuxt.config file is not allowed. Instead, use runtime config or a module. [importing /nuxt.config.ts from index.html]

关于为何添加并注释"./app.vue"会在下文中提到。

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

- pages
	- index.vue

index.vue文件内容如下

<template>
  <div class="flex flex-row justify-center text-green-500 font-bold">pages - index.vue</div>
</template>

<script>
export default {
  name: "index"
}
</script>

<style scoped>

</style>

修改app.vue文件如下

提示⏰：该文件中有tailwind样式的另一种引入方式，有兴趣的可以尝试尝试。

<template>
  <div>
    <div class="text-red-500">app.vue的tailwind未构建依赖</div>
    <nuxt-page></nuxt-page>
  </div>
</template>

// tailwind的另一种引入方式
<!--<script lang="ts" setup>-->
<!--import './assets/css/tailwind.css'-->
<!--</script>-->

运行项目的启动命令“npm run dev” 观察效果。

可以看到此时，app.vue的文字样式没有生效，pages中的文字生效了。如文字描述是因为未构建依赖，如果将上面👆的"./app.vue"注释打开，重新运行。app.vue的样式才会生效。一般也比较少在app.vue中写标签, 不建议这样配置.

到此引入完成

在Nuxt3中使用Tailwind Css

在Nuxt3中使用Tailwind Css

1. 创建Nuxt3项目

2. 安装Tailwind Css

文章头图