インストール
Tailwind CSSは、すべてのHTMLファイル、JavaScriptコンポーネント、およびその他のテンプレートをスキャンしてクラス名を検索し、対応するスタイルを生成して、静的なCSSファイルに書き込むことによって機能します。
高速、柔軟、そして信頼性があり、ランタイムはゼロです。
Tailwind CSSをゼロからセットアップする最も簡単で高速な方法は、Tailwind CLIツールを使用することです。CLIは、Node.jsをインストールせずに使用したい場合に備えて、スタンドアロンの実行可能ファイルとしても利用できます。
npmを介してtailwindcssと@tailwindcss/cliをインストールします。
npm install tailwindcss @tailwindcss/cliメインのCSSファイルに@import "tailwindcss";インポートを追加します。
@import "tailwindcss";CLIツールを実行して、ソースファイルからクラスをスキャンし、CSSをビルドします。
npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watchコンパイルされたCSSファイルを<head>に追加し、Tailwindのユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。
<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./output.css" rel="stylesheet"></head><body> <h1 class="text-3xl font-bold underline"> Hello world! </h1></body></html>