在 Nuxt.js 專案中設定 Tailwind CSS。
首先,建立一個新的 Nuxt.js,如果你還沒有一個已經設定好的專案。 最常見的方式是使用 Create Nuxt App:
npx create-nuxt-app my-project
cd my-project
Tailwind CSS 需要 Node.js 12.13.0 以上版本。
使用 npm
安裝 @nuxtjs/tailwindcss
以及Tailwind 和它需要的依賴套件 (peer-dependencies):
npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
在你的 nuxt.config.js
檔案新增 @nuxtjs/tailwindcss
模組到 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: [],
}
閱讀我們在 優化生產環境 的說明來獲得更多關於 「清除不必要樣式以增進效能」 的資訊。
打開 Nuxt.js 預先為你建立好的 ./assets/css/tailwind.css
檔案
使用 @tailwind
指令來引用 Tailwind 的 base
、components
和 utilities
樣式,並且取代原本檔案的內容:
/* ./assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Tailwind 會在建置時將這些指令替換成你配置系統時所對應的樣式內容。
閱讀我們的 增加基底樣式、提取成元件 和 增加新功能 文件以使用 Tailwind 為你自定義的 CSS 做最好的擴充。
你已經完成了!現在當你執行 npm run dev
,Tailwind CSS 將會在你的 Nuxt.js 專案中運行。