この記事は弥生 Advent Calendar 2020の4日目の記事です。
さて、2020年11月19日にTailwind CSSのver2.0がリリースされました🎉🎉🎉
https://blog.tailwindcss.com/tailwindcss-v2
それを記念して？ Tailwind CSS 2.0で追加された機能全部入れてデモページを作ってみました。アドベントカレンダー記事というのもあり、Qiitaアドベントカレンダーをインスパイアした形で作っています。
TailwindCSSとは何ぞやという話は、いろんな方がすでにたくさん記事を書いていますので割愛します。
(ご参考)
作ったもの
アドベントカレンダーのページっぽく、ヘッダー、タイトル、カレンダー、フッターを含んだ1ページです。レスポンシブ、ダークモード対応しています。生のCSSは1行も書いていません。全てTailwindCSSだけで作っています。
なお、Tailwind Playというサンドボックス環境に公開していますので、こちらから作ったものとソースコードがみれます。(開いたらビルドが走るみたいですので、初回表示は遅いです。)
https://play.tailwindcss.com/euCH5tu0IA?layout=horizontal
chromeの開発ツールでブラウザのダークモード切り替えが出来ますので、遊んでいただければと思います。(Tailwind Playヘッダーの月と太陽マーク押してもスイッチしないので注意)
Tailwind CSS 2.0で追加された機能
ニュースリリースからの引用です。
- All-new color palette
- Dark mode support
- Extra wide 2XL breakpoint
- New outline ring utilities
- Utility-friendly form styles
- Default line-heights per font-size
- Extended spacing, typography, and opacity scales
- Use @apply with anything
- New text overflow utilities
- Extend variants
- Group-hover and focus-within by default
- Default transition duration and easing curve
- Incompatibility with IE11
これらを全部デモページに埋め込みましたので、一つ一つ実装したものを見ていきたいと思います。
All-new color palette
デフォルトで用意されているカラーパレットが全面的に刷新され、今までの10色、9段階の明暗のカラーパレットから、22色、10段階の明暗が用意されました。
デモページではcyanを使ってみました。色の追加はtailwind.config.jsという設定ファイルをいじります。
const colors = require('tailwindcss/colors')
module.exports = {
theme: {
colors: {
cyan: colors.cyan,
},
},
}
<span class="block text-cyan-600 dark:text-cyan-500 xl:inline text-6xl"> 2020 </span>
色はこんな感じです。いい色ですね。
Dark mode support
簡単にダークモード対応出来るようになりました。設定ファイルに1行追加して、
module.exports = {
darkMode: 'media',
// ...
}
<header class="h-16 bg-white dark:bg-gray-800 px-4">
</header>
こんな感じでdark:ディレクティブを使って記述すれば、ブラウザのダークモード設定時にはdark:のスタイルが使用されます。簡単！すごい！
Extra wide 2XL breakpoint
1536px以上の画面サイズに対する新しいブレイクポイント2xl:が追加されました。デモページでは画面サイズを1536px以上にすると文字が出てくるようにしてみました。
<p class="hidden 2xl:block text-9xl text-center font-bold my-20">Too wide and Too Big!!</p>
New outline ring utilities
入力フォームなどでフォーカスされた時に出てくる黒い枠のところをoutline ringと呼んでいます。このスタイルが増えました。
<input type="text" placeholder="ユーザーID" class="rounded border mr-2 px-2 py-1 focus:outline-none focus:ring-4 focus:ring-cyan-300 focus:ring-opacity-75" />
これをフォーカスすると、、
こんな感じにできます。
Utility-friendly form styles
ブラウザごとに異なるフォームデザインをノーマライズ・リセットしてTailwindのユーティリティクラスをシンプルに使用できるようになりました。
@tailwindcss/formsプラグインを使用するようにconfigファイルに記述します。
module.exports = {
// ...
plugins: [require('@tailwindcss/forms')],
}
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
ユーザビリティは悪いですが、丸いチェックボックスなんかも作れますし、チェックした色も簡単に変えられます。これ、地味に凄くないですか？今まではチェックボックスの色変えようと思ったらCSSたくさん書いて自前でチェックの形作ってました。それがtext-cyan-600だけで色変わります。
Default line-heights per font-size
フォントサイズを選んだ時にデフォルトでLine Heightも設定されるようになりました。
<p class="text-xl">This will have a line-height of 1.75rem automatically.</p>
Extended spacing, typography, and opacity scales
デフォルトで選べるサイズが増えました。
96とかはあまり使わないと思いますが、7とかはたまに使いたい場面があったので良かったと思います。
テキストサイズも9xlまで用意されています。ちなみにブレイクポイントのところで出した「Too Big！」の文字はtext-9xlを使っています。
Use @apply with anything
普通のセマンティックなクラスを作りたい場合、@applyディレクティブを使って共通化できましたが、今まではfocus:やhover:などの一部の機能が使えませんでした。今回から全ての機能を@applyに使用できます。もちろんdark:もです。
<button class="btn-cyan">参加登録</button>
.btn-cyan {
@apply bg-cyan-600 dark:bg-cyan-500 text-white text-sm px-2 py-1 rounded mt-2 hover:bg-cyan-700;
}
New text overflow utilities
今まではテキストが要素からはみ出した時にtruncateしかありませんでしたが、overflow-ellipsisとoverflow-clipが使えるようになりました。ただ、これは日本語には使えないかもしれないです。英語はうまく...が入りましたが、日本語はうまくいきませんでした。
<div class="h-20 w-24 overflow-hidden overflow-ellipsis text-xs mt-1">
<a class="text-cyan-600 dark:text-cyan-500 hover:underline cursor-pointer">This is a long long English Sentences and LongLongLongLongOneWord</a>
</div>
Group-hover and focus-within by default
グループを指定して、その要素がホバーされたら子要素にもホバー時の挙動が適用できます。
<td class="group h-40 w-1/7 border-r text-gray-600 dark:text-gray-300 hover:bg-gray-200">
<div class="flex flex-col h-full p-2">
<div class="text-center">8</div>
<div class="flex items-center text-xs mt-2 hover:underline">
<div class="h-5 w-5 rounded-full bg-gray-500 group-hover:bg-cyan-600 mr-1"></div>
<a href="#" class="text-cyan-600 group-hover:text-gray-500 dark:text-cyan-500"> User Name </a>
</div>
<div class="text-xs text-gray-400 mt-1 group-hover:text-red-400">group hover確認</div>
</div>
</td>
子要素は子要素でホバーしたときの挙動を変えられます。便利。
Default transition duration and easing curve
transitionとeaseのデフォルト値を定義できるようになりました。tailwind.config.jsにtransitionDuration = 1000msを試しに追加してみます。
module.exports = {
darkMode: "media",
theme: {
//...//
transitionDuration: {
DEFAULT: '1000ms',
},
transitionTimingFunction: {
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
},
},
variants: {},
plugins: [require('@tailwindcss/forms')],
}
<button class="bg-cyan-600 rounded text-white px-3 py-2 transition hover:bg-white hover:text-cyan-600 shadow-lg focus:outline-none">招待する</button>
transitionクラスを追加するだけでいい感じになりました。アニメーションの一貫性を維持しやすくなりますね。
以上！
2.0で追加された機能を全部試してみました。
個人的にはダークモードがやっぱり楽すぎるのと、@apply全機能対応が嬉しかったです。
最後までお付き合いいただきありがとうございました。