一撃で理解できる! CSSのフレームワークTailwindをCSSと比較しながら解説!

# はじめに
まず自分はフロントエンド開発の案件に初参画をしてTailWindを初めて使いました。
実際に使ってみたら使いやすかったのでこの記事にまとめてみました。

# TailWindとは
```CSSのフレームワーク```です。最近利用者が増えているみたいです。
使ってみた感想はとにかく***CSSの実装が簡単***です。
最初はCSSが頭から抜けなかったのですが、実際に書いて見るとすごく使いやすいです。


# どのように使うか

```html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="heading">Hello, World!</h1>
        <p class="text">This is a simple example using CSS.</p>
    </div>
</body>
</html>
```

```css
.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f0f0f0;
}

.heading {
    font-size: 24px;
    color: #333;
}

.text {
    font-size: 16px;
    color: #666;
}
```
これがHTMLとCSSのコードです。Tailwindに修正したらどうなるでしょうか。

⚫︎Tailwind
```html
<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mx-auto p-4 bg-gray-200">
        <h1 class="text-2xl text-black">Hello, World!</h1>
        <p class="text-base text-gray-600">This is a simple example using Tailwind CSS.</p>
    </div>
</body>
</html>
```
このようにファイル１つで実装できました。

> 引用　　ChatGPT

### ClassNameとStyle
まず1点注意として***ClassNameとStyleで書き方が変わる***ので注意してください。

***ClassName***は***スタイルを適用するためのクラス名をHTML要素に追加***します。
***style***は通常の***CSSで使用されるようなプロパティと値の組み合わせ***です。

# CSSと比較していく
実際にCSSと書き方を比較していきます。自分はNext.jsを使った現場で使用しました。
(あくまで書き方を伝えるための記事です。)ChatGPTからも引用させていただきます。
理由はソースコードを公開できないからです。

⚫︎CSS

```jsx
<AppBar
  className="custom-appbar"
>
  {/* ...コンテンツ... */}
</AppBar>
```
```css
.custom-appbar {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px; /* text-xs 相当のフォントサイズを12px に設定 */
  background-color: red;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px; /* h-10 相当の高さを40px に設定 */
  width: 40px; /* w-10 相当の幅を40px に設定 */
}
```

⚫︎Tailwind
```tsx
<AppBar
className="flex justify-center text-center text-xs bg-red text-white  absolute inset-x-0 bottom-0 h-10 　w-10" // 必要なスタイルに変更する
```
|Tailwind|説明|
|---|---|
|flex|要素の表示をフレックスボックスに設定。横並びまたは縦並びに配置するためのレイアウト方法。flexクラスを使用すると、要素内の子要素が横並びに配置|
|justify-center|横軸（主軸）方向で要素内のコンテンツを中央に配置|
|bg-red-500|赤い背景色|
|text-white|テキストの色を白|
|inset-x-0|X軸（左右）の位置を0|
|bottom-0|下に配置|
|h-10|高さを10単位|
|w-10|要素の幅（width）を10単位|
|text-xs|テキストのフォントサイズを小さなサイズに設定|


別のコードも例に出します。


⚫︎CSS
```jsx
<div class="custom-container">
  <button onClick={handleBackClick} class="custom-button">戻る</button>
</div>
```

```css
.custom-container {
  margin: 280px;
  text-align: center;
}

.custom-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 20px 20px; /* 上下のパディングを20pxに設定 */
  cursor: pointer;
  border-radius: 30px;
  width: 150px;
  height: 100px;
}
```

⚫︎Tailwind
```tsx
return (
    <div style={{ margin: "280px", textAlign: "center"}}>
      <button
        onClick={handleBackClick}
        style={{ 
          backgroundColor:"blue",
          color:"white",
          border:"none",
          padding:"10px 20px",
          cursor:"pointer",
          borderRadius:"30px",
          width:"150px",
          height:"100px",
        }}
      >戻る</button>
    </div>
  );
```
|Tailwind|説明|
|---|---|
|margin|コンテナの外側のマージンを280px|
|textAlign|テキストを中央揃え|
|backgroundColor: "blue":|ボタンの背景色を青|
|color: "white":|ボタンのテキストの色を白|
|border: "none":|ボタンに境界線を設定しない|
|padding: "10px 20px":| paddingを上下10px、左右20pxに設定|
|cursor: "pointer"|ボタンがクリック可能|
|borderRadius: "30px":|ボタンの角を30pxの丸くする|
|width: "150px":|ボタンの幅を150px|
|height: "100px":| ボタンの高さを100px|


他にも色々と比較してみます。
⚫︎CSS
```css
/* カスタムコンテナ */
.custom-container {
  margin: 280px;
  text-align: center;
  background-color: #f0f0f0;
}

/* カスタムボタン */
.custom-button {
  background-color: blue;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 30px;
  width: 150px;
  transition: background-color 0.3s, transform 0.2s;
}

/* ホバー時のカスタムボタン */
.custom-button:hover {
  background-color: #0073e6;
  transform: scale(1.05);
}

/* フォーカス時のカスタムボタン */
.custom-button:focus {
  outline: none;
}

/* テキストスタイル */
.custom-text {
  font-size: 18px;
  color: #333;
  line-height: 1.5;
}

/* リンクスタイル */
.custom-link {
  color: #0073e6;
  text-decoration: none;
}

/* リンクホバー時のスタイル */
.custom-link:hover {
  text-decoration: underline;
}
```

⚫︎Tailwind
```jsx
<div class="m-10 text-center bg-gray-200">
  <button onClick={handleBackClick} class="bg-blue-500 text-white px-4 py-2 rounded-full w-32 hover:bg-blue-700 transform scale-105 focus:outline-none">戻る</button>
</div>

<p class="text-lg text-gray-700 my-4">これはTailwind CSSの例です。リンクを<a href="#" class="text-blue-500 hover:underline">クリック</a>してみてください。</p>
```
実際のコードで説明していきます。
|Tailwind|説明|
|---|---|
|m-10|マージンを指定。mはマージンのことで-10は上下左右のマージンを10単位|
|text-center|テキストの中央揃え|
|bg-gray-200|背景色をグレーに設定　。数字はカラーコードで、200は色の濃さ|
|bg-blue-500|背景色を青に設定|
|text-white|ボタンの文字の色を白|
|px-4 py-2|paddingを横に4単位、縦に2単位|
|rounded-full|ボタンの角を丸くする|
|w-40|ボタンの幅を40単位|
|hover:bg-blue-500|ボタンにマウスホバーしたときの背景色を濃い青|
|transform scale-105|ボタンにマウスホバーしたときに少し大きく拡大|
|focus:outline-none|ボタンがフォーカスされた時にアウトラインを非表示|
|text-lg|テキストのサイズを大きめ|
|text-gray-500|テキストの色を灰色|
|my-4|上下のマージンを4単位。横ならyではなくx|
|hover:underline|リンクにマウスホバーしたときに下線を表示|



# 有益資料、動画、教材
以下の物もチェックしてみてください。

### Tailwind
https://nerdcave.com/tailwind-cheat-sheet

### Udemy

https://www.udemy.com/course/tailwindcss-for-beginner/

### 有益資料
https://qiita.com/Yuki_Oshima/items/708986d62ea3a773d6a5

### 有益動画
https://www.youtube.com/watch?v=5TymbaeyV-0