@nuxtjs/tailwindcss

PurgeCSSが付属しており、最小限のCSSでTailwind CSSをNuxtアプリケーションに数秒で追加できます。

1.1Mダウンロード•1.8K スター•v6.14.0

Atinux•

ineshbose

Nuxt Tailwind

NuxtでTailwind CSSを有効にする⚡️

📖 ドキュメント | ▶️ オンラインで試す | ✨ リリースノート

機能

👌 設定不要で開始
🪄 postcss-nestingを使用したCSSネストを含む
🎨 Tailwindの設定とカラーを発見 (ビデオを見る)
⚙️ アプリケーション内でTailwindの設定を参照
📦 フックを使用して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 - 💚を込めて作成