sapper環境にtailwindcss導入時のメモ

ライブラリのインストール

まず、tailwindcssとpostcss-cliをinstallします。

npm install tailwindcss postcss-cli --save-dev

次のTailwindのconfigファイルの作成時にautoprefixerがないとエラーになるので、ない場合はインストールします。

npm install autoprefixer

configファイルの作成

tailwind.js を作成します。

./node_modules/.bin/tailwind init tailwind.js

次に postcss.config.js を作成し以下を記述します。

const tailwindcss = require("tailwindcss");

// only needed if you want to purge
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.js"),

    // only needed if you want to purge
    ...(process.env.NODE_ENV === "production" ? [purgecss] : [])
  ]
};

cssの追加

staticディレクトリに static/tailwind.css を作成し以下を追加します。

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

最後に

package.json のscriptsの以下の部分を書き換えます。

"scripts": {
    "watch:tailwind": "postcss static/tailwind.css -o static/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss static/tailwind.css -o static/index.css" ,
    "build": "npm run build:tailwind && sapper build --legacy"
}

src/template.html に以下を追加します。

<link rel="stylesheet" href="index.css" />

開発時は npm run watch:tailwind と npm run dev を同時に動かすことで、コンパイルとホットリロードが効くようになります。

本番ようにminifiesする場合は npm run build を実行します。