インストール
Tailwind CSSは、すべてのHTMLファイル、JavaScriptコンポーネント、およびその他のテンプレートをスキャンしてクラス名を検出し、対応するスタイルを生成して静的なCSSファイルに書き込むことによって機能します。
高速、柔軟、そして信頼性があり、ランタイムはゼロです。
Play CDNを使用すると、ビルドステップなしでブラウザ上でTailwindを試すことができます。Play CDNは開発目的でのみ設計されており、本番環境での使用を意図していません。
Play CDNスクリプトタグをHTMLファイルの<head>に追加して、Tailwindのユーティリティクラスを使用してコンテンツのスタイルを設定し始めます。
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline"> Hello world! </h1> </body></html>type="text/tailwindcss"を使用して、TailwindのすべてのCSS機能をサポートするカスタムCSSを追加します。
<!doctype html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <style type="text/tailwindcss"> @theme { --color-clifford: #da373d; } </style> </head> <body> <h1 class="text-3xl font-bold underline text-clifford"> Hello world! </h1> </body></html>