Skip to content

v1.3.0
Compare
Choose a tag to compare
@adamwathan adamwathan released this 21 Apr 00:40
v1.3.0
d710db5

Tailwind CSS v1.3.0

Holy crap a new Tailwind CSS release! We've got a few new goodies in this one, and I've made sure to put the most exciting ones at the top 🚀

New Features

New space and divide layout utilities (#1584, #1594)

Prior to Tailwind v1.3, if you wanted to add some space or a border between elements, you had to manually add the necessary margin/border to all but one of the children:

<!-- Before -->
<ul>
  <li>One</li>
  <li class="mt-4">Two</li>
  <li class="mt-4">Three</li>
</ul>

Tailwind v1.3 introduces new space-{x/y}-{n}, divide-{x/y}-{n}, and divide-{color} utilities for controlling this at the parent level instead, simplifying this common pattern into something concise and declarative that doesn't require all of that annoying duplication:

<!-- After -->
<ul class="space-y-4">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The space-x-{n} utilities add a left margin to all but the first element, and the space-y-{n} utilities add a top margin to all but the first element:

<!-- Horizontal stack with 8px of space between each item -->
<ul class="flex space-x-2">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Vertical stack with 16px of space between each item -->
<ul class="space-y-4">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The space utilities inherit their configuration from the global spacing configuration by default, and include negative variations like -space-x-2 to create overlapping effects.

The divide-x-{n} utilities add a left border to all but the first element, and the divide-y-{n} utilities add a top border to all but the first element:

<!-- Horizontal list with 1px border between each item -->
<ul class="flex divide-x">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

<!-- Vertical list with 1px border between each item -->
<ul class="divide-y">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

The divide utilities inherit their configuration from the borderWidth configuration, and support the default keyword (set to 1px out of the box, like with borderWidth) so you can use divide-y instead of divide-y-1.

The divide-{color} utilities are used to set the color of the dividing borders:

<!-- Vertical list with 1px blue border between each item -->
<ul class="divide-y divide-blue-500">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

We've also included space-{x/y}-reverse and divide-{x/y}-reverse utilities which can be useful if you are reversing the direction of items in a container using either flex-row-reverse or flex-col-reverse. These utilities swap left margins for right margins, top margins for bottom margins, left borders for right borders, and top borders for bottom borders to account for the items being in reverse order:

<!-- Reversed horizontal list with 8px space between each item -->
<ul class="flex flex-row-reverse space-x-2 space-x-reverse">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

There are a couple limitations of our implementation that are worth pointing out:

  • They break down if your items wrap, you'll want to do something complicated with negative margins if you need to handle this
  • They break down if you start manually changing the order of things using the order property

Despite these limitations, I think you'll still find these incredibly useful. Eventually gap will have universal support in flexbox layouts and we can all rejoice.

All of these utilities include responsive variants by default, and their values and variants can be customized using the space, divideWidth, and divideColor configuration keys respectively.

New transition-delay utilities (#1462)

Tailwind v1.3 introduces new delay-{amount} utilities for the transition-delay property:

<div class="transition ease-in-out duration-500 delay-1000">
  <!-- ... -->
</div>

We include the same values we do for the duration-{amount} utilities and generate responsive variants by default:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
    transitionDelay: {
      '75': '75ms',
      '100': '100ms',
      '150': '150ms',
      '200': '200ms',
      '300': '300ms',
      '500': '500ms',
      '700': '700ms',
      '1000': '1000ms',
    },
  },
  variants: {
    // ...
    transitionDelay: ['responsive'],
  },
  // ...
}

New group-focus variant (#1577)

We've added a new group-focus variant that works just like the existing group-hover variant, but for focus states.

This is useful when you want to add custom focus style to a button or link that has some nested child you want to style in a specific way, for example, changing the color of an icon inside of a button when the button is focused:

<button class="group text-gray-600 focus:bg-gray-100 focus:text-gray-700">
  <svg class="h-6 w-6 text-gray-400 group-focus:text-gray-500">
    <!-- ... -->
  </svg>
  Submit
</button>

This variant not enabled for any utilities by default, but can be enabled in the variants section of your config file.

Support for specifying a default line-height for each font-size utility (#1532)

A common pattern we've run into in our own Tailwind projects is repeatedly pairing a font-size utility with a particular line-height utility, for example always using text-sm with leading-5.

Tailwind v1.3 now lets you specify a default line-height for each font-size utility in your config file, using a tuple of the form [fontSize, lineHeight]:

// tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      // Will embed no line-height value
      sm: '12px',

      // Will use `font-size: 16px` and `line-height: 24px`
      md: ['16px', '24px'],
    },
  },
}
.text-sm {
  font-size: 12px;
}

.text-md {
  font-size: 16px;
  line-height: 24px;
}

The font-size utilities are generated before the line-height utilities in the final CSS, so you can still override the line-height for a particular font-size by simply adding a leading-{size} utility:

<!-- Will still be `line-height: 1`, even though the default line-height for `text-md` is `24px` (as per the example config above) -->
<div class="text-md leading-none"></div>

We haven't changed the default config to include default line-heights as that would be a breaking change, but this is a feature we will likely take advantage of in Tailwind 2.0 sometime in the future.

Support for breakpoint-specific padding for container class (#1398)

Prior to v1.3, you could configure the container class to have built-in horizontal padding like so:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}

Tailwind v1.3 enhances this functionality to allow you to specify a different amount of padding for each breakpoint:

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}

Added current to the default color palette (#1438)

The default color palette now includes current for currentColor, which simplifies some situations like creating buttons where the border color should match the text color:

<!-- Before -->
<button
  class="text-gray-500 hover:text-gray-700 focus:text-gray-700 border border-gray-500 hover:border-gray-700 focus:border-gray-700"
>
  <!-- ... -->
</button>

<!-- Now -->
<button class="text-gray-500 hover:text-gray-700 focus:text-gray-700 border border-current">
  <!-- ... -->
</button>

Since this color has been added to the default color palette, it is available for textColor, borderColor, backgroundColor, and placeholderColor utilities automatically.

New inline-grid utility (#1375)

We've added an inline-grid utility for setting display: inline-grid. This probably should've been included in v1.2 and somehow got missed, but it's here now baby.

<span class="inline-grid grid-cols-3 col-gap-4">
  <!-- ... -->
</span>

Will you ever use this? I never have, but it should still be there dammit.

New flow-root display utility (#1247)

We've added a new flow-root utility for display: flow-root. Never heard of it? Me neither until it was PR'd.

It behaves exactly like display: block with one magical difference: it prevents collapsing margins!

<div class="flow-root">
  <!-- ... -->
</div>

You'll start to find all sorts of useful use-cases for this if you pay attention, like completely obsoleting clearfix hacks.

New clear-none utility (#1413)

This has been in the documentation for months but didn't actually exist in the framework — whoops.

It sets clear: none, which is mostly useful for resetting the clear property at different breakpoints.

<p class="clear-left md:clear-none">
  <!-- ... -->
</p>

Only two people noticed it was documented but missing, so odds are you don't even care that we added this.

Assets 2
Loading