TailwindCSS v3.x

TailwindCSSはutility-firstを掲げており、必要最低限のスタイルを持ったクラスを組み合わせることで、デザインを構築することを目的としたCSSフレームワークです^tailwindcss。従来だと以下のような書き方をしていた部分が、TailwindCSSではいくつかのクラスを組み合わせて構築します。

1
<!-- 従来の方法 -->
2
<div class="chat-notification">
3
  <div class="chat-notification-logo-wrapper">
4
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
5
  </div>
6
  <div class="chat-notification-content">
7
    <h4 class="chat-notification-title">ChitChat</h4>
8
    <p class="chat-notification-message">You have a new message!</p>
9
  </div>
10
</div>
11

12
<style>
13
  .chat-notification {
14
    display: flex;
15
    max-width: 24rem;
16
    margin: 0 auto;
17
    padding: 1.5rem;
18
    border-radius: 0.5rem;
19
    background-color: #fff;
20
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
21
  }
22
  .chat-notification-logo-wrapper {
23
    flex-shrink: 0;
24
  }
25
  .chat-notification-logo {
26
    height: 3rem;
27
    width: 3rem;
28
  }
29
  .chat-notification-content {
30
    margin-left: 1.5rem;
31
    padding-top: 0.25rem;
32
  }
33
  .chat-notification-title {
34
    color: #1a202c;
35
    font-size: 1.25rem;
36
    line-height: 1.25;
37
  }
38
  .chat-notification-message {
39
    color: #718096;
40
    font-size: 1rem;
41
    line-height: 1.5;
42
  }
43
</style>

1
<!-- TailwindCSSを使って書く場合 -->
2
<div class="max-w-sm mx-auto flex p-6 bg-[white] rounded-lg shadow-xl">
3
  <div class="flex-shrink-0">
4
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
5
  </div>
6
  <div class="ml-6 pt-1">
7
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
8
    <p class="text-base text-gray-600 leading-normal">You have a new message!</p>
9
  </div>
10
</div>

やり方としてはインラインでCSSを記述するやり方 (style="xxx: yyy"と書くやり方) と同じですが、TailwindCSSで書くとレスポンシブデザインや擬似クラスにも対応できます。

必要最低限のクラスがたくさんあるものがTailwindCSSだとすると、パッケージサイズが大きくなる心配があるかもしれませんが、v3.x以前ではpurgeCSSを使って未使用のCSSをビルド時に削除する仕組みがありました。また、v3.xからは使用しているCSSのみをビルドするJITコンパイルが追加され、purgeCSSが削除されました。

JITコンパイル

これはテンプレートファイルを作成したときに、CSSをオンデマンドでコンパイルする仕組みです。これを利用することで、必要に応じてスタイルを生成するようになりました。このおかげで、開発環境であっても必要最低限のCSSを利用できるようになり、開発環境と本番環境のCSSが同一になりました (以前はビルド時に未使用のCSSを削除する関係上、開発環境は余分なCSSを持った状態でした)。

より詳細な内容はこちらのブログ^tailwind_jitやGitHubのリポジトリ^{tailwind_jid2}から確認できます。

設定ファイルにContent Configuration追加

JITコンパイルを採用したことで、contentセクションでTailwindCSSを適用させたいファイルを指定するようになりました。この部分が古いTailwindCSSの記事とズレる部分なので注意が必要です。

1
module.exports = {
2
  content: [
3
    './pages/**/*.{html,js}'
4
    './components/**/*.{html,js}',
5
  ],
6
  // ...
7
}

カスタムスタイル

TailwindCSS 3.xまでは決められたフォントサイズや色しか使うことができませんでした。これは余分にクラスを追加すると、開発環境での動作が重くなるためです。3.x以降はJITコンパイルを利用するため、好きなフォントサイズや色、幅などを指定できるようになりました。

[]を使って以下のように指定することで、任意の値を使うことができます。

1
<div class="h-[50px] bg-[#06395A]">
2
  ...
3
 </div>

CDN経由での実行

3.xからTailwindCSSをCDN経由で実行できるようになりました。headに下記のスクリプトタグを追加することで試すことができます。これは開発や新機能のテスト向けで、本番での利用は推奨されてません^tailwind_cdn。

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

フォームの装飾

デフォルトのファイル入力フォームを装飾できるようになりました。file-<適用したいスタイル> で使います^{tailwind_input_button}。

1
<form>
2
  <div class="flex items-center space-x-6">
3
    <label class="block">
4
      <span class="sr-only">Choose profile photo</span>
5
      <input type="file" class="block w-full text-sm text-gray-500
6
        file:mr-4 file:py-2 file:px-4
7
        file:rounded-full file:border-0
8
        file:text-sm file:font-semibold
9
        file:bg-violet-50 file:text-violet-700
10
        hover:file:bg-violet-100
11
      "/>
12
    </label>
13
  </div>
14
</form>

入力フォーム装飾の例

その他

その他にも色付きの影^{tailwind_box_shadow}やスクロールスナップAPI^{scroll_margin}, マルチカラムレイアウト^{multi_column_layout}などがあります。開発時のCSSのサイズを気にしなくて良くなったので、今後も面白いクラスが追加されていきそうで今後も期待です。