SvelteKitにTailwindCSS v4を導入した話

SvelteKitプロジェクトにTailwindCSS v4を導入しました。 v4はVite専用プラグインが用意されており、v3と比べて設定が大幅にシンプルになっています。

v3との主な違い

TailwindCSS v4（2025年リリース）では、設定まわりが刷新されました。

環境

• SvelteKit 2系
• Vite 8系
• TailwindCSS v4

ファイル構成

今回追加・変更するファイルは3つです。

src/
  app.css             # 新規作成
  routes/
    +layout.svelte    # 変更
vite.config.ts        # 変更

Step 1: パッケージのインストール

npm install -D tailwindcss @tailwindcss/vite

tailwindcss 本体と、Vite用プラグイン @tailwindcss/vite の2つをインストールします。 v3では別途 autoprefixer なども必要でしたが、v4では不要です。

Step 2: vite.config.ts にプラグインを追加

// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss(), sveltekit()]
});

tailwindcss() を sveltekit() より前に追加します。PostCSS の設定ファイルは不要で、これだけでViteがTailwindを処理します。

Step 3: app.css を作成する

src/app.css を新規作成して、以下の1行だけ書きます。

/* src/app.css */
@import "tailwindcss";

v3では以下の3行が必要でしたが、v4では1行に統合されました。

/* v3の書き方（v4では不要） */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 4: +layout.svelte で読み込む

src/routes/+layout.svelte で app.css をimportします。

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import favicon from '$lib/assets/favicon.svg';
  import '../app.css';

  let { children } = $props();
</script>

<svelte:head>
  <link rel="icon" href={favicon} />
</svelte:head>

{@render children()}

+layout.svelte は全ページ共通で読み込まれるため、ここでimportすることでサイト全体にTailwindが適用されます。'../app.css' の .. は src/routes/ から src/ に1階層上がることを意味します。

動作確認

npm run dev で開発サーバーを起動し、Tailwindクラスを試します。

<div class="max-w-2xl mx-auto p-8">
  <h1 class="text-3xl font-bold mb-6">記事一覧</h1>

  <ul class="space-y-2">
    {#each posts as post}
      <li>
        <a href="/posts/{post.id}" class="text-blue-600 hover:underline">
          {post.title}
        </a>
      </li>
    {/each}
  </ul>
</div>

タイトルが大きく太字になり、リンクが青色になれば導入成功です。

まとめ

v4はv3と比べて設定ファイルが大幅に減り、導入手順がシンプルになりました。既存のv3プロジェクトをv4に移行する場合は設定ファイルの書き方が異なるため注意が必要です。