Posts Learn Components new Snippets new 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

23 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. 
new

If you like our tutorial, do make sure to support us with some coffee. We need the juice to write the content during the night 🤙🏻