Nuxt3学习笔记（四） Nuxt 3 如何使用 Tailwind CSS

我是土豆
4,702 阅读5分钟

前言

为了后续范例程式在页面呈现上能有比较好看的样式，原先有想过使用 UI 框架或纯写 CSS，但是总觉得好像不够潮，所以呢，我决定带入近年满热门的 CSS 框架 Tailwind CSS，在这系列文章我就不再多花篇幅介绍 Tailwind 的语法及指令等，主要针对 Nuxt 3 如何导入 Tailwind CSS 至项目内使用。

Tailwind CSS

image.png Tailwind CSS 是近年很热门的 Utility-First CSS 框架，曾掀起一番论战说 Class 不是让你这样用的之类的批评及缺点，但如果你深入了解它后，确实不可否认它能为你带来更好的生产效率等诸多优点。

接下来，我会分别介绍两种导入 Tailwind CSS 方式，分别为 A. Nuxt Community 释出的 Tailwind CSS 整合模块 及 B. Tailwind CSS 官方指引步骤，以下的 A 或 B 两种导入方式，大家只要择一就可以了。

A. 使用 Nuxt Tailwind 模块

Step 1. 安装相关依赖

首先安装 @nuxtjs/tailwindcss。

npm install -D @nuxtjs/tailwindcss

Step 2. 添加模組至 nuxt.config.ts

打开 ./nuxt.config.ts 将 @nuxtjs/tailwindcss 模块添加至 modules 设定参数中，完成后看起来会像下面这样。

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss'],
  typescript: {
    typeCheck: true
  }
})

Step 3. 重启 Nuxt 服务

重新启动我们的 Nuxt 服务。

npm run dev -- -o

使用  @nuxtjs/tailwindcss 只需要两个步骤就完成了 Tailwind CSS 的配置，这个模快已经包含手动安装时需要建立的 Tailwind CSS 指令 tailwindcss.css 需要的全局设定与 PostCSS 参数选项，同时也预设了 tailwind.config.js 的相关 content 目录路径，详细可以参考 Nuxt Tailwind。

扩充或重写 @nuxtjs/tailwindcss 配置

如果你没有特别需要扩充或重写设定可以跳过这一段。

项目内若使用 @nuxtjs/tailwindcss 模块，这两个 tailwind.css 与 tailwind.config.js 文件其实已经有预设，不需要手动建立，tailwind.css 对应模块内的 tailwind.css 可以参考项目文件内容 tailwind.css，tailwind.config.js 则是通过模块动态新增配置。

倘若想要修改也可以通过创建设置文件来新增或重写预设定，例如在项目下分别建立 tailwind.css 与 tailwind.config.js 两个文件：

tailwind.css

项目目录下若存在路径档名一致的 ./assets/css/tailwind.css 文件， @nuxtjs/tailwindcss 就会以这个文件取代模块内预设的 tailwind.css 文件。

tailwind.css 预设内容如下：

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

如果有成功覆盖配置，在重启 Nuxt 3 服务时，Terminal 会提示下列字串，表示使用了自订的tailwind.css。

Using Tailwind CSS from ~/assets/css/tailwind.css

tailwind.config.js

项目目录下若存在 tailwind.config.js 文件就会以新的配置拓展或覆写  @nuxtjs/tailwindcss 预设的 tailwind.config。

例如，我们想拓展或覆写 content 的配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './app.{js,ts,vue}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

B. Tailwind CSS 官方指引步骤

如果你已经使用了 @nuxtjs/tailwindcss 进行配置，则可以跳过这一段。

Step 1. 安装相关依赖

首先进入我们的 Nuxt 项目目录，并安装 Tailwind CSS 会使用到的一些相关依赖。

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

Step 2. 建立 tailwind.config.js

安装完依赖后，可以执行下列指令进行初始化，完成后会在项目根目录下产生一个名为 tailwind.config.js 的 Tailwind CSS 设定档。

npx tailwindcss init

Step 3. 调整 tailwind.config.js

