Hyoban

もし 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 に直接スタイルを追加するための多くのユーティリティクラスを提供しています。

Tailwind を学ぶ方法を紹介する前に、Tailwind が私たちのために何をしてくれるか見てみましょう：

1. HTML ファイルをスキャンし、すべてのclass属性を見つけます
2. 一致するユーティリティクラス（例：flex m-1）に基づいて、対応する CSS コンテンツを生成します

はい、それだけです。Tailwind を使用せずに手動で CSS の内容を書くこともできます。それは Vue.js や React のようなものではなく、それらが行っていることを理解するためには多くの学習コストがかかります。

CSS を学ぶために Tailwind を使用する理由#

MDN のドキュメントを使って学ぶよりも：

1. Tailwind のドキュメントはより簡潔で、より多くの図解があります。MDN のドキュメントはより詳細で、より多くの概念があります。
   
2. Tailwind のカテゴリはより明確で、重要な点を強調しています。MDN のドキュメントはより包括的ですが、人を迷わせることがあります。
   • CSS の知識は多岐にわたりますが、日常の開発ではその一部しか使用しません。
3. Tailwind のドキュメントは、ダークモードのサポートやレスポンシブデザインなど、いくつかの重要な概念をより迅速に理解するのに役立ちます。
4. Tailwind のテーマシステムは、よりデザイン性のあるページを作成するのに役立ちます。
5. Tailwind は強力なプレイグラウンドを提供しており、ブラウザ上で直接学習することができます。

もしデザイナーの場合#

デザイナーとして、デザインツールだけを使ってデザインをする場合、次のような問題に直面するかもしれません：

開発者：このデザインは実装が難しいです！！

しかし、コードでデザインをする場合、彼がそれを言ったら、Tailwind Playground のリンクを直接渡してやり、彼がもう何も言えないようにしましょう。

また、開発と同じ技術を使うことは、効率の向上をもたらします：

1. 開発者はデザインをコードに一つ一つ対応させる必要がありません
2. デザイナーは自分のデザインが完全に再現されることを保証できます

最後に強調したいこと#

すべての Tailwind のユーティリティクラスが直感的で簡単ではないことに注意してください。flex-rowはflex-direction: row;と同じですが、grid-cols-1は生成される CSS が少し複雑です。それはgrid-template-columns: repeat(1, minmax(0, 1fr));と同じです。生成される CSS の意味を理解する前に、Tailwind のドキュメントだけを見続けないでください。その代わりに、このプロパティの具体的な意味を学ぶために MDN のドキュメントを見るべきです。

プレイグラウンドでは、ツールクラスに対応する生成された CSS を自動補完やマウスオーバーで確認することができます。ですので、Tailwind の学習を始めましょう。CSS を知らなくても大丈夫です。優れたドキュメントとプレイグラウンドがあなたの学習の助けになるでしょう。

1 つのプラグイン#

VSCode では、私が作成したプラグインをインストールすることで、どのテキストが対応する CSS を生成するかを確認することができます。