👷

Next.jsのAppディレクトリで複数のTailwind Configを使い分ける

2023/02/20に公開

CSS

Tailwind使っていますか？私は使っています。
Tailwindを使っていると複数の定義をページごとに使い分けたいことがあります。
今回はNext.jsのAppディレクトリを使用してレイアウト毎にtailwindのconfigを使い分ける方法を紹介します。
まだプロダクションで使ったことはないので指摘あればコメントお願いします！

やること

同一アプリケーション内でTopページとその他のページのconfigファイルを分けて使用する。
アプリケーションとは別のスタイルをTop (LP) ページに適用する想定

ルーティング毎のファイルを作成する

TopページとTodosページを作成します。
ページの他にそれぞれlayoutとcssファイルを配置します。

└── app
  ├── layout.tsx
  ├── page.tsx
  ├── style.css
  └── todos
    ├── layout.tsx
    ├── page.tsx
    └── style.css

Tailwind configファイル定義する

LP用のconfigファイルとアプリケーション用のconfigファイルを定義します。

tailwind.lp.config.js

{
  ...,
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      primary: 'red'
    },
  },
}

tailwind.app.config.js

{
  ...,
  content: ['./app/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      primary: 'blue'
    },
  },
}

cssファイルで定義したtailwind configファイルをimportする

/app/style.css

@config "../tailwind.lp.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

/app/todos/style.css

@config "../../tailwind.app.config.js";
@tailwind base;
@tailwind components;
@tailwind utilities;

各レイアウトでcssファイルをインポートする

/app/layout.tsx

import './style.css'

/app/todos/layout.tsx

import './style.css'

このままだとTodosディレクトリからみて親ディレクトリのTopのレイアウトがTodosページにも適用されてしまいます。
また/todos/*以外のルーティングに対してtodosディレクトリ内に作成したlayoutが適用されません。

Route Groupsを適用する

└── app
  ├── (lp)
  │ ├── layout.tsx
  │ ├── page.tsx
  │ └── style.css
  └── (app)
    ├── layout.tsx
    ├── style.css
    └── todos
      └── page.tsx

LPは(lp)ディレクトリ配下、アプリケーションは(app)ディレクトリ配下に移動させます。
ファイルのインポートも修正します。
tailwind.lp.config.jsは /app/(lp) 配下、tailwind.app.config.jsは /app/(app) 配下のページに適用されるようになります。

configファイルのcontent修正する

ビルド時に不要なcssを生成しないためにconfigファイルのcontentを修正します。

tailwind.lp.config.js

{
  ...,
  content: ['./app/(lp)/**/*.{js,ts,jsx,tsx}'],
  ...
}

tailwind.app.config.js

{
  ...,
  content: ['./app/(app)/**/*.{js,ts,jsx,tsx}'],
  ...
}

プレビュー

Top	Todos
`<p class="tw-text-primary">Top Page Text Primary</p>`	`<p class="tw-text-primary">Todos Page Text Primary</p>`

最後に

Appディレクトリ外のファイルに適用するconfigはどうするのかなど考え出すと少し複雑になりそうな気がしています。
LPだけは素直にcss modulesとか使っておいた方がいいのかもしれません。

Appディレクトリを使わずに複数のtailwind.configを扱う方法を誰か教えて下さい 🙇‍♂️