このページ内容は2021年1月21日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
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が削除されました。

link
JITコンパイル

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

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

link
設定ファイルにContent Configuration追加

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

1
module.exports = {
2
content: [
3
'./pages/**/*.{html,js}'
4
'./components/**/*.{html,js}',
5
],
6
// ...
7
}
link
カスタムスタイル

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

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

1
<div class="h-[50px] bg-[#06395A]">
2
...
3
</div>
link
CDN経由での実行

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

1
<script src="https://cdn.tailwindcss.com"></script>
link
フォームの装飾

デフォルトのファイル入力フォームを装飾できるようになりました。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>
入力フォーム装飾の例

入力フォーム装飾の例

link
その他

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


自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
最近の活動
技術書典13 (2022.9.10 - 2022.9.25) で本を出しました。
2022年の1月から8月ぐらいまでに登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2023part1
XMind8ファイルをMarkdownファイルに変換するツールを作りました。
公式のxmind-sdk-jsのバージョンを下げて作ってます (最新版だと一部メソッドが削除されてるため)。
技術書典12 (2022.1.22 - 2022.1.30) で本を出しました。
2021年に登場したり、大幅なアップデートがあったWebサービスや開発ツール、ライブラリ、フレームワークを紹介した本です。
うぇぶちぇんじろぐ2022
サイトマップ
Notes
業務や趣味での気づき・メモ
Scraps
雑記。ネットで見つけた面白い記事やニュース
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