What is Tailwind CSS JIT mode, and how to use arbitrary values and optimize performance?

Tailwind CSS JIT (Just-In-Time) mode is a new feature introduced in v3.0 that generates CSS on-demand, significantly improving performance.

Advantages of JIT mode:

• On-demand generation: only generate classes that are actually used
• Smaller file size: reduce final CSS size
• Faster build speed: only process used classes
• Support for arbitrary values: can use any CSS value
• Better development experience: generate styles in real-time

Enable JIT mode:

• Tailwind CSS v3.0+ enables JIT mode by default
• Configure in tailwind.config.js:

  javascript
  module.exports = {
    mode: 'jit', // default enabled in v3.0+
    content: ["./src/**/*.{html,js}"],
  }

Using arbitrary values:

• Bracket syntax: use any CSS value
• Examples:

  html
  <div class="w-[123px]">Custom width</div>
  <div class="h-[50%]">Custom height</div>
  <div class="bg-[#1da1f2]">Custom color</div>
  <div class="p-[10px]">Custom padding</div>
  <div class="text-[20px]">Custom font size</div>
  <div class="grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">Custom grid</div>

JIT mode configuration:

• content configuration: specify files to scan
• Example:

  javascript
  module.exports = {
    content: [
      "./src/**/*.{html,js,jsx,ts,tsx,vue}",
      "./public/**/*.html",
    ],
  }

• safelist configuration: prevent certain classes from being purged
• Example:

  javascript
  module.exports = {
    safelist: [
      'bg-red-500',
      {
        pattern: /bg-(red|green|blue)-(100|200|300)/,
        variants: ['hover', 'focus'],
      }
    ]
  }

JIT mode vs AOT mode comparison:

• JIT (Just-In-Time): generate on-demand
  • Advantages: small files, fast build, supports arbitrary values
  • Disadvantages: need to configure content paths
• AOT (Ahead-Of-Time): generate all classes in advance
  • Advantages: no configuration needed, simple
  • Disadvantages: large files, slow build

Performance optimization:

• Reasonably configure content paths, avoid scanning unnecessary files
• Use safelist to protect dynamically generated classes
• Use arbitrary values to reduce custom CSS
• Regularly clean up unused styles

Development experience:

• Real-time generation: generate styles immediately after modifying HTML
• Hot reload: support dev server hot reload
• Error messages: provide clear error information

Build configuration:

• Webpack:

  javascript
  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader'],
        },
      ],
    },
  }

• Vite:

  javascript
  // vite.config.js
  export default {
    css: {
      postcss: {
        plugins: [
          require('tailwindcss'),
          require('autoprefixer'),
        ],
      },
    },
  }

Best practices:

• Ensure all used classes are in content paths
• Use arbitrary values to reduce custom CSS
• Regularly review and optimize configuration
• Test build output size
• Take advantage of JIT mode to improve development efficiency