【豆知識】Tailwind CSSやDaisyUIなどの理解

はじめに

今回はTailwind CSSやDaisyUIなどのフレームワークについて違いが何かがいまいち理解していなかったので調べたことを自分なりにまとめてみます。

まずはTailwind CSSとDaisyUIについての理解

私は課題のアプリ制作でTailwind CSSとDaisyUIという機能を使用しています。
（そもそも「機能」という呼び方で合っているのか？）

Tailwind CSSを更に補完するものとしてDaisyUIがある？
フレームワークとTailwind CSSとDaisyUIは別物？どういう関係？

0：2つのツールについて

どちらも CSS に関連するツールです。
CSSというのはCascading Style Sheetsの略称で、Webサイトの見た目を設定するプログラミング言語になります。色やサイズ、レイアウトなどのデザインを定義する際に使用され、「シーエスエス」や「スタイルシート」とも呼ばれ役割や使い方に少し違いがあります。
HTML（Hypertext Markup Language）と共に使用されることで、Webページの装飾やアニメーション、外部リソースの組み込みなどを行うことができます。

HTMLは枠組みを作り、CSSはそれを装飾する役割
CSSとHTMLの違いについては👇下記サイトが例もあり分かりやすかったです。

1. Tailwind CSS

• どういうものか: Tailwind CSS は、ウェブページをデザインするための ユーティリティファースト（CSSは使わずにTailwind CSSが提供しているクラスのみを使用してスタイリングする考え方のこと）の CSS フレームワークです。通常の CSS のように長いクラス名を定義する代わりに、既に用意された短いクラス（ユーティリティクラス）を HTML 要素に直接適用することでデザインを行います。
  • 例: <div class="bg-blue-500 text-white p-4"> のように、クラス名でデザインを細かく調整できます。
• 特徴:
  • CSS を一から書く必要がなく、すぐに使える。
  • 非常にカスタマイズ可能で、自由にデザインを作り上げることができる。

2. DaisyUI

• どういうものか: DaisyUI は Tailwind CSS の拡張（プラグイン） で、デザインに使える コンポーネント集 です。ボタン、フォーム、カードなど、ウェブサイトでよく使われるデザインの部品（コンポーネント）が用意されており、Tailwind CSS の上に組み込まれています。
  • 例: <button class="btn btn-primary"> のように、既にスタイルされたボタンを簡単に追加できます。
• 特徴:
  • Tailwind CSS のユーティリティクラスをさらに簡単に使えるように、すぐに使えるスタイル済みコンポーネントを提供します。
  • デフォルトでテーマも用意されており、デザインを短時間で仕上げたい場合に便利。

3. 2つのツールを少し理解したうえで、どういう関係なのか？

• 1と2の説明文からもわかるように、同じものではないという事がわかります。Tailwind CSS は、ウェブページのスタイルを柔軟に作るための基礎ツール。一方、DaisyUI は Tailwind CSS をもっと使いやすくするためにデザイン済みの部品（コンポーネント）を提供するプラグインという事になります。
• Tailwind CSSの機能を拡張したものがDaisyUI。
• チートシートなんかもある。サイトのコードをそのままもってきて使える

結論

• これらは、一緒に使うことで効率的にデザインができる関係にあるという事が理解できました。
• 一つだけでもできることは増えますが、もっとデザインにこだわったりするときに2つを一緒に使用すると便利！
• 今回の記事が何か参考になれば幸いです。