「Tailwind config js ない」と検索して、この記事にたどり着いた方は、きっとこんな疑問や不安を感じているのではないでしょうか？
「Tailwind CSSを導入したのに、tailwind.config.jsファイルが見当たらない…」
「設定ファイルがないけど、ちゃんとカスタマイズできるの？」
実はその疑問、とても自然なものなんです。
Tailwind CSS v4からは大きな仕様変更があり、これまで当たり前だったtailwind.config.jsが”なくても使える”ようになりました。とはいえ、突然の変化に戸惑う方も多いはず。特に、v3以前の経験がある方や、プラグインを使いたい場合には、「本当にこのままで大丈夫？」と感じてしまうのも無理はありません。
この記事では、そんな不安を解消するために、Tailwind CSSの設定方法がどのように変わったのかをわかりやすく解説しています。
CSSファーストの新しい考え方から、設定ファイルなしでもテーマや色を管理する方法、旧バージョンからの移行手順、さらには設定ファイルが必要になるケースまで、幅広くカバーしています。
はじめに：なぜ「tailwind.config.js」がないのか？
Tailwind CSS を使って開発を始めようとしたとき、真っ先に「tailwind.config.js がない」という状態に戸惑った方も多いのではないでしょうか。特に、他のプロジェクトやチュートリアルではこの設定ファイルが存在していたのに、自分のプロジェクトには見当たらない……。このような状況は、Tailwind CSS のバージョン変更や初期設定の変化が原因であることがほとんどです。
あなたのプロジェクトにtailwind.config.jsがない理由
Tailwind CSS を導入する方法はいくつかありますが、最近では CDN 経由や PostCSS 経由、さらにはフレームワーク統合など、選択肢が非常に広がっています。これにより、「tailwind.config.js」を必ずしも手動で作成しない構成が一般化しています。
以下のようなケースでは、設定ファイルが自動生成されなかったり、そもそも不要な場合もあります。
よくある原因
- npx tailwindcss init を実行していない（初期化されていない）
- CDN バージョンで使用している（設定ファイルは使われない）
- Tailwind CSS v4以降を使っている（CSSファースト設定により config.js が不要になる場合あり）
- Next.js や Vite などのツールチェーンで自動構成されている
解決方法：まずは初期化してみる
まず、tailwind.config.js を生成したい場合は、以下のコマンドを実行してください。
npx tailwindcss init -p
このコマンドで、以下の2つのファイルが生成されます：
tailwind.config.js— Tailwind の設定ファイルpostcss.config.js— Tailwind をビルドに統合するためのPostCSS設定
// tailwind.config.js（初期生成時の内容）
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
解説：
content: Tailwind がクラスを検出する対象ファイルtheme: テーマのカスタマイズ領域（カラー、フォントなど）plugins: プラグインを読み込む場合に指定する配列
旧バージョン（v3以前）におけるtailwind.config.jsの役割と標準的な配置パス
Tailwind CSS v3 までは、tailwind.config.js は非常に重要な役割を果たしていました。このファイルは以下のような用途に使用されていました。
- 独自のカラーパレットの定義
- レスポンシブブレークポイントの変更
- フォントファミリーやスペーシングの調整
- プラグインの読み込みと設定
通常の配置パス
ほとんどの場合、tailwind.config.js はプロジェクトルートに置かれます。例えば以下のような構成です：
my-project/
├── tailwind.config.js
├── postcss.config.js
├── src/
│ └── index.css
├── package.json
└── ...
役割の例
// tailwind.config.js のカスタムテーマ例
module.exports = {
theme: {
extend: {
colors: {
primary: '#1da1f2',
secondary: '#14171a',
},
fontFamily: {
sans: ['Helvetica', 'Arial', 'sans-serif'],
},
},
},
}
補足：公式ドキュメントも確認しよう
設定ファイルやバージョンごとの違いに関しては、公式ドキュメントの確認が最も信頼できます。以下のリンクから、使用中のバージョンに応じた設定方法を参照してください。
Tailwind CSS v4での大きな仕様変更：CSSファースト設定とは？
Tailwind CSS v4 の登場は、これまでの開発スタイルに大きな転換をもたらしました。特に注目すべきなのは、「CSSファースト設定」という新しい思想です。この変更によって、Tailwind の運用において tailwind.config.js が不要なケースが増え、「tailwind.config.js ない」という状態がむしろ自然な構成となる場面もあります。
ここでは、このCSSファースト設定の背景と、Tailwind CSS v4 において tailwind.config.js がなぜ不要になったのか、その理由を詳しく解説します。
Tailwind CSS v4でtailwind.config.jsが不要になった理由
v4 からは、これまで設定ファイルで行っていたスタイルのカスタマイズを、CSSファイル内に直接記述できるようになりました。これにより、Tailwind CSS の設定がより直感的かつ柔軟に扱えるようになっています。
主な変更点
@theme、@source、@pluginなどの ディレクティブをCSS内で使用可能- カスタムカラーやフォントなどを CSS変数で柔軟に定義
- tailwind.config.js はオプション扱いに
つまり、設定ファイルをわざわざ用意しなくても、スタイルはCSSに集約して完結できるのです。
CSSファースト設定の概要とメリット
CSSファーストとは？
CSSファースト設定とは、Tailwind CSS の構成を JavaScript（tailwind.config.js）ではなく、CSSファイル内で直接記述するアプローチのことです。
これは、これまでの「設定はJavaScript、スタイルはCSS」という分離型アーキテクチャから、「設定とスタイルをCSSに統合する」という方向へとシフトしたことを意味します。
主なメリット
学習コストが下がる
初心者でも CSS ファイルの中でそのまま設定できるため、Tailwind の導入障壁が下がります。
ファイル構成がシンプルに
tailwind.config.js を作らずに済むため、ファイル数が減り、プロジェクト構成がスッキリします。
コンポーネント志向との親和性が高い
CSS モジュールや CSS-in-JS などとの併用もしやすくなり、より柔軟な構成が可能になります。
CSSファースト設定を使った基本例
以下のように、index.css などのメインCSSファイル内にテーマやカスタマイズを記述します。
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* カスタムカラーとフォントの定義 */
@theme {
colors: {
primary: #1da1f2;
secondary: #14171a;
};
fontFamily: {
sans: ['Helvetica', 'Arial', 'sans-serif'];
};
}
解説：
@theme: CSS内でカスタムテーマを宣言できる新ディレクティブ- Tailwind がこの情報をもとにユーティリティクラスを自動生成
このように、従来の設定内容を tailwind.config.js に書かなくても、すべてCSSファイル内で完結できるのが v4 の大きな特徴です。
注意点と補足
- Tailwind CSS v4 を使用しているかどうかは、
package.jsonの依存関係から確認できます。 - 一部の Tailwind プラグインはまだ
tailwind.config.jsを前提としている場合があります（詳しくは後述の FAQ セクションで解説）。
// package.json の例
"devDependencies": {
"tailwindcss": "^4.0.0",
...
}
参考リンク（信頼性の高いリソース）
Tailwind CSS v4の新しい設定方法
Tailwind CSS v4 では、「CSSファースト」な設定方式が導入され、従来の tailwind.config.js を使わずとも、CSS ファイル内だけで柔軟にスタイルをカスタマイズできるようになりました。特に @theme、@source、@plugin などの新しいディレクティブの登場により、Tailwind の拡張性と保守性はさらに向上しています。
このセクションでは、それぞれのディレクティブの使い方と、CSS 変数を用いたカスタマイズ手法について、具体的なコード例を交えて解説していきます。
@themeディレクティブを使ったテーマ設定の具体例
@theme ディレクティブは、Tailwind CSS v4 で導入された最も基本的かつ強力なディレクティブの1つです。カラー、フォント、ブレークポイントなど、これまで tailwind.config.js で記述していたテーマ設定を、CSS ファイル内で直接定義できるようになります。
使用例：カスタムカラーとフォントを設定
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
colors: {
primary: #1da1f2;
accent: #ff5e57;
};
fontFamily: {
sans: ['"Open Sans"', 'sans-serif'];
};
}
解説：
colorsでprimaryとaccentを追加fontFamilyにカスタムフォント"Open Sans"を追加- Tailwind はこれを元に
text-primaryやbg-accentのようなクラスを自動生成
@sourceや@pluginディレクティブの基本的な使い方
@source ディレクティブとは？
Tailwind CSS のコンパイル対象となるファイルを CSS で定義できるのが @source ディレクティブです。これは従来の content 配列に相当する役割を果たします。
使用例：
@source {
"./index.html";
"./src/**/*.{js,ts,jsx,tsx}";
}
これにより、Tailwind は上記のファイル群からクラス名を抽出して、使用されているユーティリティクラスのみを出力します。
@plugin ディレクティブとは？
Tailwind CSS のプラグインを CSS 側で読み込むためのディレクティブです。tailwind.config.js を使わなくても、CSS 上で完結してプラグインの登録が可能になります。
使用例：
@plugin require('@tailwindcss/typography');
この例では、公式の @tailwindcss/typography プラグインを読み込んでいます。これにより、.prose クラスなどが使用可能になります。
CSS変数を活用したカラーやフォントのカスタマイズ
Tailwind CSS v4 では、CSS カスタムプロパティ（変数）と連携することで、より柔軟なデザイン変更が可能になりました。テーマに CSS 変数を組み込むことで、ダークモード対応や動的テーマ切り替えなどにも対応しやすくなります。
使用例：CSS変数でダークモード対応
:root {
--color-primary: #1da1f2;
--color-background: #ffffff;
}
.dark {
--color-primary: #0a84ff;
--color-background: #0d1117;
}
@theme {
colors: {
primary: var(--color-primary);
background: var(--color-background);
};
}
ポイント：
:rootでデフォルトのテーマカラーを定義.darkクラスでオーバーライド（JSやフレームワークで動的切り替え可能）- Tailwind のユーティリティクラス（例：
bg-primary）がこれらの変数を参照するようになる
カスタムユーティリティと併用する例
@layer utilities {
.text-shadow {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
}
このように、v4 では CSS 自体を中心に Tailwind をカスタマイズできるようになり、設定とスタイルの一体化がより簡潔に行えるようになっています。
旧バージョンからv4へのマイグレーションガイド
Tailwind CSS v4 のリリースに伴い、多くのプロジェクトで「tailwind.config.js がない状態」や「CSS内での設定記述」への移行が求められるようになりました。
このセクションでは、Tailwind CSS v3 以前から v4 への具体的な移行手順と、移行時に起こりがちなトラブルの回避方法を詳しく解説します。
旧設定ファイルの内容をCSSファイルに移行する手順
v3 以前では、主に tailwind.config.js に記述していた設定項目（theme や plugins など）を、v4 では CSS ファイル内に直接書けるようになりました。
以下は、旧ファイルから新形式へ移行するステップバイステップガイドです。
Step 1：旧設定ファイルのバックアップを取る
まずは現在の設定ファイルをコピーして保管しておきましょう。
cp tailwind.config.js tailwind.config.backup.js
Step 2：新しいCSS構成ファイルを用意する
v4では、index.css や app.css のようなメインCSSファイルに設定を統合します。
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
colors: {
primary: #1da1f2;
accent: #ff5e57;
};
fontFamily: {
sans: ['"Open Sans"', 'sans-serif'];
};
}
@plugin require('@tailwindcss/forms');
解説：
@theme：旧configファイルのtheme相当@plugin：旧configのplugins相当
Step 3：@source を使ってパージ対象を指定
旧 tailwind.config.js の content 配列は、v4 では CSS内の @source で記述します。
@source {
"./index.html";
"./src/**/*.{js,ts,jsx,tsx}";
}
これにより、v4 のJITエンジンが最適化対象を正しく把握できるようになります。
Step 4：不要になった tailwind.config.js を削除（任意）
すべての設定をCSS内に移行し終えたら、tailwind.config.js を削除して構成をシンプルにできます。
rm tailwind.config.js
ただし、使用しているライブラリやプラグインが tailwind.config.js を必要とする場合はこの限りではありません。
よくあるトラブルとその解決策
Tailwind CSS v4 への移行でよく見られるトラブルと、その対処法を以下にまとめます。
@theme が無視される・クラスが反映されない
原因： Tailwind v4 を使用していない、またはCSS構成に誤りがある
対策：
package.jsonを確認して、Tailwindのバージョンが^4.0.0以上であることを確認postcss.config.jsが適切に設定されていることを確認
@plugin ディレクティブで読み込みエラーが出る
原因： プラグインの依存関係が正しくインストールされていない
対策：
npm install @tailwindcss/forms
CSS内で読み込む場合でも、npm や yarn での事前インストールは必要です。
クラスが生成されない・未使用扱いされる
原因： @source の指定に誤りがある
対策：
- パスの記述ミスをチェック（例：
./src/**ではなく./src/**/*） - JSX / TSX などの拡張子を正しく指定する
@source {
"./src/**/*.{js,ts,jsx,tsx,html}";
}
実際のコード例とコマンド
以下は、v3 プロジェクトから v4 に移行する基本的な構成の全体像です。
旧tailwind.config.js（v3）
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
primary: '#1da1f2',
},
},
fontFamily: {
sans: ['"Open Sans"', 'sans-serif'],
},
},
plugins: [require('@tailwindcss/forms')],
};
新しいCSSファイル（v4）
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
colors: {
primary: #1da1f2;
};
fontFamily: {
sans: ['"Open Sans"', 'sans-serif'];
};
}
@plugin require('@tailwindcss/forms');
@source {
"./src/**/*.{js,ts,jsx,tsx}";
}
tailwind.config.js をどうしても再生成したい場合
npx tailwindcss init -p
このコマンドで、tailwind.config.js と postcss.config.js の雛形を再生成できます。
ただし v4 ではこれらのファイルはオプション扱いであることを忘れないようにしましょう。
保守性と拡張性を考えたベストプラクティス
Tailwind CSS v4では tailwind.config.js が不要になったとはいえ、プロジェクトの規模やチーム構成によっては、あえて設定ファイルを使う方が保守性・拡張性に優れるケースもあります。
このセクションでは、CSSファーストの利点を活かしつつ、状況に応じて設定ファイルを併用する戦略や、フレームワーク（Vite / Next.js / Astro など）との連携時に注意すべきポイントを解説します。
必要なときだけ設定ファイルを導入する判断基準
Tailwind CSS v4 では、小〜中規模のプロジェクトであれば CSS のみで設定を完結できるようになりましたが、以下のようなケースでは tailwind.config.js を明示的に再導入することを推奨します。
導入を検討すべきケース：
- プラグインが JS 設定を要求する（例：
tailwind-variantsなど） - チームでテーマ設定を共有・拡張したい
- 設定の再利用性や型安全性を担保したい（TypeScript化）
- 設定値を JS 内で読み込みたい（
resolveConfigの利用）
併用戦略の例
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
brand: '#f472b6',
},
},
},
plugins: [],
};
/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
@theme {
colors: {
primary: #1da1f2;
};
}
このように、@theme と tailwind.config.js を併用して、柔軟にスタイル管理を行うことが可能です。
@theme と tailwind.config.js の併用戦略
Tailwind v4 では、CSS 内の @theme で上書きした値が優先されます。
つまり、tailwind.config.js で定義した colors があっても、@theme で同じキーを定義すれば CSS 側の設定が反映されます。
優先順位の例
// tailwind.config.js
module.exports = {
theme: {
colors: {
primary: '#000000',
},
},
};
/* styles.css */
@theme {
colors: {
primary: #1da1f2;
};
}
結果：text-primary は #1da1f2（CSS側）が適用される
この仕組みにより、既存のTailwind設定を維持しつつ、プロジェクト単位で部分的にテーマ変更が可能になります。
Vite、Next.js、Astroなどとの連携での注意点
各種ビルドツールやフレームワークとの連携時にも、設定方法が v3 以前と異なるため注意が必要です。
Viteとの連携
注意点：
postcss.config.jsを用意する必要があるtailwind.config.jsを使わない場合もvite.config.js内で CSS を明示的に読み込む
// vite.config.js
import postcss from './postcss.config.js';
export default {
css: {
postcss,
},
};
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
Next.jsとの連携
Next.js はビルド環境が複雑なため、tailwind.config.js が前提のプラグインも少なくありません。
tailwind.config.jsを導入して安定動作を担保globals.cssに@themeを併用することで柔軟性を保つ
Astroとの連携
Astro は CSS ファースト設計との相性が非常に良く、v4のメリットを最大限に活かせます。
- CSS ファイル内の
@themeで完結できる - Astro コンポーネント単位で柔軟にテーマを適用できる
- グローバル設定が不要な小規模サイトにも最適
おすすめのベストプラクティスまとめ
| シチュエーション | ベストな戦略 |
|---|---|
| 小規模・静的サイト | CSSのみで完結（@theme中心） |
| 中〜大規模SPA | tailwind.config.js + @theme併用 |
| ダークモードや動的テーマ | CSS変数 + @theme |
| フレームワーク統合 | 各フレームワークに合わせて柔軟対応 |
よくある質問（FAQ）
Q1. tailwind.config.ts って何？TypeScriptで設定できるの？
はい、Tailwind CSS v3以降、公式には tailwind.config.ts をサポートしています。これは設定ファイルを TypeScript で記述できるというもので、型安全性や補完の向上が期待できます。
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config: Config = {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
primary: '#1da1f2',
},
},
},
plugins: [],
};
export default config;
注意点
ts-nodeをプロジェクトにインストールしておく必要があります。tailwind.config.tsを使うと、CSSファースト構成（v4）の軽快さはやや損なわれるため、小規模プロジェクトでは非推奨。
Q2. プラグインが設定ファイルを前提としているときの対処法は？
一部の Tailwind プラグインは、従来の tailwind.config.js に依存しています。たとえば以下のようなケースです：
tailwindcss-animatetailwind-variants- カスタムプラグインで
addUtilities等を使用するもの
対処法
- 必要に応じて
tailwind.config.jsをプロジェクトルートに追加します。 - v4の CSS 構成と併用することで、柔軟に運用可能です。
// tailwind.config.js
module.exports = {
plugins: [require('tailwindcss-animate')],
};
CSS側には従来通りの設定を残すことができます。
Q3. CSSファイルに設定を書くだけで本当に大丈夫？
結論から言えば、小規模〜中規模のプロジェクトではCSSだけで十分です。Tailwind v4 では以下のような利点が得られます：
- 設定の即時反映（ホットリロード）
- ファイル数の削減
- 記述場所がスタイルファイルに集約されて保守性アップ
ただし、次のような場合には従来の設定ファイルとの併用も視野に入れましょう。
- 設定の再利用が多い
- チームで設定値のレビューを行う
- プロジェクトがモノレポで構成されている
Q4. tailwind.config.js が見つからないと怒られるのはなぜ？
一部のパッケージやビルドツールが tailwind.config.js の存在を前提にしている場合、エラーになることがあります。
例：npx tailwindcss build 実行時
Error: Cannot find module './tailwind.config.js'
解決策：
tailwind.config.jsを一時的に作成しておく- 空の設定ファイルでもOK：
// tailwind.config.js
module.exports = {};
- あるいは CLI 実行時に
-configオプションで明示的に指定
npx tailwindcss --config ./styles.css
Q5. @source の書き方を間違えたらどうなる？
@source に誤ったパスやファイル形式を記述すると、Tailwind の JIT が対象ファイルを読み込めず、ユーティリティクラスが生成されない原因となります。
よくある間違い
@source {
'./src/**'; /* ❌ 不完全なglob指定 */
}
正しい記述例：
@source {
'./src/**/*.{js,ts,jsx,tsx,html}';
}
対応のヒント：
- glob構文に不慣れな場合は
fast-globのドキュメントを参考にすると良いでしょう。 - エディタの補完やLSPで静的チェックされないため、書き間違いに注意。
Q6. 最新情報を追いたいときはどこを見るべき？
Tailwind CSS はアップデートが頻繁なため、公式情報を定期的に確認する習慣が重要です。
まとめ：tailwind.config.js がなくても大丈夫。必要に応じて使い分けよう
Tailwind CSS v4では、これまで当たり前のように使われていた tailwind.config.js が、必須ではなくなりました。
Tailwind CSSがv4から取り入れた「CSSファースト」な設計により、テーマの設定やカスタマイズがCSSファイルだけで完結できるようになりました。これにより、学習コストやファイルの管理がグッと楽になります。
でも、すべてのケースで設定ファイルが不要になるわけではないんですよね。
特にプラグインを使いたいときや、チーム開発・大規模なサイトでは、tailwind.config.js を必要に応じて併用する柔軟さが求められます。
まずはCSSだけで試してみて、物足りなくなったら設定ファイルを導入してみましょう。
