本番環境にデプロイしたらTailwind CSSが効かない時に確認すること

HTML/CSS/Sass

tailwindを使用していた時に、本番環境やdev環境にデプロイしたらスタイルが効いてない時がありました。そんな時に確認することを2つ紹介します。

tailwindcss.config.jsのpurge設定を見直す

tailwindcssにはパージ機能があり、使用していないクラス名のCSSは出力しないようになっています。

その使用しているかどうかの判断に際して、判断対象のディレクトリを指定する必要があります。

例えば、以下であればpagesディレクトリとcomponentsディレクトリを指定しているわけです。

CSSを使用しているディレクトリが全て記載されているかチェックしてみてください。

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], // ココ
  },
}

クラス名がフルで使用されているか確認する

具体的に言うと、クラス名を部分的に変数にして使用していないか、ということです。

例えば、以下のような感じ。

const fontSize = "xs"
const pcBgColor = "bg-white"

return (
    <p className=`text-${fontSize} md:${pcBgColor}`>Hello</p>
)

このような使い方をしていると、パージチェックの際に、text-xs と md:bg-white は使用されているクラスと認識されず、CSSに出力されず、結果スタイルが適用されません。

ただし、別箇所でクラス名のフル記載で使用されている場合、CSSとして出力されるのでスタイルは適用されます。

sm:bg-white と md:bg-white とレスポンシブ対応も含めた場合でも、別のクラスと認識されるため、注意してください。

タイトルとURLをコピーしました