BT

InfoQ ホームページ ニュース Tailwind CSS V2.0 - 最初のメジャーアップデート

Tailwind CSS V2.0 - 最初のメジャーアップデート

ブックマーク

原文(投稿日:2020/12/23)へのリンク

 

人気のユーティリティフレームワークであるTailwind CSSは最近、最初のメジャーアップデートをした。ダークモードのサポート、拡張カラーパレット、フォームサポートの改善、他にコミュニティからリクエストされたの多くの機能など、大幅な改善が提供される。

Tailwind CSSにより、開発者とデザイナは高度なWebアプリケーションを簡単に構成できる。これは、CSSをtext-centerやrotate-90などの小さな構成可能なビルディングブロック(またはクラス)に分割することにより実現される。

Tailwind CSSは、構成可能なビルディングブロックを使用して、Bootstrapなどの既存のCSSフレームワークでなくユーザーインターフェイスを幅広く制御できる。Bootstrapは事前定義されたデザインと共に一連の組み込みコンポーネントを提供するフレームワークである。

v2.0リリースは、フレームワーク機能の拡張と、最初のリリース後に顕在化したいくつかの問題点への対処に重点を置いている。

変更点は次の通りである。

  1. 独自の配色を構築するための新しいワークフローと共に220色を備えた拡張カラーパレット。
  2. ダークモードのサポート。ダークモードが動的に有効になっている場合に、これまでになく簡単にデザインを変更できる。
  3. 1536px以上で設計するためのエクストラワイド2XLブレークポイント。
  4. CSSでoutline-radiusをエミュレートする新しいアウトラインリングユーティリティ。
  5. ユーティリティに適したフォームスタイル。ユーティリティクラスだけでフォーム要素を簡単にカスタマイズできる新しいフォームリセット。
  6. フォントサイズごとのデフォルトのline-height。
  7. マイクロレベルで対象を微調整するための、拡張spacing、typography、およびopacityのscale。
  8. あらゆるものに対する@applyの使用。responsive、hover、focus、そして、他のvariantを含む。
  9. truncateだけの場合よりも正確に制御するための新しいtext-overflowユーティリティ。
  10. variantを拡張して、リスト全体を再宣言したり順序を考えたりすることなく、focus-visibleなどの追加のvariantを有効にできる。
  11. デフォルトでgroup-hoverとfocus-within。
  12. デフォルトのtransition-durationとeasingカーブ。

個々の機能の詳細については、Tailwindブログにアクセスするか、開発チームが提供する広範なドキュメントをお読みください。

Tailwind CSS v2.0へのアップグレードは、アップグレードガイドを使用することで比較的簡単である。Tailwind CSSチームは大幅な変更は最小限にしているが、IE11のサポートは廃止されており、それをサポートする必要がある組織はアップグレードしないことをお勧めする。

Tailwind CSSは、MITライセンスの下で利用可能なオープンソースソフトウェアである。Tailwind CSSコントリビューションガイドラインの下で、コントリビューションを歓迎している。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。