Tailwind CSSを使ってみる

Tailwind CSSを簡単に触ってみます。

特徴

Tailwind CSSはユーティリティクラスが多数用意されたCSSフレームワークで、用意されたclassをHTMLに指定することでスタイルを適用していくのが特徴です。
例えば文字色と文字サイズを設定する場合、以下のようなclassを追加します。

<p class="text-violet-600 text-lg">Hello world!</p>

この場合、以下のスタイルを設定したことになります。

{
  color: #7c3aed;
  font-size: 1.125rem;
  line-height: 1.75rem;
}

このような設定方法のメリットとしては以下が考えられます。

• マークアップ側のみでスタイル設定まで完結できる
• class名を考えなくてよくなる
• CSSの記述がほぼなくなる

ただ、これまでのCSS設計とは大きく変わるため慣れが必要そうなのと、VueやReactなどといったフレームワークでコンポーネント化する前提でないと使いにくいかも、という印象でした。

また、今回はCDNを使用するため試せませんが、ビルド時にサイト内で使用していないCSSを削除する機能もあるようです。

設定方法

まずはTailwind CSSを使用する準備ですが、今回は簡単に使ってみるだけなのでCDNを使用します。
head内に下記を追加します。

<script src="https://cdn.tailwindcss.com"></script>

これでTailwind CSSが使えるようになったので、実際に使ってみます。
例として文字装飾をいくつか試してみます。

<p class="text-3xl font-bold underline text-center text-rose-400">Hello world!</p>

文字装飾のデモページ
それぞれのclass名で何となく予想できるかと思いますが、text-3xlが文字サイズ、font-boldが文字の太さ、underlineが下線、text-centerが中央揃え、text-rose-400が文字色になります。
色については多くの種類が用意されていますので、詳しくは公式のドキュメントをご確認ください。

次にボタンを作ってみます。

<button class="px-5 py-2 rounded-full text-sm text-white bg-sky-500 hover:bg-sky-700">Save changes</button>

ボタンのデモページ
px-5が左右のpadding、py-2が上下のpadding、rounded-fullが角丸、bg-sky-500が背景色、hover:bg-sky-700がホバー時の設定で、この場合はホバー時に背景色を変更する指定になります。

:hoverだけでなく::beforeや::afterといった疑似要素、::placeholderなどの設定も行えます。

<button class="px-5 py-2 rounded-full text-sm text-white bg-sky-500 hover:bg-sky-700 before:inline-block before:w-2 before:h-2 before:mr-2 before:bg-pink-500">Save changes</button>

ボタンのデモページ2
w-2が幅、h-2が高さ、mr-2が右marginの指定になります。

最後にカード型レイアウトでブレークポイントの設定を試してみます。
まずは設定前の例です。

<div class="flex items-center flex-wrap">
  <div class="w-1/4 mb-8 px-4">
    <div class="px-6 py-8 rounded-lg bg-white shadow-xl">
      <div class="h-32 bg-slate-200 rounded-sm"></div>
      <h3 class="mt-5 text-slate-900 text-base font-medium">heading</h3>
      <p class="mt-2 text-slate-500 text-sm">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
    </div>
  </div>
  ～ 略 ～
  <div class="w-1/4 mb-8 px-4">
    <div class="px-6 py-8 rounded-lg bg-white shadow-xl">
      <div class="h-32 bg-slate-200 rounded-sm"></div>
      <h3 class="mt-5 text-slate-900 text-base font-medium">heading</h3>
      <p class="mt-2 text-slate-500 text-sm">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
    </div>
  </div>
</div>

カードを4列で並べたレイアウトになります。
カード型レイアウトのデモページ

先ほどの例だと画面幅を狭めても4列のままなので、画面幅に応じて列数を変更してみます。

<div class="flex items-center flex-wrap">
  <div class="sm:w-1/2 md:w-1/3 lg:w-1/4 mb-8 px-4">
    <div class="px-6 py-8 rounded-lg bg-white shadow-xl">
      <div class="h-32 bg-slate-200 rounded-sm"></div>
      <h3 class="mt-5 text-slate-900 text-base font-medium">heading</h3>
      <p class="mt-2 text-slate-500 text-sm">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
    </div>
  </div>
  ～ 略 ～
  <div class="sm:w-1/2 md:w-1/3 lg:w-1/4 mb-8 px-4">
    <div class="px-6 py-8 rounded-lg bg-white shadow-xl">
      <div class="h-32 bg-slate-200 rounded-sm"></div>
      <h3 class="mt-5 text-slate-900 text-base font-medium">heading</h3>
      <p class="mt-2 text-slate-500 text-sm">dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text dummy text</p>
    </div>
  </div>
</div>

「sm:」「md:」「lg:」部分がブレークポイントの指定になります。
デフォルトでは5種類用意されていて、「sm:」が640px以上、「md:」が768px以上、「lg:」が1024px以上、「xl:」が1280px以上、「2xl:」が1536px以上になります。
カード型レイアウトのデモページ2