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 公式ドキュメンテーション
- Tailwind CSS カスタムスペーシングの設定方法
- The Power of Utility-First CSS (by Sarah Dayan, Frontend Developer at Algolia)
以上が Tailwind CSS でのカスタムマージンの設定方法になります。もしもの時のために心に留めておいてくださいね。