0
0
Tailwindmarkup~5 mins

JIT mode and on-demand generation in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

JIT mode in Tailwind creates styles only when you use them. This makes your website faster and smaller.

When you want your website to load quickly by using only needed styles.
When you are building a big project and want to avoid large CSS files.
When you want to see style changes instantly while coding.
When you want to use dynamic or custom class names easily.
When you want to keep your CSS file size small for better performance.
Syntax
Tailwind
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

In Tailwind CSS v3 and later, JIT mode is enabled by default, so the mode: 'jit' line is no longer needed.

The content array tells Tailwind where to look for class names.

Examples
Basic setup for JIT mode looking at just index.html.
Tailwind
module.exports = {
  content: ['./index.html'],
  theme: {},
  plugins: [],
}
JIT mode with extended colors and multiple file types watched.
Tailwind
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx,html}'],
  theme: {
    extend: {
      colors: {
        customBlue: '#1e40af',
      },
    },
  },
  plugins: [],
}
Sample Program

This simple page uses Tailwind classes that JIT mode generates on demand. Only the classes used here will be in the CSS file.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>JIT Mode Example</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-6">
  <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind JIT!</h1>
  <button class="mt-4 px-4 py-2 bg-green-500 text-white rounded hover:bg-green-700">
    Click me
  </button>
</body>
</html>
OutputSuccess
Important Notes

JIT mode watches your files and creates styles instantly as you add classes.

Make sure your content paths include all files where you use Tailwind classes.

JIT mode helps keep your CSS file very small and fast to load.

Summary

JIT mode creates only the CSS you use, making your site faster.

It watches your files and updates styles instantly while you code.

Set content to list your files to use it. In Tailwind v3+, JIT is enabled by default.