Svelte + Sapper + TypeScript + TailwindCSS

TailwindCSSを追加

前回の外部TypeScriptファイル対応に加えTailwindCSSを追加する。

ここまでの作業

www.axon.jp

TailwindCSSとPostCSS-CLiと関連パッケージをインストール

postcss-purgecssはNODE_ENVにproductionを指定し不要なセレクタを除いたCSSファイルを生成するように設定するために使用します。

$ yarn add -D tailwindcss postcss-cli
$ yarn add @fullhuman/postcss-purgecss
// 設定ファイルを生成
$ npx tailwindcss init

読み込み用CSSファイルを作成

styles/tailwind.cssをもとにstatic/global.cssが生成される。必要であればデフォルトのglobal.cssの内容はtailwind.cssの末尾に追記しておく。

$ mkdir styles

./styles/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 追加のスタイルはここに記述 */

PostCSS CLiの設定ファイルを追加

postcss.config.js

const tailwindcss = require("tailwindcss");
const purgecss = require("@fullhuman/postcss-purgecss")({
  content: ["./src/**/*.svelte", "./src/**/*.html"],
  defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});

module.exports = {
  plugins: [
    tailwindcss("./tailwind.config.js"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};

CSSファイルを生成

static/global.cssを生成

$ yarn postcss styles/tailwind.css -o static/global.css

サンプルコード

src/routes/index.svelteを編集

...
<h1 class="text-blue-500">Great success!</h1>