在 Nuxt.js 中安装 Tailwind CSS

创建您的工程

如果您还没有建立一个新的 Nuxt.js 项目，请先创建一个新的项目。最常见的方法是使用 Create Nuxt App：

npx create-nuxt-app my-project

当提示您选择" UI 框架"时，请不要选择 "Tailwind CSS"。这将导致冲突，使您无法安装 Tailwind CSS v2.0，因为@nuxtjs/tailwindcss 模块依赖旧版本的 Tailwind。

下一步，将目录改为新项目：

cd my-project

初始化 Tailwind CSS

通过 npm 安装 Tailwind

如果您已经安装了 @nuxtjs/tailwindcss 和 tailwindcss 模块，您必须在安装 Tailwind 本身之前卸载它。

npm uninstall @nuxtjs/tailwindcss tailwindcss

接下来，使用 npm 安装 @nuxtjs/tailwindcss 和 Tailwind 以及其它依赖项:

npm install -D @nuxtjs/tailwindcss tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Nuxt.js 尚未支持 PostCSS 8，所以您需要安装 Tailwind CSS v2.0 PostCSS 7 兼容性版本。

将 @nuxtjs/tailwindcss 模块添加到您的 nuxt.config.js 文件的 buildModules 部分。

// nuxt.config.js
export default {
  buildModules: ['@nuxtjs/tailwindcss']
}

创建您的配置文件

接下来，生成您的 tailwind.config.js 文件：

npx tailwindcss init

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

阅读配置文档了解更多。

配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 pages 和 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

  // tailwind.config.js
  module.exports = {
-   purge: [],
+   purge: [
+     './components/**/*.{vue,js}',
+     './layouts/**/*.vue',
+     './pages/**/*.vue',
+     './plugins/**/*.{js,ts}',
+     './nuxt.config.{js,ts}',
+   ],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    },
    plugins: [],
  }

请阅读我们单独的优化生产指南，以了解更多关于摇树优化未使用的样式来获得最佳性能的信息。

在您的 CSS 中引入 Tailwind

打开 Nuxt.js 默认为您生成的 ./assets/css/tailwind.css 文件并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

阅读我们的文档添加基础样式，提取组件，和添加新的功能类，以获得用您自己的自定义 CSS 扩展 Tailwind 的最佳实践。

您已经完成了所有步骤！现在，当您运行 npm run dev, Tailwind CSS 就可以在您的 Nuxt.js 项目中使用了。