在 Nuxt.js 中安装 Tailwind CSS

创建您的工程

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

npx create-nuxt-app my-project
cd my-project

初始化 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

通过 npm 安装 Tailwind

安装 ​@nuxtjs/tailwindcss​ 和 Tailwind 以及其它依赖项:

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

将 ​@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 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

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