Tailwindcss の使用を開始する

Tailwindcss とは何ですか?

Tailwindcss は、HTML を離れることなく、flex、pt-4、text-center、rotate-90 のアトミック クラスを組み合わせて Web サイトを迅速に構築する、機能的なクラスファーストの CSS フレームワークです。 アトミック クラスを覚えて、CSS の名前付けについて考えずに、頭の中で HTML を書くだけです。

ボタン、メニュー、パンくずリストなどのプリセット コンポーネントが提供されていないという点で、通常のブートストラップ、ブルマ、マテリアル UI とは異なります。 Bootstrap でボタンを作成します。

<button type="button" class="btn btn-primary">Primary</button><button type="button" class="btn btn-secondary">Secondary</button><button type="button" class="btn btn-success">Success</button><button type="button" class="btn btn-danger">Danger</button><button type="button" class="btn btn-warning">Warning</button><button type="button" class="btn btn-info">Info</button><button type="button" class="btn btn-light">Light</button><button type="button" class="btn btn-dark">Dark</button><button type="button" class="btn btn-link">Link</button>

結果:

Tailwindcss には固定のプリセット スタイルがないため、自分で組み合わせる必要があります。

<button class="bg-sky-600 hover:bg-sky-700 ...">  Save changes</button>

結果:

Tailwindcss を使用する理由

メソッド、ライブラリ、フレームワーク、または新しいものの出現は、問題を解決するために行われなければなりません。そうでない場合、その出現は無意味になる可能性があります。

それでは、Tailwindcss はどのような問題を解決するのでしょうか? それは作者の意図からわかります。

彼は、セマンティック CSS はあまりよく維持されていないと考えています。

実際、プロジェクトの最初に付けた非常に意味的な名前について考えてください。ビジネスの変化やさまざまな担当者の変更により、最初の意味のある名前はもはや名前が一致しません。現実です。

また、Bootstrap プリセット UI フレームワークを使用する場合、デザイン スタイルが会社のものと異なる場合、スタイルをリセットすることも問題の原因になります。

Tailwindcss の使用方法?

ここでは CDN の V3 バージョンを使用しています (非推奨)。ビルド ツールと連携したい場合は、公式 Web サイトの使用方法を参照してください。 V2 の CDN は CSS ファイルをインポートしますが、V3 はスクリプトをインポートします。

<script src="https://cdn.tailwindcss.com"></script>

<h1 class="text-3xl font-bold underline">    Hello world!</h1>

結果:

hover/foucs などのステータス スタイルを追加する

https://tailwindcss.com/docs/hover-focus-and-other-states

<h1 class="text-3xl font-bold underline hover:bg-violet-600">    Hello world!</h1>

結果:

hover の仕組み:

hover の例

.btn-primary {  background-color: #0ea5e9;}.btn-primary:hover {  background-color: #0369a1;}

Tailwindcss では、既存のクラスにホバー状態を追加する代わりに、特定の関数を持つ新しいクラスが追加されます。

.bg-sky-500 {  background-color: #0ea5e9;}.hover\:bg-sky-700:hover {  background-color: #0369a1;}

このように、hover に似たスタイルであれば再利用できます。。

Tailwindcss の学習方法

Tailwindcss を学習する際の最初の負担は、クラス名を覚えることですが、幸いなことに、従うべきルールがあります。