HTMLの新しいスタイル設定。Tailwind CSSとは

NEWS & EVENT

お知らせ・イベント情報

HTMLの新しいスタイル設定。Tailwind CSSとは

2023年09月29日

HTMLで画面を作る際にはCSSが使われます。これまで、さまざまなデザインフレームワークが登場しています。有名なものとしてはBootstrapが挙げられます。また、各UIフレームワークごとにVuetifyやMaterial UIなども作られています。

そうした中で、最近注目を集めているのがTailwind CSSです。Tailwind CSSはユーティリティファーストを掲げたCSSフレームワークであり、HTMLとCSSを切り離さずに組み立てられるのが魅力です。

本記事ではTailwind CSSの魅力や基本的な使い方を紹介します。

Tailwind CSSとは

Tailwind CSSはユーティリティファーストを掲げており、多数のクラスが提供されたCSSフレームワークです。従来のものとの大きな違いは、ボタンに対する btn やテーブルに対する table といったDOM要素に応じたクラスがないことでしょう。

それによって、何を表現するかではなく、どう表現するかに絞ってCSSを利用できます。

Tailwind CSSの例

たとえば角丸なボタンを表現すると、次のようになります。

<button class="rounded-md">Get started</button>

最後についている -md は border-radius で、mdの場合は0.375remとなっています。これはtopやleftによって、さまざまな指定が可能です。たとえば rounded-tl-3xl などもあります。

Tailwind CSSの仕組み

Tailwind CSSを使って開発している際には、静的なスタイルシートファイルを読み込んで使うわけではありません。あらかじめ用意されているクラスも多数ありますが、JavaScriptで動的にCSS設定を生成するものもあります。

コード例として、以下のようになります。 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>

カスタマイズ範囲は広く、テーマや幅、スペースなど多数あります。また、プラグインによって拡張も可能です。

グリッドシステム

Trailwind CSSには xs/sm/md/lg/xl/2xlという6つのブレークポイントがあります。

ブレークポイント	名称	表示幅
X-small	なし	640px 未満
Small	sm	640px以上
Medium	md	768px以上
Large	lg	1024px以上
Extra large	xl	1280px以上
Extra extra large	2xl	1536px以上

これらは class="md:text-center" のように指定します。この場合、768px以上の場合のみテキストを中央寄せするという指定になります。 class="text-center sm:text-left" とした場合は、モバイルの場合は中央寄せ、640px以上は左寄せになるという意味です。

padding

paddingは p- というプリフィックスで指定します。 class="p-10" のような指定です。

指定	意味
py	padding-top と padding-bottom
px	padding-left と padding-right
pt	padding-top
pb	padding-bottom
pl	padding-left
pr	padding-right

もちろんグリッドと組み合わせて利用できます。 class="sm:pr-6" のように指定します。

ダークモード

dark: というプリフィックスを付けると、ダークモード時に適用されるクラスになります。 class="dark:text-white" のような指定になります。

フォーカスなど

特別なプリフィックスとして以下が用意されています。

hover
focus
active
first-child
required
::before
::after
::placeholder
::selection

これらのプリフィックスは組み合わせて利用できます。 class="dark:md:hover:text-white" のような指定です。

高さと幅

高さは h- 、幅は w- というプリフィックスを用意しています。マウスカーソルが当たったら全体を表示する場合には class="h-8 hover:h-full" のように指定します。

テキストサイズ

基本的なテキストサイズは text-sm や text-lg といった形で指定します。 line-hight を指定する場合には /8 のような形になります。たとえば class="text-sm/8" や class="text-lg/[17px]" のように数値での指定も可能です。