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 CSS カスタムスペーシングの設定方法
- The Power of Utility-First CSS (by Sarah Dayan, Frontend Developer at Algolia)
以上が Tailwind CSS でのカスタムマージンの設定方法になります。もしもの時のために心に留めておいてくださいね。これであなたも Tailwind マスターの仲間入りです！それでは、Happy Coding！