Tailwind CSS:迅速でレスポンシブデザインのためのユーティリティファーストのCSSフレームワークとAPI

TailwindCSSフレームワーク

私は日常的にテクノロジーに精通していますが、会社が顧客のために実装している複雑な統合と自動化を共有したいほどの時間はありません。 また、発見時間もあまりありません。 私が書いているテクノロジーのほとんどは、 Martech Zone それらをカバーしていますが、時々、特にTwitterを介して、共有する必要のある新しいテクノロジーに関する話題がいくつか見られます。

Webデザイン、モバイルアプリの開発、またはコンテンツ管理システムのセットアップに携わっている場合は、複数のスタイルシート間で競合するスタイルのフラストレーションに苦しんでいる可能性があります。 各ブラウザ内に構築されたすばらしい開発ツールを使用しても、CSSの追跡とクリーンアップには非常に多くの時間とエネルギーが必要になる可能性があります。

CSSフレームワーク

近年、デザイナーは、準備が整ってすぐに使用できるスタイルのコレクションをリリースするという非常に素晴らしい仕事をしています。 これらのCSSスタイルシートはCSSフレームワークとしてよく知られており、開発者がCSSファイルを最初から作成するのではなく、フレームワークを参照できるように、さまざまなスタイルとレスポンシブ機能のすべてに対応しようとしています。 いくつかの人気のあるフレームワークは次のとおりです。

  • ブートストラップ – Twitterによって最初に導入された、XNUMX年以上にわたって進化したフレームワーク。 それは無数の機能を提供します。 それには欠点があり、SASSが必要であり、上書きするのが難しく、JQqueryに依存しており、ロードするのはかなり重いです。
  • ブルマ –開発者にとって使いやすく、JavaScriptに依存しないクリーンなフレームワーク。
  • 財団 –簡単にカスタマイズできる多数のコンポーネントを備えたより汎用的で使用可能なCSSフレームワーク。 さらに、 Eメールの基盤 影響により モーションUI アニメーション用。
  • UIキット – HTML、JavaScript、およびCSSの組み合わせにより、フロントエンドを迅速かつ簡単に開発できます。

TailwindCSSフレームワーク

他のフレームワークは人気のあるユーザーインターフェイス要素に対応するのに優れた仕事をしますが、Tailwindは アトミックCSS。 つまり、Tailwindは、自然言語を使用してクラス名を巧みに整理し、彼らが言うことを実行しました。 そのため、Tailwindにはコンポーネントのライブラリがありませんが、CSSクラス名を参照するだけで、強力で応答性の高いインターフェイスを簡単に構築できる機能は、エレガントで高速、そして比類のないものです。

ここにいくつかの本当に素晴らしい例があります:

CSSグリッド

css列開始グリッド列

CSSグラデーション

cssグラデーション

ダークモードサポート用のCSS

cssダークモード

テールウィンドにも素晴らしい 利用可能な拡張機能 VS Codeの場合、Microsoftのコードエディタからクラスを簡単に識別して挿入できます。

さらに巧妙なことに、Tailwindは、本番用にビルドするときに未使用のCSSをすべて自動的に削除します。つまり、最終的なCSSバンドルは可能な限り最小になります。 実際、ほとんどのTailwindプロジェクトは、10kB未満のCSSをクライアントに出荷します。

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.