SvelteKit プロジェクトで TailWind CSS を設定する

SvelteKit プロジェクト内で TailWind CSS を使用して最新の Web サイトを迅速に構築します.

新しい SvelteKit プロジェクトをセットアップし、Tailwind と AutoPrefixer をインストールします

mkdir my-app
cd my-app
npm init svelte@next
npm install -D tailwindcss autoprefixer

プロジェクトのルート ディレクトリに postcss.config.cjs ファイルを作成します.

SvelteKit は Vite にバンドルされており、標準で postcss がサポートされています.

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

TailWind 構成

プロジェクトのルートに tailwind.config.cjs を作成します. npx tailwind init を実行することもできますが、拡張子の名前を .cjs に変更してください.

module.exports = {
  mode: 'jit',
  content: ['./src/**/*.svelte'],
}

CSS の作成とインポート

これらのタグは、PostCSS が追い風のスタイルを挿入する場所を認識している CSS のどこかに追加してください.これらをインポートするのに適した場所は、スタイル タグ内の __layout.svelte 内です.

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

それでおしまい! flex 、 pt-4 、 text-center 、 rotate-90 などの TailWind CSS クラスを使用して、マークアップで直接、任意のデザインを構築できるようになりました.