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 を生成するかを見ることができます。

Github Repo not found

The embedded github repo could not be found…