# 3.0新增特性

Just-in-Time, all the time — lightning fast build times, stackable variants, arbitrary value support, better browser performance, and more.
Every color out of the box — including all of the extended palette colors like cyan, rose, fuchsia, and lime, and fifty shades of grey gray.
Colored box shadows — for fun glow and reflection effects, and more natural shadows on colored backgrounds.
Scroll snap API — a comprehensive and composable set of utilities for CSS-only scroll snapping.
Multi-column layout — so you can finally build that online newspaper you’ve been dreaming about.
Native form control styling — make checkboxes, radio buttons, and file inputs match your brand without reinventing the wheel.
Print modifier — control how your site looks when someone prints it, right from your HTML.
Modern aspect ratio API — no more padding hacks, well unless you need to support Safari 14, which you probably do, but still.
Fancy underline styles — the missing piece to making that side-project of yours finally take off.
RTL and LTR modifiers — for complete control when building multi-directional websites.
Portrait and landscape modifiers — honestly just because they were really easy to add.
Arbitrary properties — now Tailwind supports CSS properties we’ve never even heard of.
Play CDN — the new Just-in-Time engine squeezed into a CDN script that runs right in the browser.
Tons of other utilities — including support for touch-action, will-change, flex-basis, text-indent, scroll-behavior, and more.

# ust-in-Time, all the time

Lightning fast build times. Tailwind can take 3–8s to initially compile using our CLI, and upwards of 30–45s in webpack projects because webpack struggles with large CSS files. This library can compile even the biggest projects in about 800ms (with incremental rebuilds as fast as 3ms), no matter what build tool you’re using.
Every variant is enabled out of the box. Variants like focus-visible, active, disabled, and others are not normally enabled by default due to file-size considerations. Since this library generates styles on demand, you can use any variant you want, whenever you want. You can even stack them like sm:hover:active:disabled:opacity-75. Never configure your variants again.
Generate arbitrary styles without writing custom CSS. Ever needed some ultra-specific value that wasn’t part of your design system, like top: -113px for a quirky background image? Since styles are generated on demand, you can just generate a utility for this as needed using square bracket notation like top-[-113px]. Works with variants too, like md:top-[-113px].
Your CSS is identical in development and production. Since styles are generated as they are needed, you don’t need to purge unused styles for production, which means you see the exact same CSS in all environments. Never worry about accidentally purging an important style in production again.
Better browser performance in development. Since development builds are as small as production builds, the browser doesn’t have to parse and manage multiple megabytes of pre-generated CSS. In projects with heavily extended configurations this makes dev tools a lot more responsive.

# Colored box shadows

After about five false starts, we finally figured out an approach we liked, and now Tailwind CSS v3.0 includes colored shadows:(斜杠后的数字表示不透明度，0-透明，100-完全不透明)

<button class="bg-cyan-500 shadow-lg shadow-cyan-500/50 ...">Subscribe</button>
<button class="bg-blue-500 shadow-lg shadow-blue-500/50 ...">Subscribe</button>
<button class="bg-indigo-500 shadow-lg shadow-indigo-500/50 ...">Subscribe</button>

1
2
3

# Multi-column layout

<div class="columns-1 sm:columns-3 ...">
  <p>...</p>
  <!-- ... -->
</div>

1
2
3
4