在 Nuxt.js 中安裝 Tailwind CSS

創(chuàng)建您的工程

如果您還沒有建立一個新的 Nuxt.js 項目，請先創(chuàng)建一個新的項目。最常見的方法是使用 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']
}

創(chuàng)建您的配置文件

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

npx tailwindcss init

這將會在您的項目根目錄創(chuàng)建一個最小化的 ?tailwind.config.js? 文件：

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

配置 Tailwind 來移除生產(chǎn)環(huán)境下沒有使用到的樣式聲明

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項指定所有的 pages 和 components 文件，使得 Tailwind 可以在生產(chǎn)構(gòu)建中對未使用的樣式進(jìn)行搖樹優(yōu)化。

// 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 默認(rèn)為您生成的 ./assets/css/tailwind.css 文件 并使用 ?@tailwind? 指令來包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來替換掉原來的文件內(nèi)容。

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

Tailwind 會在構(gòu)建時將這些指令轉(zhuǎn)換成所有基于您配置的設(shè)計系統(tǒng)生成的樣式文件。

您已經(jīng)完成了所有步驟！現(xiàn)在，當(dāng)您運行 ?npm run dev?, Tailwind CSS 就可以在您的 Nuxt.js 項目中使用了。