tailwindcssの公式プラグイン4つをそれぞれ使ってみた

#React

#Tailwind CSS

北川慶太

2022.05.23

この記事は公開されてから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