🦕

【Next.js × Tailwind】Next.jsで始めるTailwind CSSの設定方法

2022/08/07に公開

CSS

Tailwind CSS × Next.js

Tailwindとは

概要

従来のCSSを記述するのではなく、classにTailwindが提供する予約語(ユーティリティ)を指定することでスタイルを適用するフレームワーク。
従来のCSSフレームワークと異なる点は、従来のCSSフレームワークは既にデザインされているコンポーネントを呼び出して使用するが、Tailwindの場合ある程度定められた制約はあるものの、かなり自由なスタイルを当てることができるという点
従来のCSSフレームワークを使った場合、カスタマイズしない限りフレームワークの人気が出てば出るほど似たようなデザインサイトで溢れかえるが、Tailwindの場合オリジナリティを確保しつつ容易にスタイルを適用することが可能である

以下Microsoft社によるTailwind紹介の翻訳

Tailwind CSSは、ユーティリティファーストのCSSフレームワーク。Tailwindはスタイル付けされるアイテムの機能に焦点を当てるのではなく、それがどのように表示されるべきかを中心に据える設計になっていることで、開発者は新しいスタイルを試したり、レイアウトを変更したりすることが容易になります。

利点

CSSのは結果の動作が同じように見えても、記述されているCSSが開発者によって異なるということがよく発生する。例えばサイズの指定方法(px, %, rem etc...)
TailwindはCSS本来の自由度を大きく損なうことなく、統一感のあるスタイルが適用できるように設計されており、開発者の癖が出にくくなっている
また、レスポンシブにも対応しており意識せずともこれの実装が可能になっている

インストールと設定

Next.jsプロジェクトを作成

npx create-next-app [your-project-name]
cd [your-project-name]

Tailwind CSSをインストール

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

テンプレートへのパスを設定

tailwind.config.jsというファイルが生成されているので、content配列へTailwindを使用する予定のディレクトリ/ファイルのパスを指定する。

以下例

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  ...
}

※空配列(デフォルトのまま)でも問題なし。どんな時に指定するか気になる人は以下参照

contentに追加する理由

Tailwindはデプロイ時にcontent配列内に指定されたディレクトリ/ファイルの内容のみを解釈してCSSを生成する。
ここに何も指定しない(空配列の)場合、全てのディレクトリ/ファイルの内容をTailwindが解釈しようとするため、デプロイに時間を要する。したがってTailwindを使用するディレクトリを指定することが推奨される

ファイルがこんな感じになっていればOK

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwindの命令をグローバルCSSへ追加する

./styles/global.cssの内容を全て削除し、以下の内容で書き換える

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

不要なCSSファイルを削除

TailwindCSSでのみスタイリングする場合はindex.jsでimportされているHome.module.cssは不要なのでファイルごと削除

Next.jsアプリケーションを開始する

npm run dev

以上
参考：Tailwind公式

使用方法

classNameへTailwindのユーティリティを指定する

Reactのclass指定方法と同じように定められたユーティリティを記載することでCSSが適用される

export default function Component() {
  return (
    <h1 className="text-3xl font-bold underline">
      You can use Tailwind
    </h1>
  )
}

デプロイ結果は以下のようになる

上記の３つの例ユーティリティの説明

デプロイ時にはそれぞれのcssで解釈される
text-3xl

font-size: 1.25rem;
line-height: 1.75rem;

font-bold

font-weight: 700;

underline

text-decoration: underline;

チートシートが便利

Tailwindの全ユーティリティがここにまとめられている
Tailwindで開発する際は必須となるサイト