インストール
Tailwind CSS は、すべての HTML ファイル、JavaScript コンポーネント、およびその他のテンプレートをスキャンしてクラス名を検索し、対応するスタイルを生成して、静的な CSS ファイルに書き込むことによって機能します。
高速、柔軟、そして信頼性があります — ランタイムはゼロです。
PostCSS プラグインとして Tailwind CSS をインストールする方法は、Next.js や Angular などのフレームワークと統合する最もシームレスな方法です。
tailwindcss、@tailwindcss/postcss、および postcss を npm 経由でインストールします。
npm install tailwindcss @tailwindcss/postcss postcss@tailwindcss/postcss を postcss.config.mjs ファイル、またはプロジェクトで PostCSS が設定されている場所に追加します。
export default { plugins: { "@tailwindcss/postcss": {}, }}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="/dist/styles.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>