SvelteにTailwindCSSを適用する方法！

SvelteのテンプレートにTailwindを後追いで設定する

みなさん、こんにちは。どんぶラッコです。

今日は Svelteで TailwindCSS を使えるようにするための手順をまとめておきたいと思います。

Svelteってなんぞや？という方や Svelteのインストール方法がわからない… という方は、以前にまとめた記事があるのでそちらをご参照ください。

参考2021年注目のJavaSciprtフレームワーク、Svelteとは？ – 解説とセットアップ手順ラッコWeb

今回は、そんなSvelte に最近の流行りであるTailwindCSSを使えるようにするための手順をご紹介します！

一つずつ順を追っていけば全く難しくないので、一緒に見ていきましょう♪

TailwindCSS パッケージをインストールする

まずは tailwind関連のパッケージをインストールします。

yarn or npm

yarn add tailwindcss@latest postcss@latest autoprefixer@latest
# または
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

公式サイトのインストール手順を確認しよう！

最新のパッケージインストール手順については公式サイトを確認するようにしましょう

参考Installation – Tailwind CSSTailwind CSS

インストールが完了したら tailwind の設定ファイルを作成します。

設定ファイル作成

npx tailwindcss init

このコマンドを実行すると、 tailwind.config.js が作成されます

tailwind.config.jsを編集

次に tailwind.config.js 内部に下記の記述を追記します。２箇所追記してください。

tailwind.config.js

const production = !process.env.ROLLUP_WATCH; // 追記①
module.exports = {
  // 追記② ここから
  purge: {
    content: [
      './src/**/*.svelte',
      './src/**/*.html',
    ],
    enabled: production, // disable purge in dev
  },
  // 追記② ここまで
};

purge にファイル名を指定することで、対象ファイル内の tailwindcss のサイズを最適化してくれます。今回は .svelte と .html の拡張子を対象とします。

また、purgeするのは本番環境の時だけでいいので、その設定をしています。追記①の部分ですね！

rollup.config.js を編集

次に、 rollup.config.js を編集して、dev環境でプロセスが立ち上がる前に tailwind のパッケージが読み込まれるようにします。

そのために svelte-preprocess が必要です。インストールしておきましょう。

svelt-preprocess をインストール

yarn add svelte-preprocess
# または
npm i svelte-preprocess

その上で、rollup.config.js を更新します。今回も２箇所に追記します。

rollup.config.js

// 前略
import sveltePreprocess from 'svelte-preprocess'; // 追記①

// 中略

export default {
  plugins: [
    svelte({
      // 追記② ここから
      preprocess: sveltePreprocess({
        sourceMap: !production,
        postcss: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer'),
          ],
        },
      }),
      // 追記② ここまで
    
     // 中略
};

App.svelte で tailwindCSSを読み込んで確認

以上で設定は完了です。最後に App.svelte で tailwind を読み込んで確認してみましょう。

テスト用にボタンのCSSを記述しました。

App.svelte

<main>
	<button class="bg-red-600 py-2 px-4 text-white rounded shadow">ボタンテスト</button>
</main>

<style global lang="postcss">
	@tailwind base;
	@tailwind components;
	@tailwind utilities;
</style>

書き換え終わったら yarn dev を実行してみましょう。