Tailwind with TypeScript not working on Vercel

February 5, 2021 ∙∙∙ views 1 min read

I've converted this website from JavaScript to TypeScript and I had come across this issue before. Everything works fine until you deploy it to Vercel, it might happen on other platforms too, but with me happened with Vercel.

After deploying if you happen to notice that the TailwindCSS styling is not being applied, chances are you have the wrong Tailwind configuration.


Head over to tailwind.config.js and change purge option, make sure you're including .ts and .tsx extensions:

module.exports = {
  purge: [
    './components/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}'
  ],
  darkMode: 'class', // or 'media' or 'class'
  // ...
}

That's it.