もしまだ HTML と CSS がよくわからない場合#
HTML はおおよそ以下のようなものです。各 HTML タグにはそれぞれの意味があります（画像やリンクを表すなど）；タグの組み合わせで囲まれるか、自己閉じするかのいずれかです；階層的にネストすることができます。たくさんの HTML タグが組み合わさって、ブラウザで表示されるウェブページが作られます。
<img alt="A dog on an iPad" src="/assets/images/dog-ipad.jpg" />
<p class="text">Here is <a href="https://example.com">a link</a></p>
よく使われる HTML タグに興味がある場合は、この Simple.css のデモページを見てみてください。
しかし、HTML だけではウェブページは非常にシンプルになります。ブラウザが提供するデフォルトのスタイルしかありません。そのため、ウェブページにスタイルを追加するためには CSS が必要です。
.text {
color: #333;
font-size: 16px;
line-height: 1.5;
}
.textは CSS のクラスセレクタであり、HTML のclass属性にtextが含まれるタグにスタイルを追加します。ここではテキストの色、サイズ、行の高さを簡単に設定しています。
HTML と CSS を組み合わせることで、見栄えの良い静的なウェブページを作ることができます。CSS の構文に興味がある場合は、この記事を読み終えると非常に良い学習資料が手に入ります。
Tailwind とは何ですか#
直接マークアップ内でビルドできるように構成された、flex、pt-4、text-center、rotate-90 などのクラスが詰まったユーティリティファーストの CSS フレームワーク。
これが Tailwind の公式の紹介です。簡単に言えば、これはアトミック CSS フレームワークであり、HTML に直接スタイルを追加するための多くのユーティリティクラスを提供しています。
CSS を学ぶための Tailwind の使い方を紹介する前に、Tailwind が私たちのために何をしてくれるか見てみましょう：
- HTML ファイルをスキャンして、すべての
class属性を見つけます - これらの
class属性に一致するユーティリティクラス（例：flex m-1）に基づいて、対応する CSS コンテンツを生成します
はい、それだけです。Tailwind を使用せずに手動で CSS コンテンツを書くことも完全に可能です。それは Vue.js や React のようなものではなく、それらが行っていることを理解するには多くの学習コストがかかりません。
なぜ Tailwind を使用して CSS を学ぶ必要があるのか
MDN のドキュメントを使って学ぶ場合と比較して：
- Tailwind のドキュメントはより簡潔で、より多くの図解があります。MDN のドキュメントはより詳細で、より多くの概念があります。
- Tailwind のカテゴリはより明確で、重要な点を強調しています。MDN のドキュメントはより包括的ですが、人を迷わせる可能性があります。
- CSS の知識は多岐にわたりますが、日常の開発ではその一部しか使用しません。
- Tailwind のドキュメントは、ダークモードのサポートやレスポンシブデザインなどの重要な概念を素早く理解するのに役立ちます。
- Tailwind のテーマシステムは、よりデザイン性の高いページを作成するのに役立ちます。
- Tailwind は強力なプレイグラウンドを提供しており、ブラウザで直接学習することができます。
もしデザイナーの場合#
デザイナーとして、デザインツールだけを使ってデザインを行う場合、次のような問題に直面するかもしれません：
開発者：このデザインは実装が難しいです！！
しかし、コードを使ってデザインを行う場合、彼がそれを言ったら、Tailwind Playground のリンクを直接渡してやり、彼がもう一言言えるか見てみましょう。
また、開発者と同じ技術を使用することは、効率の向上をもたらします：
- 開発者はデザイン全体をコードに一つ一つ対応させる必要がありません。
- デザイナーは自分のデザインが完全に再現されることを保証することができます。
最後に強調したいこと#
すべての Tailwind のユーティリティクラスが直感的で簡単ではないことに注意してください。flex-rowがflex-direction: row;と同じであるように、grid-cols-1に対応する生成される CSS は少し複雑です。それはgrid-template-columns: repeat(1, minmax(0, 1fr));と同じです。Tailwind のドキュメントを読む前に、生成される CSS の意味を理解していない場合は、続けずに MDN のドキュメントでこのプロパティの具体的な意味を学ぶべきです。
Playground では、ツールクラスに対応する生成された CSS を自動補完やマウスオーバーで表示することができます。ですので、Tailwind の学習を始めましょう。CSS がわからなくても大丈夫です。優れたドキュメントと Playground があなたの学習の助けになります。
プラグイン#
VSCode では、私が作成したプラグインをインストールすることで、どのテキストが対応する CSS を生成するかを確認することができます。