Tailwind CSS v4 と SCSS の組み合わせ

プログラミング
公開 2025年8月23日 最終更新 2025年9月27日
Article Image

目次

はじめに

Tailwind CSS とは

Tailwind CSS はユーティリティファースト（utility-first）な CSS フレームワークです。Bootstrap のように「ボタン」や「ナビゲーションバー」などの UI コンポーネントがあらかじめ用意されているものとは異なり、ユーティリティクラスを組み合わせてデザインを構築するスタイルが特徴となります。新たに独自の CSS ファイルを書かなくても、用意されたユーティリティクラスを組み合わせるだけで良いので、効率的に Web ページを作成することができます。

Tailwind CSS の例

<button class="px-4 py-2 bg-blue-500 text-white rounded">ボタン</button>
  • px-4: 左右 1rem（16px） の空白
  • py-2: 上下 0.5rem（8px） の空白
  • bg-blue-500: 背景色は青（#3B82F6、500 は色の濃さを表します）
  • text-white: 文字色は白（#FFFFFF）
  • rounded: 角を丸める（border-radius: 0.25rem）

Tailwind CSS のデメリットとその解決手段

Tailwind CSS は効率的にページを作成できる反面、ユーティリティクラスの指定が増えると HTML ファイルの class 属性の記述が肥大化し、マークアップの見通しが悪くなってしまうことがあります。そのため、頻繁に使う共通的なスタイルの組み合わせは CSS ファイルにクラスとして定義し、ページ固有のスタイルについてはユーティリティクラスを利用する、といった使い分けを行いたい場合もあります。Tailwind CSS には、このような複数のスタイルをまとめて CSS ファイルに定義できる @apply ディレクティブという仕組みが用意されています。

@apply ディレクティブの例

.btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
}

<button class="btn">ボタン</button>

Tailwind CSS と SCSS の併用、バージョン４の登場

@apply だけでも十分に強力な機能ですが、css については SCSS（Sass）の変数やネスト、制御構文を使用したほうが再利用性・保守性が高くなる場合もあるため、Tailwind CSS と SCSS を組み合わせる というのが一つの解決策でした。

ただし、Tailwind CSS v4 の登場によって状況は変化しています。
Tailwind の公式ドキュメントでは、

Sass, Less, and Stylus
Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

Since Tailwind is designed for modern browsers, you actually don't need a preprocessor for things like nesting or variables, and Tailwind itself will do things like bundle your imports and add vendor prefixes.

（Google 翻訳）
Tailwind CSS v4.0 は、特定のワークフロー向けに設計されたフル機能の CSS ビルドツールであり、Sass、Less、Stylus などの CSS プリプロセッサと併用するようには設計されていません。

Tailwind CSS 自体をプリプロセッサと考えてください。Sass を Stylus と併用しないのと同じ理由で、Tailwind を Sass と併用すべきではありません。

Tailwind は最新のブラウザ向けに設計されているため、ネストや変数などの処理にプリプロセッサは必要ありません。Tailwind 自体がインポートのバンドルやベンダープレフィックスの追加などを行います。

「Tailwind を Sass と併用すべきではありません」と明記されています。

  • Sass の $ 変数 → CSS 標準の カスタムプロパティ（CSS 変数） や Tailwind v4 の @theme で代替
  • Sass のネスト → モダンブラウザでは CSS 標準のネストを使える

などの状況を考慮すると、もはやプリプロセッサは不要で、必要なことは Tailwind だけで賄える、という主張なのかもしれません。Sass でできることがどこまで Tailwind CSS で可能なのかは現時点では私も把握しきれていませんが、Tailwind を使用するのであれば Sass とは決別すべき、という方針が明確に示されています。

とはいえ、現在の Sass 資産を一朝一夕に Tailwind に移行できるわけではないため、移行期間として Tailwind CSS v4 と SCSS の組み合わせを継続し、徐々に SCSS を使わないスタイルへ移行するのが現実的でしょう。

以下では、Tailwind CSS v4 と SCSS を組み合わせる方法について解説します。

前提条件

  • Node.js がインストールされていること（執筆時点では v22.19.0（LTS 版） を使用）
node -v
v22.19.0
  • Visual Studio 2022、Visual Studio Code で動作確認

基本的な構成

基本的な考え方は v3 と変わりません。
scss → sass でトランスパイル → 中間 css → tailwind でコンパイル → 最終 css
になります。

以下のような３つのコンポーネントを包含する SCSS ファイルを例にします。

  • hoge.scss
