SvelteKit で Tailwind CSS をインストール

SvelteKit プロジェクトでの Tailwind CSS のセットアップ。

プロジェクトを作成する

まだセットアップしていない場合は、新しい SvelteKit プロジェクトを作成することから始めます。最も一般的なアプローチは、SvelteKit ドキュメントに概説されています。

ターミナル

npx sv create my-project
cd my-project

Tailwind CSS をインストール

@tailwindcss/vite とそのピア依存関係を npm 経由でインストールします。

ターミナル

npm install tailwindcss @tailwindcss/vite

Vite プラグインを設定する

@tailwindcss/vite プラグインを Vite 設定に追加します。

vite.config.ts

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
  plugins: [
    tailwindcss(),
    sveltekit(),
  ],
});

Tailwind CSS をインポートする

./src/app.css ファイルを作成し、Tailwind CSS をインポートする @import を追加します。

app.css

@import "tailwindcss";

CSS ファイルをインポートする

./src/routes/+layout.svelte ファイルを作成し、新しく作成した app.css ファイルをインポートします。

+layout.svelte

<script>
  let { children } = $props();
  import "../app.css";
</script>
{@render children()}

ビルドプロセスを開始する

npm run dev でビルドプロセスを実行します。

ターミナル

npm run dev

プロジェクトで Tailwind の使用を開始する

Tailwind のユーティリティクラスを使用してコンテンツをスタイル設定し、Tailwind で処理する必要がある <style> ブロックのために Tailwind CSS テーマを必ずインポートしてください。

+page.svelte

<h1 class="text-3xl font-bold underline">
  Hello world!
</h1>
<style lang="postcss">
  @reference "tailwindcss";
  :global(html) {
    background-color: theme(--color-gray-100);
  }
</style>