Posts Learn Snippets Categories Tags About
/

How to Enable TailwindCSS JIT Compiler

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

Created on Jun 28, 2021

8 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. 

Created by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.