@use "component-a.scss";
@use "component-b.scss";
@use "component-c.scss";

  • 変換フロー
flowchart TD
    CA(component-a.scss) -.-> X
    CB(component-b.scss) -.-> X
    CC(component-c.scss) -.-> X
    X(hoge.scss) -->| npx sass | I[temp.css]
    ENTRY(tailwind-entry.css) --> T
    I --> T["tailwind.css<br>（中間 CSS）"]
    T --> | npx @tailwindcss/cli | CSS["hoge.css<br>（最終 CSS）"]

フロントエンドツールのインストール

プロジェクトに package.json を追加

プロジェクトフォルダに移動し、npm init を実行します

cd [プロジェクトフォルダ]
npm init -y

プロジェクトフォルダの直下に package.json が作成されます。

sass のインストール

npm install sass --save-dev

Tailwind CSS のインストール

npm install tailwindcss @tailwindcss/cli --save-dev

Tailwind v4 ではコマンドラインツールのパッケージが tailwindcss から @tailwindcss/cli に変更されています。

設定

Tailwind v4 では npx tailwindcss init -p を使用して設定ファイル tailwind.config.js を作成する機能は削除されました。
js ファイルは使用せず、以下の @import "tailwindcss" ディレクティブを記述した CSS ファイルが設定ファイル兼エントリーファイルになります。
（v3 以前の @tailwind ディレクティブは廃止されています）

@import "tailwindcss";

Tailwind でコンパイルする際は入力ファイルに @import "tailwindcss" があればよいのですが、Sass でコンパイルする時に入力ファイルに @import "tailwindcss" が含まれていると、

>npx sass wwwroot/css/hoge.scss wwwroot/css/tailwind.css

Error: Can't find stylesheet to import.
  ╷
1 │ @import "tailwindcss";
  │          ^^^^^^^^^^^^^
  ╵
  wwwroot\css\hoge.scss 1:10  root stylesheet

このようなエラーになってしまいます。
これは、Tailwind のディレクティブが @tailwind から @import に変更されたことにより、Sass が @import を処理しようとして、 _tailwindcss.scss ファイルを読み込みにいき、「ファイルが存在しない」というエラーが発生することが原因です。このエラーを回避するため、Sass と併用する場合には Tailwind の設定部分を別ファイルに分け、Sass がエラーを吐かないようにする工夫が必要になります。

flowchart TD
    X(hoge.scss) -->| npx sass | I[temp.css]
    ENTRY("tailwind-entry.css<br>（設定・エントリファイル）") --> | cat | T
    I --> | cat | T["tailwind.css<br>（中間 CSS）"]
  • tailwind-entry.css
@import "tailwindcss";

Tailwind の@import ディレクティブは別ファイル（tailwind-entry.css）に記述しておき、Sass のトランスパイル後のファイルと結合して、Tailwind の入力ファイルにします。

ビルド

1hoge.scss を temp.css にコンパイル

flowchart TD
    CA(component-a.scss) -.-> X
    CB(component-b.scss) -.-> X
    CC(component-c.scss) -.-> X
    X(hoge.scss) -->| npx sass | I[temp.css]

npx sass wwwroot/css/hoge.scss wwwroot/css/temp.css
  • npx sass → Sass（SCSSファイル）をコンパイルするコマンド
  • wwwroot/css/hoge.scss → 入力ファイル（SCSSファイル）
  • wwwroot/css/temp.css → 出力ファイル（CSSファイル）

2tailwind-entry.css と temp.css を結合して tailwind.css を作成

flowchart TD
    ENTRY(tailwind-entry.css) --> T["tailwind.css<br>（中間 CSS）"]
    I[temp.css] --> T

cat wwwroot/css/tailwind-entry.css wwwroot/css/temp.css > wwwroot/css/tailwind.css

Windows 環境の場合は以下

type wwwroot\\css\\tailwind-entry.css wwwroot\\css\\temp.css > wwwroot\\css\\tailwind.css

3tailwind.css を hoge.css にコンパイル

flowchart TD
    T["tailwind.css<br>（中間 CSS）"] --> | npx @tailwindcss/cli | CSS["hoge.css<br>（最終 CSS）"]

npx @tailwindcss/cli -i wwwroot/css/tailwind.css -o wwwroot/css/hoge.css
  • npx @tailwindcss/cli → Tailwind CLI でCSSをビルド
  • -i wwwroot/css/tailwind.css → 入力ファイル
  • -o wwwroot/csshoge.css → 出力ファイル（最終的に使うCSS）

自動ビルド

