人気のユーティリティフレームワークであるTailwind CSSは最近、最初のメジャーアップデートをした。ダークモードのサポート、拡張カラーパレット、フォームサポートの改善、他にコミュニティからリクエストされたの多くの機能など、大幅な改善が提供される。
Tailwind CSSにより、開発者とデザイナは高度なWebアプリケーションを簡単に構成できる。これは、CSSをtext-centerやrotate-90などの小さな構成可能なビルディングブロック(またはクラス)に分割することにより実現される。
Tailwind CSSは、構成可能なビルディングブロックを使用して、Bootstrapなどの既存のCSSフレームワークでなくユーザーインターフェイスを幅広く制御できる。Bootstrapは事前定義されたデザインと共に一連の組み込みコンポーネントを提供するフレームワークである。
v2.0リリースは、フレームワーク機能の拡張と、最初のリリース後に顕在化したいくつかの問題点への対処に重点を置いている。
変更点は次の通りである。
- 独自の配色を構築するための新しいワークフローと共に220色を備えた拡張カラーパレット。
- ダークモードのサポート。ダークモードが動的に有効になっている場合に、これまでになく簡単にデザインを変更できる。
- 1536px以上で設計するためのエクストラワイド2XLブレークポイント。
- CSSでoutline-radiusをエミュレートする新しいアウトラインリングユーティリティ。
- ユーティリティに適したフォームスタイル。ユーティリティクラスだけでフォーム要素を簡単にカスタマイズできる新しいフォームリセット。
- フォントサイズごとのデフォルトのline-height。
- マイクロレベルで対象を微調整するための、拡張spacing、typography、およびopacityのscale。
- あらゆるものに対する@applyの使用。responsive、hover、focus、そして、他のvariantを含む。
- truncateだけの場合よりも正確に制御するための新しいtext-overflowユーティリティ。
- variantを拡張して、リスト全体を再宣言したり順序を考えたりすることなく、focus-visibleなどの追加のvariantを有効にできる。
- デフォルトでgroup-hoverとfocus-within。
- デフォルトのtransition-durationとeasingカーブ。
個々の機能の詳細については、Tailwindブログにアクセスするか、開発チームが提供する広範なドキュメントをお読みください。
Tailwind CSS v2.0へのアップグレードは、アップグレードガイドを使用することで比較的簡単である。Tailwind CSSチームは大幅な変更は最小限にしているが、IE11のサポートは廃止されており、それをサポートする必要がある組織はアップグレードしないことをお勧めする。
Tailwind CSSは、MITライセンスの下で利用可能なオープンソースソフトウェアである。Tailwind CSSコントリビューションガイドラインの下で、コントリビューションを歓迎している。