EN
TH
Tailwind CSSとは?
おしゃれなウェブサイトを制作したい時、通常はカスケーディング・スタイル・シート（Cascading Style Sheets、CSS）が使用されます。但し、CSSファイルを最初から作成するのにかなり時間がかかるため、ほとんどの開発者は現在のウェブサイト開発でCSSファイルを作成しなくなりました。これにより、Bootstrap、Foundation、Bulmaなど、様々なCSSフレームワークが公開されました。これらのCSSフレームワークは、開発者にセマンティックなクラス名を提供しています。
上記のフレームワークが提供するものと異なるウェブサイトの外観を設計したい場合は、開発者は自ら追加のクラスを作成する必要があります。但し、これによりコードが分散し、システムの保守が困難になる可能性があります。そのため、アダム・ワザン氏（Adam Wathan）は、ユーティリティファーストのCSSフレームワークとしてTailwind CSSを作りました。Tailwind CSSは高度にカスタマイズ可能であり、ウェブサイトを迅速に開発するのに役に立ちます。
Tailwind CSSを使用した例
上記のイメージのようなコンポーネントを構築するためにセマンティックなクラス名を作成する場合、ソースコードは次のようになります。
一方、Tailwind CSSを使用した場合、ソースコードは次のようになります。
Tailwind CSSフレームワークは必要なものをすべて提供している為、CSSを追加で作成する必要はありません。これは、Tailwind CSSがソフトウェア開発（コーディング）時間を大幅に短縮するのに役に立つことを示す簡単な例です。
Tailwind CSSのメリット
- 自分でCSSを書くよりもウェブサイトを迅速に設計することが可能です。
- ウェブサイト上の全ての表示を簡単に制御できます。
- 非常に柔軟でカスタマイズ可能です。
- Tailwindは、CSSファイルサイズを縮小して圧縮するツールを提供しているため、ウェブサイト上の結果をより高速に表示できます。
Tailwind CSSの備考
- Tailwind CSSが提供するクラスを勉強する時間が必要です。
- https://tailwindui.com/で既製品のコンポーネントが提供されています。
- サブクラスが多い場合、コンポーネントのクラス名は非常に長くなります。
これは、Tailwind CSSフレームワークの簡単なご紹介です。多くの開発者はTailwind CSSを推奨しているので、試してみてはいかがでしょうか。
参照元：
関連記事:
