フロントエンド開発において、Tailwind CSS は今や必須のツールとなっていますね。しかし、macOS 環境で Yarn の Plug'n'Play（PnP）モードを使いながら、PostCSS や ESLint としっかり連携させるのは、意外と手順が複雑で困ってしまうこともあるでしょう。この記事では、そんな悩みをスッキリ解決する最短ルートをご紹介します。

この記事を読めば、macOS で Tailwind CSS を導入し、Yarn PnP・PostCSS・ESLint との連携を完璧に設定できるようになりますよ。

背景

Tailwind CSS の人気と導入課題

Tailwind CSS は、ユーティリティファーストの CSS フレームワークとして、開発スピードを劇的に向上させてくれます。クラス名をベースにスタイリングできるため、CSS ファイルを行ったり来たりする必要がなく、コンポーネントに集中できるのが魅力ですね。

近年、多くのプロジェクトで採用されていますが、その導入には以下のような背景があります。

• モダンなビルドツール: Vite、Next.js、Nuxt などのフレームワークと組み合わせて使うことが一般的
• パッケージマネージャーの多様化: npm、Yarn、pnpm など選択肢が増え、それぞれに特有の設定が必要
• Yarn PnP モードの普及: Yarn v2（Berry）以降では、node_modules を使わない PnP モードがデフォルトとなり、高速化とディスク容量削減が実現

macOS 環境での開発環境

macOS は多くの開発者に愛用されており、Homebrew によるパッケージ管理や、ターミナルベースの開発環境が整っています。しかし、Yarn PnP モードは node_modules を生成しないため、従来の方法では PostCSS や ESLint が正しく動作しないことがあるんです。

以下の図は、Tailwind CSS を中心とした開発環境の全体像を示しています。

mermaidCopy codeflowchart TB
  dev["開発者"] -->|コードを記述| editor["VS Code / エディタ"]
  editor -->|Tailwind クラス使用| html["HTML/JSX/TSX"]
  html -->|ビルド| build["ビルドツール<br/>(Vite/Next.js)"]
  build -->|PostCSS 処理| postcss["PostCSS"]
  postcss -->|Tailwind CSS 解析| tailwind["Tailwind CSS"]
  tailwind -->|最適化 CSS 生成| output["dist/styles.css"]
  editor -->|ESLint 実行| eslint["ESLint"]
  eslint -->|コード品質チェック| html
  yarn["Yarn PnP"] -.->|依存解決| postcss
  yarn -.->|依存解決| tailwind
  yarn -.->|依存解決| eslint

図で理解できる要点:

• Tailwind CSS はビルドツールと PostCSS を経由して最終的な CSS を生成します
• Yarn PnP はすべての依存関係を一元管理し、従来の node_modules を使いません
• ESLint はエディタから直接実行され、コード品質をチェックします

課題

Yarn PnP モードでの依存解決問題

Yarn PnP モードでは、node_modules ディレクトリが存在しないため、従来の方法でパッケージを探すツールが動作しません。具体的には以下のような問題が発生します。

#	問題	影響範囲
1	PostCSS が Tailwind CSS プラグインを見つけられない	ビルドエラー
2	ESLint が設定ファイルや共有設定を読み込めない	リントエラー
3	エディタの拡張機能が正しく動作しない	開発体験の低下
4	TypeScript の型解決が失敗する	型チェックエラー

PostCSS と Tailwind CSS の連携問題

PostCSS は Tailwind CSS を処理するために必須のツールですが、Yarn PnP 環境では以下のエラーが発生することがあります。

typescriptCopy code// エラー例
Error: Cannot find module 'tailwindcss'
Require stack:
- /path/to/postcss.config.js

エラーコード: MODULE_NOT_FOUND

発生条件:

• Yarn PnP モードで postcss.config.js から tailwindcss を require している場合
• .pnp.cjs ファイルが正しく参照されていない場合

ESLint の設定問題

ESLint も同様に、共有設定やプラグインを見つけられないエラーが頻発します。

bashCopy code# エラーメッセージ例
Error: Failed to load plugin 'tailwindcss' declared in '.eslintrc.js': Cannot find module 'eslint-plugin-tailwindcss'

エラーコード: ESLint configuration error

発生条件:

• ESLint プラグインを .eslintrc.js で指定しているが、Yarn PnP が解決できない
• エディタの ESLint 拡張機能が PnP に対応していない

以下の図は、Yarn PnP モードでの問題を整理したものです。

mermaidCopy codeflowchart LR
  config["設定ファイル<br/>(postcss.config.js)"] -->|require| search["パッケージ検索"]
  search -->|従来の方法| nm["node_modules/<br/>探索"]
  nm -.->|存在しない| error1["Error: Cannot<br/>find module"]
  search -->|PnP 対応| pnp[".pnp.cjs<br/>による解決"]
  pnp -->|成功| pkg["パッケージ"]
  eslint_config[".eslintrc.js"] -->|plugin 読込| search2["プラグイン検索"]
  search2 -->|従来の方法| nm2["node_modules/<br/>探索"]
  nm2 -.->|存在しない| error2["ESLint<br/>configuration error"]
  search2 -->|PnP 対応| pnp2[".pnp.cjs<br/>による解決"]
  pnp2 -->|成功| plugin["プラグイン"]

図で理解できる要点:

• 従来の node_modules 探索は失敗し、エラーが発生します
• .pnp.cjs ファイルを正しく参照することで、パッケージが解決されます

解決策

Yarn のセットアップ

まず、macOS に Yarn をインストールし、PnP モードを有効にします。

Homebrew で Node.js をインストール

bashCopy code# Homebrew で Node.js をインストール
brew install node

Corepack で Yarn を有効化

Node.js v16.10 以降では、Corepack が同梱されているため、これを使って Yarn を有効化しましょう。

bashCopy code# Corepack を有効化
corepack enable

# Yarn のバージョンを指定（Berry）
corepack prepare yarn@stable --activate

プロジェクトの初期化

新規プロジェクトを作成し、Yarn PnP モードを設定します。

bashCopy code# プロジェクトディレクトリを作成
mkdir my-tailwind-project
cd my-tailwind-project

# package.json を生成
yarn init -y

Yarn のバージョンを設定

bashCopy code# Yarn Berry（v3 以降）を使用
yarn set version stable

この時点で、プロジェクトルートに .yarnrc.yml と .pnp.cjs が生成されます。

Tailwind CSS と PostCSS のインストール

次に、Tailwind CSS と PostCSS を導入します。

必要なパッケージをインストール

bashCopy code# Tailwind CSS、PostCSS、autoprefixer をインストール
yarn add -D tailwindcss postcss autoprefixer

Tailwind CSS の初期設定

bashCopy code# tailwind.config.js と postcss.config.js を生成
yarn tailwindcss init -p

このコマンドで以下の 2 つのファイルが作成されます。

• tailwind.config.js: Tailwind CSS の設定ファイル
• postcss.config.js: PostCSS の設定ファイル

tailwind.config.js の編集

生成された設定ファイルを、プロジェクトに合わせて編集しましょう。

javascriptCopy code/** @type {import('tailwindcss').Config} */
module.exports = {
  // スキャン対象のファイルを指定
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

解説:

• content: Tailwind CSS がクラス名を検出するファイルパスを指定します
• プロジェクトの構造に応じて、パスを適切に設定してください

postcss.config.js の編集

PostCSS の設定ファイルも確認しましょう。

javascriptCopy codemodule.exports = {
  plugins: {
    // Tailwind CSS プラグインを有効化
    tailwindcss: {},
    // ベンダープレフィックスを自動追加
    autoprefixer: {},
  },
};

解説:

• tailwindcss: Tailwind CSS の処理を実行します
• autoprefixer: ブラウザ互換性のためのプレフィックスを自動追加します

CSS ファイルの作成

Tailwind CSS のディレクティブを含む CSS ファイルを作成します。

bashCopy code# src ディレクトリを作成
mkdir -p src

src/styles.css を作成

cssCopy code/* Tailwind CSS のベース、コンポーネント、ユーティリティを読み込む */
@tailwind base;
@tailwind components;
@tailwind utilities;

解説:

• @tailwind ディレクティブにより、Tailwind CSS のスタイルが展開されます
• このファイルをビルドすることで、最終的な CSS が生成されます

ビルドスクリプトの設定

package.json にビルドスクリプトを追加しましょう。

jsonCopy code{
  "scripts": {
    "build:css": "postcss src/styles.css -o dist/styles.css",
    "watch:css": "postcss src/styles.css -o dist/styles.css --watch"
  }
}

解説:

• build:css: CSS をビルドして dist​/​styles.css に出力します
• watch:css: ファイルの変更を監視し、自動で再ビルドします

ビルドの実行

bashCopy code# CSS をビルド
yarn build:css

成功すると、dist​/​styles.css に最適化された CSS が生成されます。

ESLint の導入と設定

次に、ESLint を導入し、Tailwind CSS との連携を設定します。

ESLint とプラグインのインストール

bashCopy code# ESLint 本体をインストール
yarn add -D eslint

# Tailwind CSS 用の ESLint プラグインをインストール
yarn add -D eslint-plugin-tailwindcss

ESLint の初期設定

bashCopy code# ESLint の設定を対話形式で作成
yarn eslint --init

以下のような質問に答えて設定を進めます。

#	質問	推奨回答
1	How would you like to use ESLint?	To check syntax and find problems
2	What type of modules does your project use?	JavaScript modules (import/export)
3	Which framework does your project use?	React / Vue / None
4	Does your project use TypeScript?	Yes / No
5	Where does your code run?	Browser
6	What format do you want your config file to be in?	JavaScript

.eslintrc.js の編集

生成された .eslintrc.js に Tailwind CSS プラグインを追加します。

javascriptCopy codemodule.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    // Tailwind CSS のルールを追加
    'plugin:tailwindcss/recommended',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    // Tailwind CSS プラグインを有効化
    'tailwindcss',
  ],
  rules: {
    // Tailwind CSS のクラス名の順序をチェック
    'tailwindcss/classnames-order': 'warn',
    // 無効なクラス名を検出
    'tailwindcss/no-custom-classname': 'warn',
  },
};

解説:

• plugin:tailwindcss​/​recommended: Tailwind CSS 推奨のルールセットを適用します
• tailwindcss​/​classnames-order: クラス名の順序を統一し、可読性を向上させます
• tailwindcss​/​no-custom-classname: 未定義のクラス名を検出し、タイポを防ぎます

package.json にリントスクリプトを追加

jsonCopy code{
  "scripts": {
    "build:css": "postcss src/styles.css -o dist/styles.css",
    "watch:css": "postcss src/styles.css -o dist/styles.css --watch",
    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:fix": "eslint src/**/*.{js,jsx,ts,tsx} --fix"
  }
}

解説:

• lint: ESLint でコードをチェックします
• lint:fix: 自動修正可能なエラーを修正します

ESLint の実行

bashCopy code# リントを実行
yarn lint

エラーがあれば、以下のように表示されます。

bashCopy code# エラー例
/path/to/src/App.jsx
  10:15  warning  Unexpected custom class name 'custom-btn'  tailwindcss/no-custom-classname

✖ 1 problem (0 errors, 1 warning)

解決方法:

1. tailwind.config.js でカスタムクラスを定義する
2. または、.eslintrc.js で該当ルールを調整する

Yarn PnP と ESLint の連携

Yarn PnP 環境では、ESLint が正しくプラグインを解決できるように、追加の設定が必要です。

.yarnrc.yml の設定確認

プロジェクトルートの .yarnrc.yml に以下が含まれていることを確認しましょう。

yamlCopy code# Yarn PnP モードを有効化（デフォルト）
nodeLinker: pnp

# SDK ファイルの自動生成を有効化
pnpMode: loose

解説:

• nodeLinker: pnp: PnP モードを明示的に指定します
• pnpMode: loose: より柔軟なパッケージ解決を行います

エディタ向けの SDK をインストール

VS Code などのエディタで ESLint を正しく動作させるため、Yarn の SDK をインストールします。

bashCopy code# VS Code 用の SDK を生成
yarn dlx @yarnpkg/sdks vscode

このコマンドにより、.yarn​/​sdks ディレクトリと .vscode​/​settings.json が生成されます。

.vscode/settings.json の内容確認

生成されたファイルには以下のような設定が含まれています。

jsonCopy code{
  "eslint.nodePath": ".yarn/sdks",
  "typescript.tsdk": ".yarn/sdks/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

解説:

• eslint.nodePath: ESLint が Yarn PnP の依存関係を解決できるようにします
• VS Code の ESLint 拡張機能がこの設定を読み込み、正しく動作します

TypeScript を使う場合の追加設定

TypeScript プロジェクトの場合、追加の設定が必要です。

TypeScript のインストール

bashCopy code# TypeScript をインストール
yarn add -D typescript @types/node

tsconfig.json の作成

bashCopy code# tsconfig.json を生成
yarn tsc --init

Yarn PnP 用のプラグイン追加

bashCopy code# TypeScript 用の PnP プラグインをインストール
yarn add -D @yarnpkg/pnp

tsconfig.json の編集

生成された tsconfig.json に以下を追加します。

jsonCopy code{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "strict": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", ".yarn"]
}

解説:

• moduleResolution: "node": Node.js 形式のモジュール解決を使用します
• Yarn PnP は自動的に .pnp.cjs を参照します

以下の図は、Yarn PnP 環境での各ツールの連携を示しています。

mermaidCopy codeflowchart TB
  vscode["VS Code"] -->|SDK 経由| eslint_ext["ESLint 拡張機能"]
  eslint_ext -->|.yarn/sdks 参照| pnp[".pnp.cjs"]
  pnp -->|依存解決| eslint_pkg["eslint-plugin-<br/>tailwindcss"]
  postcss_config["postcss.config.js"] -->|require| pnp2[".pnp.cjs"]
  pnp2 -->|依存解決| tailwind_pkg["tailwindcss<br/>パッケージ"]
  build_tool["ビルドツール"] -->|PostCSS 実行| postcss_config
  tsconfig["tsconfig.json"] -->|型解決| pnp3[".pnp.cjs"]
  pnp3 -->|依存解決| types["@types/*"]

図で理解できる要点:

• .pnp.cjs がすべての依存解決の中心となっています
• VS Code の拡張機能は .yarn​/​sdks を経由して PnP に対応します
• PostCSS や TypeScript も同様に .pnp.cjs を参照します

具体例

シンプルな React プロジェクトでの実装

実際に React プロジェクトで Tailwind CSS を使う例を見てみましょう。

プロジェクトの作成

bashCopy code# プロジェクトディレクトリを作成
mkdir react-tailwind-pnp
cd react-tailwind-pnp

# package.json を初期化
yarn init -y

# Yarn Berry に切り替え
yarn set version stable

必要なパッケージをインストール

bashCopy code# React と React DOM をインストール
yarn add react react-dom

# 開発用のツールをインストール
yarn add -D vite @vitejs/plugin-react
yarn add -D tailwindcss postcss autoprefixer
yarn add -D eslint eslint-plugin-react eslint-plugin-tailwindcss

Vite の設定ファイルを作成

プロジェクトルートに vite.config.js を作成します。

javascriptCopy codeimport { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// Vite の設定
export default defineConfig({
  plugins: [react()],
  // 開発サーバーの設定
  server: {
    port: 3000,
  },
});

解説:

• Vite は高速なビルドツールで、React との相性が抜群です
• @vitejs​/​plugin-react により、React の JSX を処理できます

Tailwind CSS の設定

bashCopy code# Tailwind CSS の設定ファイルを生成
yarn tailwindcss init -p

生成された tailwind.config.js を編集します。

javascriptCopy code/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      // カスタムカラーを追加
      colors: {
        primary: '#3B82F6',
        secondary: '#10B981',
      },
    },
  },
  plugins: [],
};

解説:

• content: HTML と React コンポーネントのパスを指定します
• theme.extend: Tailwind CSS のデフォルトテーマを拡張できます

CSS ファイルの作成

src​/​index.css を作成し、Tailwind CSS のディレクティブを記述します。

cssCopy code/* Tailwind CSS のベーススタイルを読み込む */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* カスタムコンポーネントスタイルを追加 */
@layer components {
  .btn-primary {
    @apply bg-primary text-white px-4 py-2 rounded hover:bg-blue-600 transition;
  }
}

解説:

• @layer components: 再利用可能なコンポーネントスタイルを定義します
• @apply: Tailwind CSS のユーティリティクラスを組み合わせます

React コンポーネントの作成

src​/​App.jsx を作成し、Tailwind CSS を使ったコンポーネントを実装します。

jsxCopy codeimport React from 'react';

function App() {
  return (
    <div className='min-h-screen bg-gray-100 flex items-center justify-center'>
      <div className='max-w-md w-full bg-white shadow-lg rounded-lg p-6'>
        <h1 className='text-3xl font-bold text-gray-800 mb-4'>
          Tailwind CSS with Yarn PnP
        </h1>
        <p className='text-gray-600 mb-6'>
          macOS 環境で Tailwind CSS を最短導入できました!
        </p>
        <button className='btn-primary w-full'>
          始める
        </button>
      </div>
    </div>
  );
}

export default App;

解説:

• Tailwind CSS のユーティリティクラスを使ってスタイリングしています
• btn-primary は先ほど @layer components で定義したカスタムクラスです

エントリーポイントの作成

src​/​main.jsx を作成し、React アプリをマウントします。

jsxCopy codeimport React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// Tailwind CSS を含む CSS ファイルをインポート
import './index.css';

// React 18 の新しい API を使用
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

解説:

• index.css をインポートすることで、Tailwind CSS が適用されます
• Vite が自動的に PostCSS を実行し、CSS を処理します

HTML ファイルの作成

プロジェクトルートに index.html を作成します。

htmlCopy code<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>Tailwind CSS with Yarn PnP</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- Vite が自動的にスクリプトを挿入 -->
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

解説:

• Vite はこの HTML ファイルをエントリーポイントとして使用します
• type="module" により、ESM 形式でスクリプトを読み込みます

package.json にスクリプトを追加

jsonCopy code{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint src/**/*.{js,jsx}",
    "lint:fix": "eslint src/**/*.{js,jsx} --fix"
  }
}

解説:

• dev: 開発サーバーを起動します
• build: 本番用にビルドします
• preview: ビルド結果をプレビューします

開発サーバーの起動

bashCopy code# 開発サーバーを起動
yarn dev

ブラウザで http:​/​​/​localhost:3000 にアクセスすると、Tailwind CSS が適用された React アプリが表示されます。

ESLint の設定

.eslintrc.js を作成し、React と Tailwind CSS のルールを設定します。

javascriptCopy codemodule.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:tailwindcss/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: ['react', 'tailwindcss'],
  rules: {
    'react/prop-types': 'off',
    'tailwindcss/classnames-order': 'warn',
    'tailwindcss/no-custom-classname': 'off',
  },
  settings: {
    react: {
      version: 'detect',
    },
  },
};

解説:

• plugin:react​/​jsx-runtime: React 17 以降の新しい JSX 変換に対応します
• tailwindcss​/​no-custom-classname: カスタムクラスを許可するために off にしています

VS Code SDK のインストール

bashCopy code# VS Code 用の SDK を生成
yarn dlx @yarnpkg/sdks vscode

これで VS Code の ESLint 拡張機能が Yarn PnP 環境で正しく動作します。

ビルドとデプロイ

bashCopy code# 本番用にビルド
yarn build

dist ディレクトリに最適化されたファイルが生成され、デプロイ可能な状態になります。

以下の図は、開発からビルドまでのフローを示しています。

mermaidCopy codeflowchart LR
  dev_start["yarn dev 実行"] --> vite_start["Vite 起動"]
  vite_start --> load_html["index.html 読込"]
  load_html --> load_jsx["main.jsx 読込"]
  load_jsx --> load_css["index.css 読込"]
  load_css --> postcss_run["PostCSS 処理"]
  postcss_run --> tailwind_run["Tailwind CSS<br/>クラス検出・生成"]
  tailwind_run --> hot_reload["HMR<br/>(Hot Module Replacement)"]
  hot_reload --> browser["ブラウザ表示"]
  edit["コード編集"] --> hot_reload
  build_start["yarn build 実行"] --> vite_build["Vite ビルド"]
  vite_build --> optimize["コード最適化<br/>・圧縮"]
  optimize --> output["dist/ 出力"]

図で理解できる要点:

• 開発時は HMR により、コード編集がリアルタイムで反映されます
• ビルド時は最適化と圧縮が行われ、本番環境向けのファイルが生成されます
• PostCSS と Tailwind CSS は Vite により自動的に処理されます

よくあるエラーと解決方法

実際に開発していると、いくつかのエラーに遭遇することがあります。ここでは代表的なエラーと解決方法をご紹介しますね。

エラー 1: PostCSS plugin tailwindcss not found

エラーコード: Error: Cannot find module 'tailwindcss'

エラーメッセージ:

bashCopy codeError: Cannot find module 'tailwindcss'
Require stack:
- /path/to/postcss.config.js

発生条件:

• Yarn PnP 環境で postcss.config.js が正しく設定されていない
• Tailwind CSS がインストールされていない

解決方法:

1. Tailwind CSS がインストールされているか確認

bashCopy code# インストール確認
yarn why tailwindcss

2. インストールされていない場合はインストール

bashCopy codeyarn add -D tailwindcss

3. .pnp.cjs が存在するか確認

bashCopy code# ファイル確認
ls -la .pnp.cjs

4. Yarn のキャッシュをクリア

bashCopy codeyarn cache clean
yarn install

エラー 2: ESLint couldn't determine the plugin

エラーコード: ESLint couldn't determine the plugin "tailwindcss" uniquely

エラーメッセージ:

bashCopy codeESLint couldn't determine the plugin "tailwindcss" uniquely.

- /path/to/.yarn/cache/eslint-plugin-tailwindcss-...
- /path/to/node_modules/eslint-plugin-tailwindcss

発生条件:

• Yarn PnP と node_modules が混在している
• VS Code の ESLint 拡張機能が正しく設定されていない

解決方法:

1. node_modules を削除

bashCopy code# node_modules を削除
rm -rf node_modules

2. Yarn SDK を再生成

bashCopy code# SDK を再生成
yarn dlx @yarnpkg/sdks vscode

3. VS Code をリロード

VS Code で Cmd + Shift + P を押し、Developer: Reload Window を実行します。

エラー 3: Tailwind CSS classes not being purged

症状:

• 本番ビルドで CSS ファイルサイズが大きすぎる
• 未使用のクラスが削除されていない

発生条件:

• tailwind.config.js の content 設定が正しくない
• ファイルパスが間違っている

解決方法:

1. tailwind.config.js の content を確認

javascriptCopy codemodule.exports = {
  content: [
    // 正しいパスを指定
    './index.html',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  // ...
};

2. ビルド時にログを確認

bashCopy code# ビルドログを詳細表示
yarn build --debug

3. パスが正しく解決されているか確認

Tailwind CSS は設定されたパスに基づいてファイルをスキャンします。相対パスが正しいか確認しましょう。

まとめ

この記事では、macOS 環境で Tailwind CSS を Yarn PnP・PostCSS・ESLint と連携させる最短ルートをご紹介しました。

以下のポイントを押さえることで、スムーズに導入できます。

#	ポイント	詳細
1	Yarn Berry（v3 以降）を使用	Corepack で有効化し、PnP モードを活用
2	Tailwind CSS と PostCSS を正しくインストール	yarn add -D tailwindcss postcss autoprefixer
3	設定ファイルを適切に編集	tailwind.config.js と postcss.config.js
4	ESLint プラグインを導入	eslint-plugin-tailwindcss でコード品質を向上
5	Yarn SDK をエディタに適用	VS Code 拡張機能が PnP に対応

Yarn PnP モードは、従来の node_modules 方式よりも高速で、ディスク容量も節約できる優れた仕組みです。しかし、その恩恵を最大限に受けるには、各ツールとの連携を正しく設定することが重要ですね。

この記事を参考に、ぜひ快適な Tailwind CSS 開発環境を構築してみてください。エラーに遭遇しても、焦らず一つひとつ解決していけば、必ずうまくいきますよ。

皆さんの開発がより楽しく、効率的になることを願っています。

関連リンク

• Tailwind CSS 公式サイト
• Tailwind CSS ドキュメント（インストール）
• Yarn 公式サイト
• Yarn PnP ドキュメント
• PostCSS 公式サイト
• ESLint 公式サイト
• eslint-plugin-tailwindcss GitHub
• Vite 公式サイト
• Homebrew 公式サイト
• Corepack ドキュメント