ToDoアプリの見た目を、tailwind.cssで整える。

admin

7か月前

tailwindは、css定義ファイルは使わずに、クラス指定でスタイル指定するのが斬新！

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

1 2	npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

tailwind.config.jsファイルが追加されているので、content: [] からCSS適応対象を指定する必要がある

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"],

theme: {

extend: {},

plugins: [],

}

app/globals.cssに記述

/* Base layer - サイト全体の基本的なスタイル設定が含まれます。
このレイヤーは、ブラウザ間の一貫性を保つために、HTML要素のデフォルトスタイリングをリセットまたは正規化します。例えば、<h1> や <p> などの要素に適用され、プロジェクト全体で一貫した見た目を保証します。
HTML要素のデフォルトスタイリングをリセットまたは正規化します。
*/
@tailwind base;

/* Components layer - 再利用可能なUIコンポーネントのスタイルを定義します。
コンポーネントレイヤーでは、再利用可能なUIコンポーネントのクラスを定義します。これにより、プロジェクト全体で一貫性のあるコンポーネントスタイルを簡単に適用できます。
ボタンやカードなどのコンポーネントのデザインをここで管理します。 */
@tailwind components;

/* Utilities layer - ユーティリティクラスが含まれます。
ユーティリティレイヤーは、スタイリングの微調整に役立つクラスを提供します。これにより、開発者はマージン、パディング、テキストの色、フォントサイズなどを簡単に調整でき、迅速にレスポンシブデザインを実現できます。
マージン、パディング、テキストサイズといったスタイルを細かく調整するためのクラスが提供されます。 */
@tailwind utilities;

/* Base layer - サイト全体の基本的なスタイル設定が含まれます。

このレイヤーは、ブラウザ間の一貫性を保つために、HTML要素のデフォルトスタイリングをリセットまたは正規化します。例えば、<h1> や <p> などの要素に適用され、プロジェクト全体で一貫した見た目を保証します。

HTML要素のデフォルトスタイリングをリセットまたは正規化します。

@tailwind base;

/* Components layer - 再利用可能なUIコンポーネントのスタイルを定義します。

コンポーネントレイヤーでは、再利用可能なUIコンポーネントのクラスを定義します。これにより、プロジェクト全体で一貫性のあるコンポーネントスタイルを簡単に適用できます。

ボタンやカードなどのコンポーネントのデザインをここで管理します。 */

@tailwind components;

/* Utilities layer - ユーティリティクラスが含まれます。

ユーティリティレイヤーは、スタイリングの微調整に役立つクラスを提供します。これにより、開発者はマージン、パディング、テキストの色、フォントサイズなどを簡単に調整でき、迅速にレスポンシブデザインを実現できます。

マージン、パディング、テキストサイズといったスタイルを細かく調整するためのクラスが提供されます。 */

@tailwind utilities;

  return (
    <main className="p-4">
      <div className="max-w-xl mx-auto">
        <ul className="space-y-2">
          {todos.map((todo, index) => (
            <li key={index} className="flex justify-between items-center bg-gray-100 p-2 rounded">
              <p className="text-sm text-gray-800">{todo}</p>
              <button className="bg-red-500 text-white px-4 py-1 rounded hover:bg-red-700" onClick={() => deleteTodo(index)}>
                完了
              </button>
            </li>
          ))}
        </ul>
        <div className="mt-4">
          <input type="text" value={text} onChange={changeText} className="border border-gray-300 p-2 rounded w-full" />
          <button className="mt-2 w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-700" onClick={addTodos}>
            追加
          </button>
        </div>
      </div>
    </main>
  );

return (

{todos.map((todo, index) => (

<button className="bg-red-500 text-white px-4 py-1 rounded hover:bg-red-700" onClick={() => deleteTodo(index)}>

完了

</button>

</li>

))}

</ul>

追加

</button>

</div>

</main>

);

p-4: これはパディングを全方向に1rem（16px）追加します。
max-w-xl: 最大幅をxlサイズ（36remまたは576px）に設定します。
mx-auto: 左右のマージンを自動に設定し、要素を水平中央に配置します。
space-y-2: 要素内の子要素（縦方向）の間に0.5rem（8px）のスペースを設定します。
bg-gray-100: 背景色を灰色の100番（非常に薄い灰色）に設定します。
p-2: 全方向のパディングを0.5rem（8px）追加します。
rounded: 要素の角を丸めます。
text-sm: テキストのサイズを小さく設定します（約0.875remまたは14px）。
text-gray-800: テキストの色を灰色の800番（濃い灰色）にします。
bg-red-500: ボタンの背景色を赤色の500番に設定します。
text-white: テキストの色を白に設定します。
px-4, py-1: X方向（左右）に1rem（16px）、Y方向（上下）に0.25rem（4px）のパディングを追加します。
hover:bg-red-700: マウスオーバー時に背景色を赤色の700番に変更します。
border, border-gray-300: 境界線を設定し、その色を灰色の300番にします。
bg-blue-500, hover:bg-blue-700: ボタンの背景色を青色の500番に設定し、マウスオーバー時には700番に変更します。

背景色の指定は、bg-色の名前-番号(50から950まで)
https://tailwindcss.com/docs/background-color

マージン(周りの余白)
mt-2

m = margin(全四辺)
mt = margin-top
mb = margin-bottom
mr = margin-right
ml = margin-left
mx = margin-x軸(leftとright)
my = margin-y軸(topとbottom)

paddingも同じ、pt-2だとpadding top 2*4pixel

bg-blue-500 hover:bg-blue-700
ボタンなどマウスオーバーされたら、ボタンの色を変える。

・・・なんとなくは分かってきたので、後は実践あるのみか！？
問題は、tailwindのclassを覚えても、Webデザインをどうしていいのか分からない

関連記事