TailwindCSS vs vanilla-extract、どっちが正解かガチで検証した結論

$ |

$ █

CSS-in-JS戦争、2026年の最終回答

TailwindCSS vs vanilla-extract。この比較、ネット上に山ほど記事があるけど、ほとんどが「どっちもいいよね」で終わってる。甘い。僕は3つのプロダクトで両方使った上で、明確に結論を出す。

TailwindCSSの本当の強さ

Tailwindの強さは「デザインシステムをCSSフレームワークに内包してる」こと。spacing、color、typographyの一貫性が、クラス名を書くだけで担保される。

<!-- Tailwind -->
<div class="flex items-center gap-4 p-6 bg-white rounded-lg shadow-sm
            hover:shadow-md transition-shadow">
  <h2 class="text-lg font-semibold text-gray-900">タイトル</h2>
  <p class="text-sm text-gray-500">説明文</p>
</div>

「HTMLが汚い」という批判は分かるけど、開発速度とデザインの一貫性を天秤にかけたら、Tailwindが圧勝する場面が多い。

vanilla-extractの型安全という武器

vanilla-extractの最大の武器はTypeScriptとの完全統合。スタイルが型安全。存在しないトークンを参照したらコンパイルエラーになる。

// styles.css.ts
import { style } from '@vanilla-extract/css';
import { vars } from './theme.css';

export const card = style({
  display: 'flex',
  alignItems: 'center',
  gap: vars.space.md,
  padding: vars.space.lg,
  backgroundColor: vars.color.surface,
  borderRadius: vars.radius.lg,
  ':hover': {
    boxShadow: vars.shadow.md,
  },
});

ゼロランタイム。ビルド時にCSSファイルが生成される。パフォーマンスは最強クラス。