Tailwind を使って CSS を学ぶことができます。

HTML と CSS がまだよくわからない場合#

HTML はおおよそ以下のような形をしています。各 HTML タグにはそれぞれの意味（例えば画像やリンクを表す）があり、タグのグループで囲まれているか、自己終了型です。階層的にネストすることもできます。多数の HTML タグが組み合わさって、ブラウザで見ることができるウェブページが形成されます。

<img alt="iPadの上にいる犬" src="/assets/images/dog-ipad.jpg" />
<p class="text">ここに <a href="https://example.com">リンク</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 を使って CSS を学ぶ方法を紹介する前に、Tailwind が私たちに何をしてくれるのかを見てみましょう：

あなたの HTML ファイルをスキャンし、すべての class 属性を見つけます
これらの class 属性にマッチするユーティリティクラス（例：flex m-1）に基づいて、対応する CSS コンテンツを生成します

はい、これだけ簡単です。Tailwind を使用せずに手動で CSS を記述することも完全に可能です。Vue.js や React のように、それらが行っていることを理解するために大きな学習コストをかける必要はありません。

なぜ Tailwind を使って CSS を学ぶべきか#

MDN のドキュメントを通じて学ぶのと比較して：

Tailwind のドキュメントはより簡潔で、図が多い；MDN のドキュメントはより詳細で、概念が多い。
Tailwind の分類はより明確で、重要なポイントを強調しやすい；MDN のドキュメントはより包括的ですが、迷いやすい。
- CSS の知識は多いですが、日常の開発ではその一部しか使用しません。
Tailwind のドキュメントは、ダークモードのサポートやレスポンシブデザインなどの重要な概念をより早く理解するのに役立ちます。
Tailwind のテーマシステムは、よりデザイン性のあるページを書くのに役立ちます。
Tailwind は強力な Playground を提供しており、ブラウザで直接学習できます。

あなたがデザイナーである場合#

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

開発者：あなたのデザインは実現が難しいです！！

しかし、もしコードでデザインを行えば、彼がそう言うことはできません。Tailwind Playground のリンクを彼に渡して、彼がさらに何か言うか見てみてください。

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

開発者はデザイン全体をコードに対応させる必要がありません
デザイナーは開発者が自分のデザインを 100% 再現することを保証できます

最後に強調したいこと#

すべての Tailwind ツールクラスが直感的で簡単であるわけではありません。例えば、flex-row は flex-direction: row; に等しいです。grid-cols-1 に対応する生成された CSS は少し複雑で、grid-template-columns: repeat(1, minmax(0, 1fr)); に等しいです。生成された CSS の意味を理解する前に、Tailwind のドキュメントだけを見続けないでください。あなたがすべきことは、MDN のドキュメントでこの属性の具体的な意味を学ぶことです。

Playground では、自動補完やマウスオーバーで特定のツールクラスに対応する生成された CSS を見ることができます。だから、CSS を知らなくても Tailwind を学び始めましょう。優れたドキュメントと Playground があなたの学習の良い助けになります。

プラグイン#

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

hyoban/tailwindcss-classname-highlight

Highlight valid Tailwind CSS class names in your code.

TypeScript282