Nuxt Tailwind

特色功能

👌 零配置即可開始
🪄 包含使用 postcss-nesting 的 CSS 巢狀結構
🎨 探索您的 Tailwind 配置和顏色 (觀看影片)
⚙️ 在您的應用程式中參考您的 Tailwind 配置
📦 可透過使用 hooks 的 Nuxt 模組擴展
🚀 同時支援 Nuxt 3 和 Nuxt 2

快速設定

使用 Nuxt CLI 將 @nuxtjs/tailwindcss 加入您的專案

npx nuxi@latest module add tailwindcss

..或使用您的依賴套件管理器安裝

# Using pnpm
pnpm add --save-dev @nuxtjs/tailwindcss

# Using yarn
yarn add --dev @nuxtjs/tailwindcss

# Using npm
npm install --save-dev @nuxtjs/tailwindcss

然後加入到 nuxt.config.{ts,js} 的 modules 區塊

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/tailwindcss'
  ]
})

就是這樣！您現在可以在您的 Nuxt 應用程式中使用 Tailwind 類別 ✨

貢獻

您可以在線上為此模組做出貢獻

..或在本地端

複製此儲存庫
使用 pnpm i 安裝依賴套件
使用 pnpm dev:prepare 準備開發環境
使用 pnpm dev 啟動開發伺服器

文件

您可以使用 pnpm docs:dev 在本地端執行 docs/，或執行建置

在建置應用程式之前，請務必在 .env 檔案中加入您的 Nuxt UI Pro 授權。
使用 pnpm docs:build 執行 SSG 建置
使用 pnpm docs:preview 在本地端檢閱生產版本建置

查看部署文件以獲取更多資訊。

許可證

MIT - 以 💚 製作