Tailwind CSS インストール(CDN)
簡単に試したいだけなら、CDNリンクを直接導入できます：
公式サイトが提供するCDNライブラリを使用します。アドレスは次のとおりです：
<script src="https://cdn.tailwindcss.com"></script>
jsDelivr のCDNライブラリを使用します。アドレスは次のとおりです：
この方法で使用します：
- 利点：設定が不要で、迅速な開発やデモに適しています。
- 欠点： スタイルをカスタマイズできず、ファイルサイズが大きい。
使用例
次の例では Hello, world! を出力します。
例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
試してみる »
tailwind.config オブジェクトを編集すると、独自の設定情報を定義できます：
例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
clifford: '#da373d',
}
}
}
}
</script>
</head>
<body>
<h1 class="text-3xl font-bold underline text-clifford">
Hello world!
</h1>
</body>
</html>
試してみる »
type="text/tailwindcss" を使用してカスタムCSSを追加します：
例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
}
</style>
</head>
<body>
<div class="lg:content-auto">
<!-- ... -->
</div>
</body>
</html>
plugins パラメータを使用して、使用するプラグインを設定できます。例：forms（フォーム）や typography（タイポグラフィ）：
例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
</head>
<body>
<div class="prose">
<!-- ... -->
</div>
</body>
</html>