Svelte入門：リファレンス CLI -tailwindcss-

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitのリファレンスについて解説しています。

背景
CLIツール（sv）
tailwindcssとは
おわりに

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

tailwindcssとは

Tailwind CSSを使用すると、HTMLから離れることなく、モダンなウェブサイトを迅速に構築できます。

使用方法

npx sv add tailwindcss

導入されるもの

Tailwind for SvelteKitガイドに従ったTailwindのセットアップ
Tailwind Viteプラグイン
更新されたapp.cssと+layout.svelte（SvelteKitの場合）またはApp.svelte（SvelteKit以外のViteアプリの場合）
prettierパッケージを使用している場合は、それとの統合

plugins

どのプラグインを使用するか指定します：

typography — @tailwindcss/typography
forms — @tailwindcss/forms

npx sv add --tailwindcss=typography

解説

Tailwind CSSは、ユーティリティファーストのCSSフレームワークで、クラス名を直接HTMLに追加することでスタイリングを行います。カスタムCSSを書く量を減らし、開発速度を向上させることができます。

1. インストール後の基本的なコンポーネント例

<!-- Button.svelte -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  クリックしてください
</button>

このコードでは、bg-blue-500（背景色）、hover:bg-blue-700（ホバー時の背景色）、text-white（テキスト色）などのTailwindクラスを使用しています。

2. レスポンシブデザインの例

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-gray-100 p-4 rounded">アイテム1</div>
  <div class="bg-gray-100 p-4 rounded">アイテム2</div>
  <div class="bg-gray-100 p-4 rounded">アイテム3</div>
</div>

この例では、画面サイズによってグリッドのカラム数が変化します：

モバイル：1カラム
タブレット（md）：2カラム
デスクトップ（lg）：3カラム

3. 追加プラグインの使用例

タイポグラフィプラグイン

@tailwindcss/typographyプラグインを使用すると、リッチテキストコンテンツを美しく表示できます：

<article class="prose lg:prose-xl">
  <h1>Svelteの魅力</h1>
  <p>Svelteは、最新のWebフレームワークの中でも非常に効率的です。</p>
  <ul>
    <li>高速なパフォーマンス</li>
    <li>直感的な構文</li>
    <li>少ないコード量</li>
  </ul>
</article>

proseクラスにより、リッチテキストに適切な間隔やタイポグラフィが適用されます。

フォームプラグイン

@tailwindcss/formsプラグインはフォーム要素のスタイリングを改善します：

<form>
  <label class="block">
    <span class="text-gray-700">ユーザー名</span>
    <input type="text" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
  </label>
  <label class="block mt-4">
    <span class="text-gray-700">メッセージ</span>
    <textarea class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"></textarea>
  </label>
</form>

4. カスタマイズ例

tailwind.config.jsでカスタマイズする例：

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      colors: {
        'brand-primary': '#ff3e00',
        'brand-secondary': '#676778',
      },
      fontFamily: {
        sans: ['Noto Sans JP', 'sans-serif'],
      },
    },
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
  ],
}

Tailwind CSSの利点

開発速度の向上: CSSファイルを作成・管理する代わりに、HTMLにクラスを追加するだけです
一貫したデザインシステム: 事前定義された値を使用するため、デザインの一貫性が保たれます
レスポンシブデザインが容易: sm:、md:、lg:などのプレフィックスを使用して、各画面サイズに応じたスタイルを適用できます
高いカスタマイズ性: tailwind.config.jsでテーマや色、間隔などをカスタマイズできます
小さな本番バンドルサイズ: 未使用のスタイルが自動的に削除されます

npx sv add tailwindcssコマンドを実行すると、Svelteプロジェクトに必要な設定が自動的に追加され、すぐにTailwind CSSを使い始めることができます。また、必要に応じて--tailwindcss=typographyや--tailwindcss=formsなどのオプションを追加して、追加のプラグインをインストールすることもできます。