記事「初心者向け：ReactアプリケーションでのTailwind CSSスタイリングガイド」を読んで

[KATO-Hiro]

要約

• Tailwind CSS
  • 特長・利点
  • 独自のカスタムコンポーネントを簡単に設計できる
  • デザインを柔軟にカスタマイズできる
  • ビルドプロセスで未使用のCSSを自動的に削除することで、バンドルサイズを小さく保つ
  • 考慮すべき短所
  • 学習曲線が険しい
  • HTMLやJSXに直接記述アプローチが一部では欠点とみなされることも
    • 関心の分離の原則に反していると感じる人もいる
• tailwind.config.js
  • 基本的には、直接JSX要素のclassName属性にクラス名を指定するだけで十分
  • デフォルトの設定を上書き・カスタマイズするために使用
  • プロジェクト設定全体に影響を与える可能性があるため慎重に
• クラス名の指定
  • 方法1: JSX内で直接指定
  • 方法2: 変数を使用してクラス名を指定
  • 方法3: 複数のクラス名を組み合わせる

// 方法1: JSX内で直接指定
const MyComponent = () => {
  return (
    // background-color: 500番目の青色、color: 白文字、padding: 16px (4単位 * 4)
    <div className="bg-blue-500 text-white p-4">
      This is a div with Tailwind CSS styles applied.
    </div>
  );
};

export default MyComponent;

// 方法2: 変数を使用してクラス名を指定
// 注1: 変数が常に適切に定義されているかチェック(未定義・nullでないか?)
// 注2: ユーザの入力を受け取って、クラス名を動的に取得する場合は、XSS攻撃を防ぐ
// 注3: CSSやFWとクラス名が衝突しないように
// 注4: 過度な複雑なクラス名の計算は、パフォーマンスを低下させる→useCallbackフック、useMemoフックを使用
const MyComponent = () => {
  // 変数として切り出し
  const myClassName = 'bg-red-500 text-white p-4';

  return (
    <div className={myClassName}>
      This is a div with Tailwind CSS styles applied using a variable.
    </div>
  );
};

export default MyComponent;

// 方法3: 複数のクラス名を組み合わせる
const MyComponent = () => {
  return (
    <div className="bg-blue-500 text-white p-4 rounded-lg shadow">
      This is a div with multiple Tailwind CSS classes combined.
    </div>
  );
};

export default MyComponent;

• ユーティリティクラスを使った効率的なスタイリングの実例

// p-4とm-autoクラスで、内側のpaddingの調整 + 水平方向に中央揃え
const Box = () => {
  return (
    <div className="w-48 h-48 bg-blue-500 p-4 m-auto">
      {/* p-4: paddingを4つの方向に適用 */}
      {/* m-auto: 水平方向に中央揃え */}
      <p className="text-white">Hello, Tailwind CSS!</p>
    </div>
  );
};

export default Box;

// フォームの一例
const Form = () => {
  return (
    <form className="flex flex-col space-y-4">
      <input type="text" className="px-4 py-2 border border-gray-300 rounded" placeholder="名前" />
      <input type="email" className="px-4 py-2 border border-gray-300 rounded" placeholder="メールアドレス" />
      <textarea className="px-4 py-2 border border-gray-300 rounded" placeholder="メッセージ"></textarea>
      <button type="submit" className="px-4 py-2 bg-blue-500 text-white rounded">送信</button>
    </form>
  );
};

export default Form;

• メディアクエリの活用
  • レスポンシブデザインを簡単に実現できる
  • 接頭辞として、sm:、md:、lg、xl:など画面サイズに応じて異なるスタイルを適用
  • スマホ、タブレット、デスクトップ

感想

• classNameにゴリゴリ書いていくイメージ
• ユーティリティクラスを使えばシンプルに記述できる
• ベースとなるコンポーネントを作っておけば、カスタマイズもしやすそう

Keep

+

Problem

+

Try

+

出典

https://dev-k.hatenablog.com/entry/tailwind-styling-tutorial.react-beginner