Posts Learn Components Snippets Categories Tags Tools About
/

How to Enable TailwindCSS JIT Compiler

Learn how to enable just-in-time mode (JIT) in TailwindCSS

Created on Jun 28, 2021

172 views

To enable the TailwindCSS Just-in-Time *(JIT) compiler, you will need to update the tailwind configuration.

// tailwind.config.js

module.exports = {
  mode: 'jit', // add this configuration
  purge: [],
  theme: {}
}

Do note that this only available for TailwindCSS version v2.1+ and above. The benefits of the JIT compiler are:
  • Lightning-fast build times
  • Every variant is enabled out of the box
  • Generate arbitrary styles without writing custom CSS
  • Your CSS is identical in development and production
  • Better browser performance in development

Extra Tips: For optimal compiling performance, do include the page to purge like below for your application.
// tailwind.config.js

module.exports = {
  mode: 'jit',
  purge: [
    './public/**/*.html',
    './src/**/*.{js,jsx,ts,tsx,vue}',
  ],
  theme: {}
}

Watch TailwindCSS 2.1+ announcement video for more goodies. 

If you like our tutorial, do make sure to support us by being our Patreon or buy us some coffee ☕️

Load comments for How to Enable TailwindCSS JIT Compiler

)