CSS フレームワーク
WhyTailwind CSS?
Answer
デザインのルールを守ったまま、速く・ぶれずに画面を作れるから。使った分だけの CSS しか出力されないので、サイトも軽く保てます。
What is Tailwind CSS
Tailwind CSS とは
Tailwind CSS は、「余白はこれ」「文字の大きさはこれ」といった小さな部品（ユーティリティクラス）を組み合わせてデザインを作る CSS フレームワークです。HTML を見ればそのままデザインがわかるのが特徴です。
Strengths
Tailwind CSS の良いところ
- 01
デザインがぶれない
色・余白・文字サイズなどを決められた段階の中から選ぶため、人が変わってもデザインのルールが崩れにくくなります。
- 02
速く作れて、速く直せる
CSS ファイルとの行き来が減り、HTML の中で見た目を完結できます。修正するときも、どこを触ればよいかがすぐわかります。
- 03
使った分だけの CSS で軽い
実際に使ったクラスだけが出力されるため、プロジェクトが大きくなっても CSS が膨らみにくく、表示速度を保てます。
- 04
スマホ対応・ダークモードが簡単
画面幅ごとの切り替えやダークモードの指定を、クラス名に一言添えるだけで書けます。
- 05
v4 でさらに速く・シンプルに
Tailwind CSS v4 では新しいエンジンでビルドが大幅に速くなり、設定も CSS の中で完結するようになりました。
Best for
こんな案件に向いています
- 画面数の多い Web サービスや管理画面
- 複数人で同じデザインルールを守りたいプロジェクト
- React / Next.js と組み合わせて部品単位でデザインしたい場合
FAQ
よくある質問
- HTML にクラスがたくさん並んで読みにくくなりませんか？
- 同じ組み合わせを繰り返す部分は、React などのコンポーネントにまとめることで解決できます。部品ごとにデザインが閉じるため、むしろ管理しやすくなります。
- docata.jp では Tailwind CSS を使っていますか？
- docata.jp はページ数が少なく細部まで作り込みたいため、素の CSS で作っています。案件の規模や体制に合わせて使い分けています。