ファイルの変更を検知して自動的に Tailwind のコンパイルを実行するには --watch オプションを追加します。

npx @tailwindcss/cli -i wwwroot/css/tailwind.css -o wwwroot/css/hoge.css --watch

ただし、これでは scss ファイルを修正した時に実行されません。sass にも --watch オプションはありますが、ファイルを結合する必要があるため、--watch だけでは不十分です。いくつかの解決法がありますが、ここでは拡張機能を使用した方法を紹介します。

package.json に npm scripts を追加

自動ビルドを実現するための下準備として、一連のコマンドを一つのコマンドで実行できるように npm スクリプトを追加しておきます。

  • package.json
{
  "devDependencies": {
    "@tailwindcss/cli": "^4.1.13",
    "sass": "^1.92.0",
    "tailwindcss": "^4.1.13"
  },
  "scripts": {
    "build:css": "npx sass wwwroot/css/hoge.scss wwwroot/css/temp.css --no-source-map && type wwwroot\\css\\tailwind-entry.css wwwroot\\css\\temp.css > wwwroot\\css\\tailwind.css && npx @tailwindcss/cli -i wwwroot/css/tailwind.css -o wwwroot/css/hoge.css"
  }
}

以下のコマンドで一連のコマンドが実行されることを確認します。

npm run build:css

Visual Studio 2022 の場合

Visual Studio 2022 の場合は Tailwind CSS VS2022 Editor Support を使用します。この拡張機能には Tailwind のビルドだけでなく、Razor、HTML、CSS ファイル内での Tailwind の自動補完（IntelliSense）や、クラス名の自動ソートなどの機能があります。
ファイル保存時の自動ビルドを行うには、拡張機能の設定画面で以下のように設定します（図1）。

図1図1

  • Build type: OnSave
    ファイルの保存時にビルドを実行

  • OnSave trigger: file extensions: .css;.scss;.html;.cshtml
    保存時にビルドを実行するファイルの拡張子（セミコロン区切り）

  • Build script: build:css
    package.json に追加した npm スクリプトの名称

  • Override build: True
    True にしないと build:css の後にデフォルトの npx @tailwindcss/cli が実行される

  • 拡張機能の設定ファイルの変更
    設定画面以外にプロジェクトフォルダ直下に tailwind.extension.json という拡張機能の設定ファイルが自動作成されますので、以下のように設定します。

{
  "$schema": "https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/refs/heads/main/tailwind.extension.schema.json",
  "BuildFiles": [
    {
      "Input": "wwwroot\\css\\tailwind-entry.css",
      "Output": "",
      "Behavior": "Default"
    }
  ],
  "PackageConfigurationFile": "package.json",
  "CustomRegexes": {
    "Razor": {
      "Override": false,
      "Values": []
    },
    "HTML": {
      "Override": false,
      "Values": []
    },
    "JavaScript": {
      "Override": false,
      "Values": []
    }
  },
  "UseCli": false
}
  • PackageConfigurationFile": "package.json"
    デフォルトでは null になっています。package.json を設定しないと npm スクリプトの名称が認識されないので設定が必要。

他はデフォルトのままでよいです。（BuildFiles > Input の箇所は設定ファイル生成時に自動で設定される）

ここまでの設定を行えば、ファイルの保存時にビルドが自動実行されるようになります。

Visual Studio Code の場合

ビルドには拡張機能 Run on Save @emeraldwalk を使用します。

設定ファイルは以下のようになります。

  • .vscode\settings.json
{
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": ".*\\.(css|scss|html|cshtml)$",
        "cmd": "npm run build:css"
      }
    ]
  }
}

※自動補完（IntelliSense）は Tailwind CSS IntelliSense をインストールすると有効になります。

まとめ

Tailwind CSS v4 はモダンな CSS 仕様とブラウザの進化に合わせて設計されており、Sass のようなプリプロセッサと組み合わせる必要性は薄れてきています。ただし、既存の SCSS 資産を短期間で移行するのは現実的でない場合もあります。そのため、当面は SCSS → CSS → Tailwind と統合する従来のビルド手順を維持しつつ、徐々に Tailwind の新機能へと移行していくのが無難な選択肢でしょう。

Sass がすぐに消滅することはないにしても、CSS の機能は現在も拡張され続けており、Sass が担ってきた役割の多くはネイティブ仕様に置き換わりつつあります。この流れを意識しておけば、よりシンプルで将来性のあるスタイル設計に近づけるでしょう。

参考資料

Tailwind CSS 公式

PCSS カラートーンと RGB PowerShell 7