TailwindCSSを追加
前回の外部TypeScriptファイル対応に加えTailwindCSSを追加する。
ここまでの作業
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>