SvelteKitで作成したプロジェクトに、Tailwind CSSを使えるように設定していきます。
準備
SvelteKitのプロジェクトを作成してください。
Svelte（ｽﾍﾞﾙﾄ）と読むようです。SvelteはJavaScriptのフレームワーク Svelteとは 手短に言えば Svelte は、ナビゲーションバ…
redsum.net
手順
Tailwind CSS をインストールする
以下のコマンドを実行してインストールする。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p実行例
>npm install -D tailwindcss postcss autoprefixer
added 47 packages, and audited 158 packages in 7s
24 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
>npx tailwindcss init -p
Created Tailwind CSS config file: tailwind.config.js
Created PostCSS config file: postcss.config.jsパスを追加する
tailwind.config.jsファイルに以下のようにパスを追加する。
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {},
},
plugins: [],
}CSSファイル設置
src/app.cssファイルを作成する。
@tailwind base;
@tailwind components;
@tailwind utilities;CSSファイルを読み込ませる
src/router/+layout.svelteファイルを作成し、src/app.cssファイルを読み込ませる。
<script>
import '../app.css'
</script>
<slot />確認
src/routes/+page.svelteファイルを以下のように変更する。
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>以下のように表示されれば Tailwind CSS が適用されています。
参考
公式ドキュメント
Setting up Tailwind CSS in a SvelteKit project.
tailwindcss.com