Tailwind CSS 1.2: What's New, Release History & EOL Status

What Is New in Tailwind CSS 1.2

How does Tailwind CSS 1.2 enable CSS transitions?

Tailwind 1.2 adds a full suite of transition utilities that let you control the property, duration, and timing function directly in markup.

In practice you add a transition-{property} class together with duration-{ms} and ease-{type} to animate state changes.

<button class="opacity-50 hover:opacity-100 transition-opacity duration-100 ease-out">...

The default configuration ships common values such as transitionProperty (opacity, transform, etc.), transitionDuration (75-1000ms) and transitionTimingFunction (linear, in, out, in-out).

What new transform utilities are available in Tailwind CSS 1.2?

Tailwind 1.2 introduces utilities for scaling, rotating, translating, skewing, and setting transform origins.

These utilities are composable; you enable transforms with the transform class and then stack any combination of scale-*, rotate-*, translate-x-*, skew-y-*, etc.

<span class="transform scale-150 rotate-45 translate-x-full origin-center"></span>

Note that the implementation uses CSS custom properties, so the utilities are not supported in IE11.

How can I build CSS Grid layouts with Tailwind CSS 1.2?

Tailwind 1.2 ships a comprehensive set of grid utilities that cover columns, rows, gaps, and explicit placement.

Use grid to create a grid container, grid-cols-{n} or grid-rows-{n} to define tracks, and gap-{size} for spacing.

<div class="grid grid-cols-2 lg:grid-cols-8 gap-6">
  <div class="col-span-1 lg:col-span-3"></div>
  <div class="col-start-1 col-end-3 lg:col-start-4 lg:col-end-8"></div>
</div>

The grid utilities are not IE11-compatible; older browsers should fall back to Flexbox.

Which new sizing and visual utilities does Tailwind CSS 1.2 introduce?

Version 1.2 adds several utilities that make responsive sizing and subtle visual tweaks easier.

• max-w-screen-{breakpoint} matches the breakpoint's width (e.g., max-w-screen-lg).
• max-w-none removes any max-width constraint.
• rounded-md provides a 6 px border radius.
• shadow-sm and shadow-xs add lightweight shadows for depth and outline effects.
• stroke-{width} controls SVG stroke width (0, 1, 2).
• Fixed line-height utilities like leading-5 give precise vertical rhythm.

These utilities are ready to drop into production without additional configuration.

What plugin API enhancements are included in Tailwind CSS 1.2?

Tailwind 1.2 introduces a formal plugin module with plugin() and plugin.withOptions() helpers.

Plugins can now be required directly--Tailwind will invoke them automatically--so you no longer need to add empty parentheses for plugins that accept no options.

Additionally, plugins can extend the user's config by returning a configuration object as the second argument to plugin() or plugin.withOptions(). This works hand-in-hand with the extend key.

Config files that require() other modules are now watchable, meaning changes to those dependencies trigger a rebuild in webpack/PostCSS watchers.