Next.js で、Tailwind カスタムマージンを設定する

TwitterFacebookHatena

TL;DR

最近のフロントエンドでは、CSS や SCSS を使わずに、CSS-in-JS や Tailwind CSS などの CSS フレームワークを使った開発が主流になってきています。Tailwind CSS は、CSS を効率的に管理できるユーティリティファーストのフレームワークです。特に、マージンやパディングなどのスペーシングの設定が素早く行えます。

Tailwind CSS は効率的に CSS を管理できるユーティリティファーストのフレームワークです。特に、マージンやパディングなどのスペーシングの設定が素早く行えます。

しかし、Tailwind のデフォルトのスペーシングスケールでは対応しきれない場面も出てきます。そんな時はどうすればいいのでしょうか。そこで、今回は Tailwind CSS でカスタムマージンを設定する方法を解説します。

Tailwind CSS では、tailwind.config.jsという設定ファイルを利用してカスタムマージンを設定できます。それでは早速、設定方法について詳しく見てみましょう。

@tailwindcss/typography のインストール

ターミナルで以下のコマンドを実行して、@tailwindcss/typography をインストールしてください。

npm install @tailwindcss/typography

.eslintrc.js の設定

.eslintrc.js の設定を行います。

{
  "extends": ["next", "next/core-web-vitals", "prettier", "plugin:prettier/recommended"]
}

tailwind.config.ts の設定

次に、Tailwind の設定ファイルtailwind.config.jsを開きます。次に、themeプロパティの中にextendプロパティを追加します。その中にspacingプロパティを追加し、そこでカスタムマージンを定義します。

例えば、margin-top: 80px; を定義したい場合は、mt-80というクラス名を指定できるようにします。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./src/styles/*.sass",
  ],
  theme: {
    screens: {
      sm: { max: "767px" }, // 768px 以下の画面幅に適用
      // ... 他のブレークポイントも定義できます。
    },
    extend: {
      // margin 関係すべてを px で指定する
      spacing: {
        10: "10px",
        20: "20px",
        30: "30px",
        40: "40px",
        50: "50px",
        60: "60px",
        70: "70px",
        80: "80px",
        90: "90px",
        100: "100px",
        110: "110px",
        120: "120px",
        130: "130px",
        140: "140px",
        150: "150px",
        160: "160px",
        170: "170px",
        180: "180px",
        190: "190px",
        200: "200px",
        210: "210px",
        220: "220px",
        230: "230px",
        240: "240px",
        250: "250px",
        260: "260px",
        270: "270px",
        280: "280px",
        290: "290px",
        300: "300px",
        310: "310px",
        320: "320px",
        330: "330px",
        340: "340px",
        350: "350px",
        360: "360px",
        370: "370px",
        380: "380px",
        390: "390px",
        400: "400px",
      },
    },
  },
  variants: {
    extend: {
      margin: ["responsive"],
    },
  },
  plugins: [require("@tailwindcss/typography")],
};

カスタムマージンの利用

設定が完了したら、CSS クラスとして利用することができます。例えば、mt-80と指定することで、上マージンを 80px に設定することができます。他にも、mb-80と指定することで、下マージンを 80px に設定することができます。

TypeScript と Next.js を使ったコンポーネントでは、以下のように利用できます。

type Props = {
  title: string;
};

const CustomMarginComponent = ({ title }: Props) => {
  return <div className="mt-80">{title}</div>;
};

メリット

これまで解説した方法には、いくつかのメリットがあります。

  • プロジェクト全体で一貫したスペーシングが可能になります。
  • 新しい開発者がプロジェクトに参加した場合でも、スペーシングの設定方法を短時間で理解することが可能です。
  • スペーシングの変更が必要な場合、一箇所の変更で全体のスペーシングを変更することが可能です。

参考資料

ここまで読んで、「もっと詳しく学びたい！」という方は、以下のリンクを参考にしてみてください。

以上が Tailwind CSS でのカスタムマージンの設定方法になります。もしもの時のために心に留めておいてくださいね。

Jamstack での制作を依頼する

Next.js で、Tailwind カスタムマージンを設定する