Tailwind CSS 3.0 JIT Guide

Tailwind CSS 3.0 revolutionizes CSS workflow. JIT engine becomes default, enabling instant builds and arbitrary values. At ZIRA Software, Tailwind 3 accelerates frontend development across all projects.

JIT Engine Default

Before (AOT):

• Generate all utilities upfront
• Large CSS file in development
• PurgeCSS required for production

Now (JIT):

• Generate only used utilities
• Instant builds
• Same small output everywhere

# Build times
Tailwind 2.x: 3-8 seconds
Tailwind 3.0: 200-500ms

Arbitrary Values

<!-- Use any value -->
<div class="top-[117px] bg-[#1da1f2] text-[22px]">
  Custom values without config
</div>

<!-- With CSS variables -->
<div class="bg-[var(--brand-color)]">
  Using CSS variables
</div>

<!-- Complex values -->
<div class="grid-cols-[1fr_500px_2fr]">
  Custom grid columns
</div>

Colored Box Shadows

<button class="shadow-lg shadow-blue-500/50">
  Blue shadow with 50% opacity
</button>

<div class="shadow-xl shadow-cyan-500/40 hover:shadow-cyan-500/60">
  Interactive colored shadow
</div>

Scroll Snap

<div class="snap-x snap-mandatory overflow-x-auto flex">
  <div class="snap-start shrink-0 w-80">Slide 1</div>
  <div class="snap-start shrink-0 w-80">Slide 2</div>
  <div class="snap-start shrink-0 w-80">Slide 3</div>
</div>

<!-- Vertical snap -->
<div class="snap-y snap-mandatory h-screen overflow-y-auto">
  <section class="snap-start h-screen">Section 1</section>
  <section class="snap-start h-screen">Section 2</section>
</div>

Multi-Column Layout

<div class="columns-3 gap-8">
  <p>Content flows across columns</p>
  <p>Like newspaper layout</p>
</div>

<!-- Responsive columns -->
<div class="columns-1 md:columns-2 lg:columns-3">
  Content
</div>

Aspect Ratio

<div class="aspect-video">
  16:9 aspect ratio
</div>

<div class="aspect-square">
  1:1 square
</div>

<img class="aspect-[4/3] object-cover" src="...">

Print Modifier

<div class="hidden print:block">
  Only visible when printing
</div>

<nav class="print:hidden">
  Hidden when printing
</nav>

Conclusion

Tailwind CSS 3.0 with JIT engine provides instant builds, arbitrary values, and powerful new utilities. Essential upgrade for modern frontend development.

Need frontend modernization? Contact ZIRA Software for Tailwind CSS development.