在 Nuxt.js 中安裝 Tailwind CSS

創(chuàng)建您的工程

如果您還沒(méi)有建立一個(gè)新的 Nuxt.js 項(xiàng)目，請(qǐng)先創(chuàng)建一個(gè)新的項(xiàng)目。最常見(jiàn)的方法是使用 Create Nuxt App：

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

初始化 Tailwind CSS

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

通過(guò) npm 安裝 Tailwind

安裝 ?@nuxtjs/tailwindcss? 和 Tailwind 以及其它依賴項(xiàng):

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)建您的配置文件

接下來(lái)，生成您的 ?tailwind.config.js? 文件：

npx tailwindcss init

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

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

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

在您的 ?tailwind.config.js? 文件中，配置 ?purge ?選項(xiàng)指定所有的 pages 和 components 文件，使得 Tailwind 可以在生產(chǎn)構(gòu)建中對(duì)未使用的樣式進(jìn)行搖樹(shù)優(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

打開(kāi) Nuxt.js 默認(rèn)為您生成的 ./assets/css/tailwind.css 文件 并使用 ?@tailwind? 指令來(lái)包含 Tailwind的 ?base?、 ?components ?和 ?utilities ?樣式，來(lái)替換掉原來(lái)的文件內(nèi)容。

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

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

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