1.1 Just-in-Time (JIT) Engine by Default:
- Explanation: Tailwind CSS v3 has made the JIT mode the default. It compiles only the styles that are being used, reducing file size and speeding up development.
- Benefits: Faster compilation, smaller CSS files, and fewer performance issues with large projects.
- Example: Show the difference in compiled CSS size between JIT and non-JIT modes.
<!-- Before (large CSS file) -->
<!-- After (smaller, JIT-compiled CSS) -->
1.2 Extended Color Palette:
- Explanation: Tailwind CSS v3 includes an extended color palette, offering more shades and colors right out of the box.
- Example: Demonstrate usage with classes like
bg-sky-500, text-rose-400, etc
<div class="bg-sky-500 text-white p-4">Beautiful Sky Blue</div>
1.3 New Utility Classes for Scroll Snap, Aspect Ratio, and Line Clamp:
- Scroll Snap: Easily control scroll snapping behavior with
scroll-snap classes.
- Aspect Ratio: Keep consistent image or video proportions using
aspect-ratio utilities.
- Line Clamp: Truncate text beyond a certain number of lines with
line-clamp.
- Example:
<div class="snap-start aspect-w-16 aspect-h-9 overflow-hidden">
<img src="image.jpg" class="w-full" />
</div>
<p class="line-clamp-3">
This text will be truncated after three lines. You can read more by expanding.
</p>
1.4 Improved Dark Mode:
- Explanation: Tailwind v3 has refined its dark mode handling, supporting
media or class strategies.
- Example:
<div class="dark:bg-gray-800 dark:text-white">
This text is styled differently in dark mode.
</div>
1.5 Typography and Forms Plugins by Default
- Explanation: Tailwind now includes the
@tailwindcss/typography and @tailwindcss/forms plugins by default, making it easier to create beautiful text content and accessible forms.
<article class="prose prose-lg">
<h1>Typography Made Easy</h1>
<p>Tailwind's typography plugin provides ready-made styles for text-heavy pages.</p>
</article>
<form class="space-y-4">
<input type="text" class="form-input" placeholder="Name" />
</form>
