この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。
tailwind.cssとは、「ユーティリティファースト」が特徴のCSSフレームワークになります。
tailwindcssは、プラグインによって機能を拡張することができ、公式でもいくつか開発しています。公式プラグインとして、提供されているのは以下の4つになります。
- Typography
- LineClamp
- Forms
- Aspect Ratio
今回は、Next.jsのプロジェクト内で、それぞれのプラグインを試していこうと思います。
Typography
まとまったHTMLコンテンツに、デフォルトのスタイルを提供します。
<div className="prose bg-gray-100 p-10">
<h1>Official Plugins</h1>
<h2>tailwind/typography</h2>
<h4>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</h4>
<p>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</p>
</div>
適用したい要素に"prose"クラスを指定します。
指定前
指定後
proseクラスだけで、それぞれの要素にスタイルを適用することができました。
proseでは、全体のサイズを調整することができます。ブレークポイントと組み合わせることも可能です。
<div className="prose md:prose-lg lg:prose-xl bg-gray-100 p-10">
{...}
</div>
また、個々のHTML要素に対して、スタイルを適用させることができます。以下では、p要素に対してカラーを変更しています。
<div className="prose md:prose-lg lg:prose-xl bg-gray-100 prose-p:text-blue-500 p-10">
{...}
</div>
"prose"が適用されたコンテンツ内で、"not-prose"を指定すると、その中の要素はスタイルが適用されなくなります。
<div className="prose md:prose-lg lg:prose-xl bg-gray-100 prose-p:text-blue-500 p-10">
<h1>Official Plugins</h1>
<h2>prose</h2>
<div className="not-prose">
<h2>not-prose</h2>
</div>
<h4>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</h4>
<p>
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</p>
</div>
Line Clamp
指定した行数でテキストを切り捨て、省略記号を表示させることができます。
<div className="prose md:prose-lg lg:prose-xl bg-gray-100 prose-p:text-blue-500 p-10">
<h1>Official Plugins</h1>
<h2>tailwindcss/line-clamp</h2>
<h4 className="line-clamp-2">
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</h4>
<p className="line-clamp-3">
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキストテキストテキスト
テキストテキストテキストテキストテキスト
</p>
</div>
h4要素は2行、p要素は3行で切り捨てます。
Forms
フォーム要素のスタイルを上書きし、デフォルトのフォームスタイルを提供します。
<div className="h-48 w-48 flex flex-col justify-around">
<input type="text" />
<select>
<option value="サンプル1">サンプル1</option>
<option value="サンプル2">サンプル2</option>
<option value="サンプル3">サンプル3</option>
</select>
<input type="checkbox" />
</div>
プラグイン適用前
適用後
もちろん、その上からcssを付け加えることもできます。
<div className="h-48 w-48 flex flex-col justify-around">
<input type="text" className="border-red-500" />
<select className="rounded-md">
<option value="サンプル1">サンプル1</option>
<option value="サンプル2">サンプル2</option>
<option value="サンプル3">サンプル3</option>
</select>
<input type="checkbox" className="rounded-full" />
</div>
Aspect Ratio
aspect-w-{n}、aspect-h-{n}によって、要素のアスペクト比を指定します。
<div className="max-w-[500px] mx-auto my-10">
<div className="aspect-w-1 aspect-h-1">
<Image
src="/sample.png"
layout={"fill"}
alt="sample"
className="object-center object-cover"
/>
</div>
</div>
1:1
<div className="max-w-[500px] mx-auto my-10">
<div className="aspect-w-16 aspect-h-9">
<Image
src="/sample.png"
layout={"fill"}
alt="sample"
className="object-center object-cover"
/>
</div>
</div>
16:9
まとめ
今回はtailwindcssの公式プラグインを、それぞれ使用してみました。 どのプラグインも非常に便利で、開発効率の向上に繋がりそうです。それぞれのプラグインには、今回使用していないオプションが他にもあるので、今後も色々試しながら、用途に合わせて使っていきたいです。
ではまた。