概要

先日kumanoteのコーポレートサイト兼エンジニアブログである本サイトをTailwind CSSを使ってリニューアルしました。

結構洗練されたので、個人的にかなり気に入っています。

今回は、このサイトをリリースするに当たってちょっとした落とし穴にハマったので、その解決策になります。

具体的には、以下のような事象が起きてしまいました。

開発時にはちゃんと機能していたはずの色が黒色（デフォルトの色）になってしまっていた

よくよく調べたのですが、原因は以下だとわかりました。

意図せず、リリースビルドするときに必要なcssのclassが消去されてしまっていました。
※ そのclassはコンポーネントで動的に作成されていた（主に色に関連する）classでした。

@nuxtjs/tailwindcss というパッケージを使っていたのですが、リリースビルドをする際に、
componentやpageなどで使っていないcssを自動的に消してしまうような動きをしていました。

解決方法

tailwind.config.js で特定のcss classはリリースビルド時に消去（purge）されないように指定しました。

module.exports = {
  purge: {
    content: [
      './components/**/*.{vue,js}',
      './layouts/**/*.vue',
      './pages/**/*.vue',
      './plugins/**/*.{js,ts}',
      './nuxt.config.{js,ts}',
    ],
    options: {
      safelist: [/^bg-/, /^hover:bg-/, /^text-/, /^hover:text-/],    // <= ここの部分
    },
  },
}

Reference

以下を参照しました。

• Tailwind Config Whitelisting classes - Nuxt TailwindCSS