Tailwind CSS ホームページ
  1. はじめに
  2. SvelteKit で Tailwind CSS をインストールする

  1. プロジェクトを作成する

    まだセットアップしていない場合は、まず新しい SvelteKit プロジェクトを作成します。最も一般的な方法は、 SvelteKit を始める 入門書に概説されています。

    ターミナル
    npm create svelte@latest my-projectcd my-project

  2. Tailwind CSS をインストールする

    tailwindcss とそのピア依存関係をインストールし、次に tailwind.config.js と postcss.config.js ファイルを生成します。

    ターミナル
    npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

  3. <style> ブロックで PostCSS を使用できるようにする

    svelte.config.js ファイルで、vitePreprocess をインポートして、<style> ブロックを PostCSS として処理できるようにします。

    svelte.config.js
    import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter()
  },
  preprocess: vitePreprocess()
};
export default config;

  4. テンプレートパスを設定する

    tailwind.config.js ファイルのすべてのテンプレートファイルへのパスを追加します。

    tailwind.config.js
    /** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {}
  },
  plugins: []
};

  5. CSS に Tailwind ディレクティブを追加する

    ./src/app.css ファイルを作成し、Tailwind の各レイヤーに @tailwind ディレクティブを追加します。

    app.css
    @tailwind base;
@tailwind components;
@tailwind utilities;

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

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

    +layout.svelte
    <script>
  import "../app.css";
</script>

<slot />

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

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

    ターミナル
    npm run dev

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

    Tailwind のユーティリティクラスを使用してコンテンツをスタイル設定し始め、 Tailwind で処理する必要のある <style> ブロックには lang="postcss" を設定するようにしてください。

    +page.svelte
    <h1 class="text-3xl font-bold underline">
  Hello world!
</h1>

<style lang="postcss">
  :global(html) {
    background-color: theme(colors.gray.100);
  }
</style>