打开刚刚产生的设定档 tailwind.config.js，在配置中的 content 数组添加一些路径，这些路径皆是跟 Nuxt 有关的资料夹目录与文件，完成后文件内容如下。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './components/**/*.{vue,js,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './composables/**/*.{js,ts}',
    './plugins/**/*.{js,ts}',
    './app.{js,ts,vue}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

Step 4. 建立 tailwind.css

接着我们在项目建立目录 assets 与子目录 css 用来放置 Tailwind CSS 的自定义指令，我们将其放置在 tailwind.css 供后续做使用， tailwind.css 的路径应会是 ./assets/css/tailwind.css 文件内容如下。

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

Step 5. 配置全域共用 CSS

上面我们建立好 tailwind.css 后，为了让每个页面都可以吃得到 Tailwind CSS，我们修改项目根目录的 nuxt.config.ts 文件，在 css 参数数组内新增 tailwind.css 路径，让 Nuxt 可以配置全域共用的 CSS，并添加 postcss 选项及我们刚才安装的依赖作为插件，最后 nuxt.config.ts 文件看起来如下。

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  postcss: {
    plugins: {
      'postcss-import': {},
      'tailwindcss/nesting': {},
      tailwindcss: {},
      autoprefixer: {}
    }
  },
  css: ['@/assets/css/tailwind.css'],
  typescript: {
    typeCheck: true
  }
})

至此，我们项目目录文件如下结构。

nuxt-app
├── .nuxt/
├── assets/
│   └── css/
│       └── tailwind.css      // 手动新增的文件，用于设置 Tailwind CSS 指令并让全部页面引用
├── node_modules/
├── .eslintrc.js
├── .gitignore
├── .prettierrc.js
├── app.vue
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── README.md
├── tailwind.config.js       // Tailwind 初始化指令产生的设置
└── tsconfig.json

Step 6. 重启 Nuxt 服务

重新启动我们的 Nuxt 服务。

npm run dev -- -o

自动排序 Tailwind CSS 的 Class

image.png 当我们在写 Tailwind CSS 时终究会碰到类型过多，第一眼不确定是否包含某个 class，或者对于顺序上有强烈统一的要求，那么这个 Prettier 的插件，prettier-plugin-tailwindcss 插件是 Tailwind 推出的，目的在于可以使用官方推荐的 class 顺序，来实现自动排序 class 来做到统一代码风格。

Tailwind x Prettier

Step 1. 安装插件

npm install -D prettier-plugin-tailwindcss

如果你不是照着前面的步骤建置项目，请记得确认已经有安装 prettier 依赖。

Step 2. 配置设定档

开启 .prettierrc.js 文件，添加 'prettier-plugin-tailwindcss' 至 plugins 数组中：

module.exports = {
  plugins: [
    'prettier-plugin-tailwindcss'
  ],
  printWidth: 100,          // 每行文字数量达 100 字元就换到新的一行
  semi: false,              // 每个语句的结尾不需要分号
  singleQuote: true,        // 字串使用单引号，而不是双引号
  trailingComma: 'none'     // 如 Object、Array 内的元素不需要尾随逗号
}

Step 3. 自动修正效果

你可以在编辑器内移至错误波浪底线使用「快速修复 (Quick Fix)...」功能，或设置 "editor.codeActionsOnSave" 中 "source.fixAll.eslint": true 来达到保存后自动修正 prettier 引发的 ESLint 错误。

小结

相较于 Tailwind CSS 官方指引的安装方式，使用 Nuxt Community 帮我们整理好的 @nuxtjs/tailwindcss 模块，可以省去繁琐的设定步骤，也解决了一些目前 Nuxt 3 项目中，导入 Tailwind CSS 使用 HMR 可能无法自动编译并重新套用等问题。

后面的系列文章，将会尽量以导入@nuxtjs/tailwindcss 模块的项目进行开发。

感谢大家的阅读，也欢迎大家给予建议 ：）

如果对这个 Nuxt 3 系列感兴趣，可以关注一下小编，也欢迎分享给喜欢或正在学习 Nuxt 3 的伙伴。

avatar
文章
阅读
粉丝