Nuxt2 使用 Tailwind

Tailwind 是一个所谓的 Utilize Class 类型的 CSS 代表框架，这是使用一个个功能单一的 CSS Class 来实现界面的框架，因此它在原创性上有非常高的自由度。相比起以前按照区域或功能写 CSS 样式的模式, 使用 Tailwind 在观念上需要有一些转变。

Tailwind 在做个人项目、规范性较好的项目、用完既抛的项目、水淹脖子马上要交的项目、前期探索性的项目上非常好用。但如果不是这些项目的花则需要认真想想中后期的维护成本，甚至提前想好替代、升级方案。

虽然关于 Tailwind 的优劣及使用网上已经有大量的文章 ,但一方各方面的资讯比较分散，另一方面由于时间问题一些文章的内容已经不适合现在的版本。这里主要记录 Nuxt2 中使用 Tailwind 的相关步骤与需要注意的地方。以下步骤及使用主要基于 nuxt@2.16.2、@nuxtjs/tailwindcss@6.6.0 与 tailwindcss@3.2.7，如有失败请换成一样的版本再重新编译。

安装

官网其实有很详细的按照流程，很多框架都有专门的介绍，这里只列出 Nuxt2 的部分

1. 增加 tailwindcss postcss autoprefixer @nuxtjs/tailwindcss 依赖到项目, 可以使用相关命令或手动添加到 package.json 的 devDependencies。如：

   npm install -D tailwindcss postcss autoprefixer @nuxtjs/tailwindcss
   

2. 初始化 Tailwind, 创建 tailwind.config.js

   npx tailwindcss init
   

使用

1. 增加或修改 tailwind.config.js 文件 content 字段中的规则正式开启 Tailwind

   /** @type {import('tailwindcss').Config} */
   module.exports = {
       "content": [
           "./src/components/**/*.{js,vue,ts}"
           , "./src/layouts/**/*.vue"
           , "./src/pages/**/*.vue"
           , "./plugins/**/*.{js,ts,less}"
           , "./nuxt.config.{js,ts}"
       ]
   }
   

   这里如果修改过 Nuxt 的默认目录结构的话则需要特别注意目录是否正确

2. 在项目中的资源目录增加 Tailwind 相关指令及页面预处理样式文件

   1. 新建 ~/assets/css/tailwind.css 文件

   2. 文件内容

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

3. 修改 nuxt.config.js 启用 Tailwind 支持

   1. 添加 tailwindcss 与 autoprefixer 到 build.postcss.plugins 配置对象中

      module.exports = {
          "build" :{
              // other config
              // postcss
              "postcss": {
                  "postcssOptions": {
                      "plugins": {
                          "tailwindcss": {}
                          , "autoprefixer": {
                              "overrideBrowserslist": ["Android >= 4.0", "iOS >= 7"]
                          }
                      }
                  }
              }
          }
      }
      

   2. 添加 @nuxtjs/tailwindcss 到 buildModules 中

      module.exports = {
          "buildModules": [
              // ohter modules
              // tailwindcss
              "@nuxtjs/tailwindcss"
          ]
      }
      

      注意是 buildModules 而不是 modules

   3. 添加 Tailwind 相关指令及页面预处理样式文件文件到 css 中

      module.exports = {
      "css": [
              // ohter css
              // tailwindcss
              "@/assets/css/tailwind.css"
          ]
      }
      

4. 编辑器支持, 以 VSCode 为例

   1. 安装官方插件 Tailwind CSS IntelliSense

   2. 修改 .vscode/settings.json，添加

      {
          "files.associations": {
              "*.css": "tailwindcss"
          },
          "editor.quickSuggestions": {
              "strings": true
          }
      }
      

      如有希望应用在其他预处理器如 less 上需要关掉对应语言的验证

      {
          "less.lint.unknownAtRules": "ignore"
      }
      

问题快速排查

• 启动不起来?

  1. 检查各个模块版本

  2. 编译提示 typeError: Cannot destructure property 'nuxt' of 'this' as it is undefined.

     @nuxtjs/tailwindcss 要在 buildModules 中而不是 modules

• 样式不生效或报错

  1. tailwind.config.js 中新声明设置需要重新编译后才能生效

  2. 是否使用方式错误, 如设置一个灰色文本应该使用 text-slate-400 而不是用 caret-slate-400

  3. tailwind.config.js 有些内容修改后是会导致原有的设置失效的。(出现版本 tailwindcss@3.2.7, @nuxtjs/tailwindcss@6.6.0，其他版本没测试)。

     典型的如 theme.screens 这个字段，如果设置了 screens 的同时还希望继续用框架默认的则需要自己把 sm md lg xl 2xl 都补上。

     检查是否是这个原因也很简单，把失效功能的相应配置注释掉重新编译看默认项目是否恢复正常即可