TailwindCSS のメイン CSS ファイルを分割する方法
TailwindCSS は設定する属性が多いため、globals.css のようなメイン CSS ファイルが大きくなりがちです。
その結果、大きくなったメイン CSS ファイルをカテゴリ別に分割したいというニーズが自然と生まれてきます。
ここでは、そのメイン CSS ファイルを分割する方法について解説します。
その前に - PostCSS モジュールの有無について
PostCSS モジュールを導入しているどうかで分割方法が若干が異なります。
ここでは postcss モジュールを導入しているパターンを「PostCSS パターン」、純粋に Tailwind CLI だけを使っているパターンを「Tailwind CLI パターン」とし、それぞれ必要な設定・手順を説明します。
追記: 当初「PostCSS パターン」で分割後ファイルの @layer base や @layer components のブロックを削除する必要がある旨説明しておりましたが、その後の検証で削除せずとも問題無く解釈されることを確認したため、関連する記述を削除しました。
調査段階での各種バージョン情報
- Next.js: 15.0.2
- TailwindCSS: 3.4.1
- PostCSS: 8.4.49
PostCSS パターン（Next.js）
公式のインストール方法で言うと “Install Tailwind CSS using PostCSS - Tailwind CSS” の手順で構築したパターンです。
また create-next-app で作った場合も現時点ではこのパターンになります。
このパターンでは Tailwind CLI は PostCSS のプラグインとして動作するようになっています。
※ この分割方法の公式解説は“Using with Preprocessors - Tailwind CSS”にあります。
1. postcss-import モジュールのインストール
まず @import ルールををインライン化する PostCSS プラグイン postcss-importを導入します。
$ npm install -D postcss-import
2. postcss.config.mjs の編集（または作成）
create-next-app で作ったプロジェクトであれば最初から作られているはずです。
postcss.config.mjs:
postcss.config.mjs の plugins に postcss-import を加えます。
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'postcss-import': {},
tailwindcss: {},
},
};
export default config;
公式ドキュメントによれば plugins の最初に加えることが重要 とのことです。
※ というか、PostCSS の公式サンプルでは plugins の型はリストなのですが、create-next-app で作られたコンフィグではなぜかオブジェクト定義になっているのが謎ですねぇ。
3. デフォルトの @tailwind による読み込みを @import に変更し、分割する
@tailwind xxxx 形式で記述されている TailwindCSS のベースコンポーネントの読み込み部分を、@import を使用した形式に書き換える必要があります。これは、@tailwind が TailwindCSS の独自拡張であり、postcss では解釈できないためです。
@import の順序が適切になるように注意してください。順序が正しくないと、スタイルが意図した通りに適用されない可能性があります。
具体例については、以下のサンプルコードを参照してください。
元の状態
app/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* このブロックの定義は app/styles/basic.css に分割します */
h1 {
@apply text-3xl font-bold text-red-500 mt-6 mb-4;
}
}
@layer components {
/* このブロックの定義は app/styles/my-components.css に分割します */
.slate-box {
@apply border-solid border border-slate-200 bg-slate-100 bg-opacity-25;
}
}
分割後
ファイル構成:
app
├── globals.css
└── styles
├── basic.css
└── my-components.css
app/globals.css:
インポート順に解釈されるため順番には気をつける必要があります。
@import "tailwindcss/base";
@import "./styles/basic.css";
@import "tailwindcss/components";
@import "./styles/my-components.css";
@import "tailwindcss/utilities";
app/styles/basic.css:
@layer base {
h1 {
@apply text-3xl font-bold text-red-500 mt-6 mb-4;
}
}
app/styles/my-components.css
@layer components {
.slate-box {
@apply border-solid border border-slate-200 bg-slate-100 bg-opacity-25;
}
}
これで完了です。
Tailwind CLI パターン
※ こちらは公式ドキュメントに記載が見当たらなかったため、試行錯誤の結果をまとめたものです。
このパターンは、“Installation - Tailwind CSS” の手順に従って構築したものです。PostCSS を使用せず、Tailwind CLI が直接ビルドを行うため、手順がやや簡潔です。
ただし、この場合も @tailwind によるデフォルトインポートを廃止し、@import に置き換える必要があります。
※ Tailwind CLI は @tailwind を解釈できますが、@import で読み込んだ外部ファイルの定義が無視されます。
具体例を提示するほうがわかりやすいため、以下のサンプルコードをご参照ください。
元ファイル
docs/globals.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* この @layer base の定義は docs/styles/basic.css に分割します */
@layer base {
h1 {
@apply text-3xl font-bold text-red-500 mt-6 mb-4;
}
}
/* この @layer components の定義は docs/styles/my-components.css に分割します */
@layer components {
.slate-box {
@apply border-solid border border-slate-200 bg-slate-100 bg-opacity-25;
}
}
分割後
ファイル構成:
docs
├── globals.css
└── styles
├── basic.css
└── my-components.css
app/globals.css:
基本的には PostCSS パターンの時と同じです。
インポート順に解釈されるため順番には気をつける必要があります。
@import "tailwindcss/base";
@import "./styles/basic.css";
@import "tailwindcss/components";
@import "./styles/my-components.css";
@import "tailwindcss/utilities";
app/styles/basic.css:
こちらも PostCSS パターンの時と同じです。
@layer base {
h1 {
@apply text-3xl font-bold text-red-500 mt-6 mb-4;
}
}
app/styles/my-components.css
@layer components {
.slate-box {
@apply border-solid border border-slate-200 bg-slate-100 bg-opacity-25;
}
}
これで完了です。