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.

Read next
How to use optional chaining in JavaScript
January 14, 2021
views