Vite + Svelte + Tailwind CSS + daisyUI セットアップ手順

AI生成の要約

この記事では、WSL環境でVite、Svelte、Tailwind CSS、およびdaisyUIを使用してプロジェクトをセットアップし、VSCode開発環境を構成する方法を紹介します。関連する拡張機能のインストールやPrettierフォーマッターの設定も含まれます。

• 環境
• Viteプロジェクトの生成
  • VSCodeの設定
• Tailwind CSSのインストール
  • VSCodeの設定
• daisyUIのインストール
• Prettierの設定
  • VSCodeの設定

環境

• WSL
• Docker Desktop
• VSCode Dev Containers

Dev Containersの使用手順については、この記事を参照してください。

Viteプロジェクトの生成

こちらを参考にして、Viteを使用してプロジェクトを生成します。

Svelte + TypeScriptを選択します。現在のフォルダにプロジェクトを生成するには、Project nameを.に設定することを忘れないでください。

npm create vite@latest

# ✔ Project name: … .
# ✔ Select a framework: › Svelte
# ✔ Select a variant: › TypeScript
# Scaffolding project in /home/user/XXX...

# Done. Now run:

#   npm install
#   npm run dev

生成後、指示に従ってインストールし、開発サーバーを起動します。

npm install
npm run dev -- --host # for dev containers

ブラウザを開いて初期画面を確認します。

VSCodeの設定

Svelte VSCode拡張機能のインストール

拡張機能名を.devcontainer/devcontainer.jsonに追加し、再ビルドします。

{
  "customizations": {
    "vscode": {
      "extensions": [
        "svelte.svelte-vscode", 
      ]
    }
  }
}

TypeScript設定を.vscode/settings.jsonに追加します。

{
  "svelte.enable-ts-plugin": true, 
}

Tailwind CSSのインストール

公式ドキュメントに従ってインストールします。

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

postcss.config.jsを編集します。

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

生成されたtailwind.config.jsを編集します。

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

設定をsrc/app.cssに追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

VSCodeの設定

Tailwind CSS VSCode拡張機能のインストール

拡張機能名を.devcontainer/devcontainer.jsonに追加し、再ビルドします。

{
  "customizations": {
    "vscode": {
      "extensions": [
        "svelte.svelte-vscode",
        "bradlc.vscode-tailwindcss", 
      ]
    }
  }
}

CSSの関連付けと提案設定を.vscode/settings.jsonに追加します。

{
  "svelte.enable-ts-plugin": true,
  "files.associations": { 
    "*.css": "tailwindcss"
  }, 
  "editor.quickSuggestions": { 
    "strings": "on"
  } 
}

editor.quickSuggestions.stringsを有効にすると、文字列の引用符"内でもTailwind CSSの提案が表示されます。

daisyUIのインストール

公式ドキュメントに従って手順を進めます。

npm i -D daisyui@latest

tailwind.config.jsを編集します。

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

完了です！

Prettierの設定

Tailwindのクラス名は非常に長くなることがあるため、フォーマッターを使用すると開発が容易になります。

公式ドキュメントに従って手順を進めます。

• prettier-plugin-svelte
• prettier-plugin-tailwindcss

npm install -D prettier prettier-plugin-tailwindcss prettier-plugin-svelte

.prettierrcを編集します。

{
  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

フォーマットを実行します。

npx prettier --write .

VSCodeの設定

Prettier VSCode拡張機能のインストール

拡張機能名を.devcontainer/devcontainer.jsonに追加し、再ビルドします。

{
  "customizations": {
    "vscode": {
      "extensions": [
        "svelte.svelte-vscode",
        "bradlc.vscode-tailwindcss",
        "esbenp.prettier-vscode", 
      ]
    }
  }
}

自動フォーマット設定を.vscode/settings.jsonに追加します。

{
  "editor.formatOnSave": true, 
  "editor.defaultFormatter": "esbenp.prettier-vscode", 
  // ...
}