Home / Snippets / How to Enable TailwindCSS JIT Compiler
How to Enable TailwindCSS JIT Compiler cover

How to Enable TailwindCSS JIT Compiler

201

3 years ago

0 comments

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. 
notion avatar

Alaz

Week-end developer currently experimenting with web, mobile, and all things programming.

Topics:

Frontend

Resource

Average

Average

Support Us

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

Welcome to PostSrc V3

PostSrc Dark Logo

You have to login to favorite this