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という設定ファイルを利用してカスタムマージンを設定できます。それでは早速、設定方法について詳しく見てみましょう。

.eslintrc.js の設定

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

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

Tailwind Config の設定

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

具体的なコードは次の通りです:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/pages/**/*.{js,ts,jsx,tsx,mdx}', './src/components/**/*.{js,ts,jsx,tsx,mdx}', './src/app/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
      },
      spacing: {
        10: '10px',
        20: '20px',
        30: '30px',
        40: '40px',
        50: '50px',
        60: '60px',
        70: '70px',
        80: '80px',
        90: '90px',
        380: '380px',
        390: '390px',
        400: '400px',
      },
    },
  },
  variants: {
    extend: {
      margin: ['responsive'],
    },
  },
  plugins: [],
}

カスタムマージンの利用

設定が完了したら、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 でのカスタムマージンの設定方法になります。もしもの時のために心に留めておいてくださいね。これであなたも Tailwind マスターの仲間入りです!それでは、Happy Coding!

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