Tailwind CSS の導入

モダンフロントエンドでは、CSS や SCSS を直接書くのではなく、効率化のために Tailwind CSS や、Emotion などの CSS in JS ライブラリを使ってスタイルを定義することが多くなってきました。

デザインを簡単に実装するために、CSS フレームワーク（例：Tailwind CSS、Bootstrap、Material-UI など）を導入することができます。例として、Tailwind CSS を導入する手順を説明します。

まず、Tailwind CSS とそのプラグインをインストールします。

npm install tailwindcss postcss autoprefixer

Tailwind CSS の設定

次に、プロジェクトのルートにtailwind.config.jsとpostcss.config.jsファイルを作成します。

tailwind.config.js:

module.exports = {
  purge: ['./src/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

そして、stylesディレクトリにglobals.cssファイルを作成し、以下の内容を追加します。

styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

最後に、_app.tsxファイルにglobals.cssをインポートします。

import '../styles/globals.css'

これで、Tailwind CSS がプロジェクトに導入されました。

次のコードは、Tailwind CSS を使用した、3 カラムのグリッドレイアウトのサンプルです。

import { FC } from 'react'

const Grid: FC = () => {
  return (
    <div className="grid grid-cols-3 gap-40">
      <div className="bg-gray-100 h-64"></div>
      <div className="bg-gray-200 h-64"></div>
      <div className="bg-gray-300 h-64"></div>
      <div className="bg-gray-400 h-64"></div>
      <div className="bg-gray-500 h-64"></div>
      <div className="bg-gray-600 h-64"></div>
    </div>
  )
}

export default Grid

grid クラスを使用して、グリッドコンテナを作成し、grid-cols-3 クラスを使用して 3 つのカラムを設定しています。また、gap-40 クラスを使用して、アイテム間の間隔を 40px に設定しています。各アイテムは、背景色と高さが設定された div 要素で構成されています。

記述方法は、Tailwind CSS Cheat Sheetを参照してください。

独自のカスタム設定を定義する

用意されたクラスだけでは、使いにくかったり実装したいデザインを実現できない場合があります。そのような場合は、独自のカスタム設定を定義することができます。

例えば、mt-10 クラスを使用して margin-top を 10px に設定したい場合、当然ですが Tailwind CSS には、mt-10 クラスが定義されていません。そのため、mt-10 クラスを使用すると、エラーが発生します。

Tailwind CSS のカスタム設定を追加するには、tailwind.config.js ファイルに変更を加えます。margin-top を追加するには、以下のように設定してください。

module.exports = {
  theme: {
    extend: {
      spacing: {
        10: '10px',
        20: '20px',
        30: '30px',
        40: '40px',
        // ...
        200: '200px',
      },
    },
  },
  variants: {},
  plugins: [],
}

上記の設定で、mt-10 から mt-200 までのカスタム margin-top が利用可能になります。