SassとTailwind CSSの違いは？SCSS・CSS変数・v4の注意点

ひよこ

SassとTailwindは同じ種類の道具？

ペンギン先生

Sassは変数や関数などを使って書いたコードをCSSへ変換するスタイルシート言語。Tailwindはユーティリティクラスを組み合わせるCSSフレームワークだよ。どちらもCSSを作るけれど、担当する役割が違うんだ。

ひよこ

SCSSとSassも別物なの？

ペンギン先生

SCSSはSassで使える構文の一つだよ。波括弧やセミコロンを使い、CSSに近い見た目になっている。Sassにはインデントで構造を表す構文もある。普段.scssファイルを使っているなら、Sassを利用していると考えてよいね。

ひよこ

Sassの変数とCSS変数はどう違う？

ペンギン先生

Sassの$変数はコンパイル時に解決される。一方、CSSのカスタムプロパティは出力CSSにも残り、ブラウザでカスケードや継承に従うよ。画面のテーマを実行時に切り替えるのか、生成時の繰り返しを減らしたいのかで使い分けるんだ。

ひよこ

Tailwindだとスタイルはどこに書く？

ペンギン先生

テンプレートにbg-blue-600やp-4などを並べて組み立て、共通の色や余白はテーマとして管理するよ。v4はCSS-firstの設定が中心。ただしデザインの設計や、独自CSSがすべて不要になるわけではないんだ。

ひよこ

Sassのほうがファイルが大きくなる？

ペンギン先生

書き方と生成結果次第だよ。Sassの深いネストやミックスインの多用で増えることもあるけれど、必ず大きいわけではない。Tailwindも利用するユーティリティや独自CSSが増えれば量は増えるので、同じ画面を作って配信量を確認しよう。

ひよこ

Sassにスコープの機能はある？

ペンギン先生

Sassだけでクラス名が自動的にローカル化されるわけではないよ。CSS Modulesやフレームワークのscoped styleと組み合わせることはできる。Sassの言語機能と、名前の衝突を管理する仕組みを分けて考えよう。

ひよこ

Tailwind v4をSassに通せばいい？

ペンギン先生

公式には、v4はSass・Less・Stylusなどのプリプロセッサと一緒に処理することを想定していないと説明されている。既存Sassを残す移行では、処理経路を分けるなどの設計と検証が必要。単純に組み合わせればよいとは言えないね。

ひよこ

既存のSassは全部捨てるべき？

ペンギン先生

問題がなければ置き換える必要はないよ。新規画面だけ試す場合も、色や余白の定義が二重にならないようにしよう。Sassを続けるなら、古い@importは非推奨なので@useなどのモジュール方式への移行も確認してね。

同じ「変数」でも評価される場所が違う

$space: 16px;
.card { padding: $space; }

Sassで変換すると .card { padding: 16px; } というCSSになります。一方、次のCSSカスタムプロパティはブラウザで評価されます。

:root { --space: 16px; }
.card { padding: var(--space); }

選ぶ前の比較表

Dart Sassでは1.80.0からSassの@importが非推奨です。CSS自体の@importとは区別し、既存コードはモジュールの移行ガイドを確認します。またTailwind v4はモダンブラウザを対象にするため、古いブラウザ対応が必要な案件では先に互換性を確認してください。

参考資料

確認日：2026年9月27日。製品の仕様・料金・対応環境は導入時にも確認してください。

• Sass: Documentation：SCSSとインデント構文、言語機能。
• Sass: Variables：Sass変数とCSSカスタムプロパティの差。
• Sass: @import deprecation：Dart Sass 1.80.0以降の非推奨とモジュール方式。
• Tailwind: Compatibility：v4とSassの処理、標準CSS機能。
• Tailwind: Upgrade guide：v4設定と対応ブラウザ。