🐙

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

2023/10/28に公開

Next.js

React

Tailwind CSS

tech

はじめに

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

TailWindとは

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

どのように使うか

<!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>

.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

<!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

<AppBar
  className="custom-appbar"
>
  {/* ...コンテンツ... */}
</AppBar>

.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

<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

<div class="custom-container">
  <button onClick={handleBackClick} class="custom-button">戻る</button>
</div>

.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

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

/* カスタムコンテナ */
.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

<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	リンクにマウスホバーしたときに下線を表示

有益資料、動画、教材

以下の物もチェックしてみてください。

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

はじめに

TailWindとは

どのように使うか

ClassNameとStyle

CSSと比較していく

有益資料、動画、教材

Tailwind

Udemy

有益資料

有益動画

Discussion