SvelteサイトでTailwindを使用する方法

このガイドは、効率的かつスタイリッシュなUI開発のために、Tailwind CSSをSvelteアプリケーションに統合するための合理化されたアプローチを示しています。 Tailwindのユーティリティファースト方法論は、HTMLとCSSの間のコンテキストの切り替えを排除し、スベルトコンポーネント内でスタイリングプロセスを直接合理化します。作業例はGithubで利用できます（Brevityのためにリンク省略）。

なぜSvelteを選ぶのですか？

Svelteのパフォーマンスは例外的で、JavaScriptのトップフレームワークにランク付けされています。そのコンパイラは、ビルドプロセス中にSvelteコードを高度に最適化されたバニラJavaScriptに変換し、その結果、バンドルサイズが小さく、Reactなどのフレームワークと比較して読み込み時間が速くなります。ランタイムフレームワークライブラリがないと、パフォーマンスが大幅に向上します。 Svelteのエコシステムはまだ発展していますが、その速度と効率は説得力のある選択になります。

なぜTailwind CSSを選ぶのですか？

Tailwind CSSは、スタイリングへのユニークなアプローチを提供するAtomic CSSフレームワークです。従来のフレームワークとは異なり、TailWindは、スタイリング、カスタマイズの促進、一般的なデザインの防止を粒状に制御するための個々のユーティリティクラスを提供します。重要な利点は次のとおりです。

• 時間の節約：数千の事前に構築されたCSSクラスは、広範なカスタムCSSの必要性を排除します。
• 直感的な命名：クラス名は明らかに機能を反映しています（例：小さなテキストのtext-sm ）。
• モバイルファースト応答性： Responsive Designは、 sm 、 md 、 lgなどのプレフィックスを使用して、さまざまな画面サイズをターゲットにして組み込まれています。
• 軽量出力： Purgecssは未使用のCSSクラスを簡単に削除し、バンドルサイズを最小限に抑えます。

ただし、Tailwindの広範なクラスの使用は、一部の開発者によって冗長と見なされる場合があります。また、事前に構築されたコンポーネントや締め切りのあるコンポーネントを必要とするプロジェクトにも適していません。

ステップ1：Svelteプロジェクトのセットアップ

npx degit sveltejs/template project-nameを使用して、新しいSvelteプロジェクトを作成します。 Project Directory（ cd project-name ）に移動し、 npm installで依存関係をインストールします。

ステップ2：Tailwind CSSのインストール

以下を使用して、Tailwindとその依存関係をインストールします。

 NPMインストールTailwindCSS@npm：@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

これにより、Tailwind、PostCSS（CSS処理用）、およびAutoprefixer（ベンダープレフィックス用）がインストールされます。 Svelteとの互換性のためのPostCSS 7の使用に注意してください。

ステップ3：Tailwindの構成

Tailwind構成ファイルを生成します。

 npx tailwindcss init tailwind.config.js

tailwind.config.jsを開き、互換性とPurgecsについて次のものを追加します。

 const production =！process.env.rollup_watch;
module.exports = {
  未来： {
    purgelayersbydefault：true、
    削除されたPrecatedGaputitivities：true、
  }、
  パージ：{
    コンテンツ：["./src/**/*.svelte"]、
    有効：生産、
  }、
};

これにより、新しいTailwindバージョンとの互換性が保証され、生産中のPurgecsが未使用のCSSを除去できるようになります。

ステップ4：テールワインドとスベルテの統合

rollup.config.jsにsveltePreprocessをインポート：

 「Svelte-Preprocess」からsveltepreprocessをインポートします。

sveltePreprocessを構成して、Tailwindとautoprefixerを使用します。

プリプロセス：sveltepreprocess（{
  sourcemap：！制作、
  postcss：{
    プラグイン：[要求（ "Tailwindcss"）、require（ "autoprefixer"）]、
  }、
}）、

これにより、Svelteビルドパイプライン内でPostCSS処理が設定されます。

ステップ5：追い風スタイルを注入します

メインのSvelteコンポーネント（例： App.svelte ）で、追加：

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

これにより、Tailwindのベーススタイル、コンポーネントスタイル（使用する場合）、およびユーティリティクラスが注入されます。

ステップ6：例：ヘッダーの作成

App.svelteでシンプルなヘッダーを作成し、tailwindクラスでスタイルを作成します（簡潔にするために例を省略して、詳細な例については元の入力を参照してください）。 npm run devを使用してアプリを実行します。

結論

このガイドは、Tailwind CSSをSvelteプロジェクトに統合するための基盤を提供します。 Tailwindの広範なドキュメントを調べて、スタイルをさらにカスタマイズします。より視覚的な学習体験については、ビデオチュートリアルを参照してください。

以上がSvelteサイトでTailwindを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。