Bird
Raised Fist0
Tailwindmarkup~5 mins

JIT mode and on-demand generation in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What is the main benefit of Tailwind's JIT mode?
easy
A. It preloads all possible CSS classes to avoid delays.
B. It generates only the CSS classes you actually use, making the site faster.
C. It disables CSS generation to speed up development.
D. It automatically converts CSS to JavaScript.

Solution

  1. Step 1: Understand JIT mode purpose

    JIT mode creates CSS only for classes used in your files, not all possible classes.

  2. Step 2: Compare options

    It generates only the CSS classes you actually use, making the site faster. matches this behavior; others describe incorrect or unrelated features.

  3. Final Answer:

    It generates only the CSS classes you actually use, making the site faster. -> Option B

  4. Quick Check:

    JIT mode = on-demand CSS generation [OK]
Hint: JIT means generate CSS only when needed [OK]
Common Mistakes:
  • Thinking JIT preloads all CSS
  • Confusing JIT with disabling CSS
  • Assuming JIT converts CSS to JS
2. Which Tailwind config snippet correctly enables JIT mode?
easy
A. module.exports = { mode: 'jit', paths: ['./src/**/*.{html,js}'] }
B. module.exports = { jit: true, files: ['./src/**/*.{html,js}'] }
C. module.exports = { mode: 'fast', content: ['./src/**/*.{html,js}'] }
D. module.exports = { mode: 'jit', content: ['./src/**/*.{html,js}'] }

Solution

  1. Step 1: Identify correct config keys

    Tailwind uses mode: 'jit' and content array for files.

  2. Step 2: Check options

    Only module.exports = { mode: 'jit', content: ['./src/**/*.{html,js}'] } uses correct keys and values; others use wrong keys or values.

  3. Final Answer:

    module.exports = { mode: 'jit', content: ['./src/**/*.{html,js}'] } -> Option D

  4. Quick Check:

    Config keys = mode and content [OK]
Hint: Use mode: 'jit' and content array in config [OK]
Common Mistakes:
  • Using wrong keys like jit or files
  • Setting mode to 'fast' instead of 'jit'
  • Using 'paths' instead of 'content'
3. Given this Tailwind config with JIT mode:
module.exports = { mode: 'jit', content: ['./index.html'] }

And this HTML:
<div class="bg-blue-500 p-4">Hello</div>

What CSS classes will be generated?
medium
A. Only styles for bg-blue-500 and p-4 classes.
B. All background and padding classes from Tailwind.
C. No CSS classes because JIT is disabled.
D. Only bg-blue-500 class styles, not p-4.

Solution

  1. Step 1: Understand JIT CSS generation

    JIT mode generates CSS only for classes found in the content files.

  2. Step 2: Check classes in HTML

    Classes bg-blue-500 and p-4 appear, so their styles are generated.

  3. Final Answer:

    Only styles for bg-blue-500 and p-4 classes. -> Option A

  4. Quick Check:

    JIT generates CSS only for used classes [OK]
Hint: JIT generates CSS only for classes in your files [OK]
Common Mistakes:
  • Thinking all classes generate CSS
  • Assuming JIT disables CSS generation
  • Believing partial classes generate partial CSS
4. You enabled JIT mode but your new CSS classes are not applying after editing HTML. What is the likely cause?
medium
A. JIT mode requires restarting the browser manually.
B. You forgot to install Tailwind CSS.
C. The content array in Tailwind config does not include the edited files.
D. Tailwind CSS does not support dynamic class names.

Solution

  1. Step 1: Check JIT file watching setup

    JIT mode watches files listed in content to generate CSS on changes.

  2. Step 2: Identify cause of missing CSS

    If edited files are not in content, JIT won't generate CSS for new classes.

  3. Final Answer:

    The content array in Tailwind config does not include the edited files. -> Option C

  4. Quick Check:

    Content array must include all source files [OK]
Hint: Always list all source files in content array [OK]
Common Mistakes:
  • Forgetting to update content array
  • Assuming JIT needs browser restart
  • Thinking Tailwind lacks dynamic class support
5. You want to use a dynamic class name in your HTML like bg-${color}-500 where color is a variable. How can you ensure Tailwind JIT generates the correct CSS?
hard
A. Add all possible classes like bg-red-500, bg-blue-500 explicitly in your files or safelist in config.
B. JIT automatically detects dynamic class names and generates CSS for all variations.
C. Disable JIT mode to generate all CSS classes at once.
D. Use inline styles instead of Tailwind classes for dynamic colors.

Solution

  1. Step 1: Understand JIT limitation with dynamic classes

    JIT cannot detect dynamic class names built from variables in code.

  2. Step 2: Provide all possible classes explicitly

    You must list all possible class names in your files or use the safelist option in Tailwind config.

  3. Final Answer:

    Add all possible classes like bg-red-500, bg-blue-500 explicitly in your files or safelist in config. -> Option A

  4. Quick Check:

    Dynamic classes need explicit listing or safelist [OK]
Hint: List all dynamic classes or safelist them in config [OK]
Common Mistakes:
  • Expecting JIT to detect dynamic classes automatically
  • Disabling JIT unnecessarily
  • Using inline styles instead of Tailwind classes