Tailwind 1.2 Brings Support for CSS Grid, Transitions, and Transforms

Adam Wathan announced the release of Tailwind 1.2 which brings support for CSS grid, transitions, and transforms, with a bunch of other new features:

Tailwind CSS v1.2.0 is now available!

Includes support for CSS Grid, transitions, transforms, and tons more

Check out the release notes for all of the details:https://t.co/Xc9IB2WOSe

Docs are updated too! pic.twitter.com/t66kCEksKV

— Adam Wathan (@adamwathan) February 5, 2020

Here’s a quick example (from the release notes) of what’s possible with Tailwind’s CSS grid support :

<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-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 class="col-span-1 col-start-1 lg:col-span-4 lg:col-start-2"></div>
    <div class="col-span-1 col-end-3 lg:col-span-6 lg:col-end-9"></div>
</div>

Here’s an example of the quality you can expect in the updated docs for CSS grid, transform, etc.:

The documentation is already updated and you can check out the 1.2 release notes on GitHub. If you want to check out some of the highlight features, here’s links to the docs:

• Grid:
  • Grid Template Columns – Tailwind CSS
  • Grid Column Start / End – Tailwind CSS
  • Grid Template Rows – Tailwind CSS
  • Grid Row Start / End – Tailwind CSS
  • Gap – Tailwind CSS
  • Grid Auto Flow – Tailwind CSS
• Transform:
  • Scale – Tailwind CSS
  • Rotate – Tailwind CSS
  • Translate – Tailwind CSS
  • Skew – Tailwind CSS
  • Transform Origin – Tailwind CSS
• Transition:
  • Transition Property – Tailwind CSS
  • Transition Duration – Tailwind CSS
  • Transition Timing Function – Tailwind CSS