インストール
Tailwind CSS は、すべての HTML ファイル、JavaScript コンポーネント、およびその他のテンプレートをスキャンしてクラス名を検出し、対応するスタイルを生成して静的な CSS ファイルに書き込むことによって機能します。
高速、柔軟、そして信頼性があり、ランタイムはゼロです。
Tailwind CSS を Vite プラグインとしてインストールすることは、Laravel、SvelteKit、React Router、Nuxt、SolidJS などのフレームワークと統合する最もシームレスな方法です。
`tailwindcss` と `@tailwindcss/vite` を npm 経由でインストールします。
npm install tailwindcss @tailwindcss/vite
`@tailwindcss/vite` プラグインを Vite 設定に追加します。
import { defineConfig } from 'vite'import tailwindcss from '@tailwindcss/vite'export default defineConfig({ plugins: [ tailwindcss(), ],})
Tailwind CSS をインポートする `@import` を CSS ファイルに追加します。
@import "tailwindcss";
`npm run dev` または `package.json` ファイルで設定されている任意のコマンドでビルドプロセスを実行します。 `package.json` ファイル。
npm run dev
コンパイルされた CSS が `<head>` に含まれていることを確認し(フレームワークがこれを処理してくれる場合があります)、Tailwind のユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/src/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>