TailwindCSSのv1.3.0がリリース

本日4/21の9:30（JST）頃にTailwindCSSのバージョン1.3.0がリリースされました。
https://github.com/tailwindcss/tailwindcss/releases/tag/v1.3.0

今回、リリースノートを見ながら、追加された機能を覗いてみたいと思います。
（CodePenではv1.3.1のソースを利用しています。v1.3.1にはバグ修正の変更が追加されています。）

# 新機能
今回の追加内容は次の9つみたいです。
> - New `space` and `divide` layout utilities
- New `transition-delay` utilities
- New `group-focus` variant
- Support for specifying a default line-height for each font-size utility
- Support for breakpoint-specific padding for `container` class
- Added `current` to the default color palette
- New `inline-grid` utility
- New `flow-root` display utility
- New `clear-none` utility

## New space and divide layout utilities
リストなどの要素間のスペース・境界線が設定しやすくなりました。
スペースに関しては負の値も設定できるみたいですね。
`space-(x|y)-[n]`, `-space-(x|y)-[n]` (nはspacing設定に依存)

境界線設定については、線幅の変更が可能みたいです。
`divide-(x|y)`, `divide-(x|y)-[n]`　(nはborderWidth設定に依存)
線色も変更可能です。
`divide-[color]`　(colorはtailwindの色設定に依存)
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="keyakko" data-slug-hash="dyYpBxQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tailwind131demo_space/divide">
  <span>See the Pen <a href="https://codepen.io/keyakko/pen/dyYpBxQ">
  tailwind131demo_space/divide</a> by keyakko (<a href="https://codepen.io/keyakko">@keyakko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

flexboxで順序を逆順にする場合に利用できるオプションも用意されています。
`space-x-reverse`、 `space-y-reverse`

## New `transition-delay` utilities
見た目の遷移に遅延の設定を追加できるようになりました。
`delay-[n]` (nはtransitionDelay設定に依存)

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="keyakko" data-slug-hash="BaoLXxL" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tailwind131demo_transition-delay">
  <span>See the Pen <a href="https://codepen.io/keyakko/pen/BaoLXxL">
  tailwind131demo_transition-delay</a> by keyakko (<a href="https://codepen.io/keyakko">@keyakko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


## New `group-focus` variant
groupクラスが設定された要素がフォーカスされた時の見た目の遷移を、子要素に設定できるようになりました。

```html:(リリースノートより引用)
<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>
```

デフォルトでどの項目に対しても無効になっているみたいです。
利用する場合はtailwindの設定の`variants`に`group-focus`を追加するといいみたいです。


## Support for specifying a default line-height for each font-size utility
tailwindの設定の`font-size`の項目が拡張されて、特定のフォントサイズに`line-height`も併せて設定することができるようになりました。

```javascript:tailwind.config.js
module.exports = {
  theme: {
    fontSize: {
      sm: '12px',
      md: ['16px', '24px'],
    },
  },
}
```

値に`[fontSize, lineHeight]`の形式で値を渡してあげると設定が可能です。

最終的に生成されるCSSでは、`font-size`の後に`line-height`の設定が出力されるみたいなので
行の高さを変えたい場合は`leading-{...}`を併用すればいいみたいです。


## Support for breakpoint-specific padding for `container` class
今までTailwindCSSでは、全ブレイクポイントで共通のpaddingしか指定できませんでしたが
このバージョンから、ブレイクポイント毎にpaddingを設定できるようになりました。

```js:tailwind.config.js（リリースノートより引用）
module.exports = {
  theme: {
    container: {
      padding: {
        default: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
      },
    },
  },
}
```

## Added `current` to the default color palette
TailwindCSSの初期設定に`current: currentColor`が次の4つに追加されました。

- textColor
- borderColor
- backgroundColor
- placeholderColor

`border-current`のようにクラスを設定すると、テキスト色をそのまま指定の項目に利用することができます。
<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="keyakko" data-slug-hash="ZEbpgqR" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="tailwind131demo_default-color">
  <span>See the Pen <a href="https://codepen.io/keyakko/pen/ZEbpgqR">
  tailwind131demo_default-color</a> by keyakko (<a href="https://codepen.io/keyakko">@keyakko</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## New `inline-grid` utility
`display: inline-grid`に対応したみたいです。


## New `flow-root` display utility
`display: flow-root`に対応したみたいです。
（clearfixの代わりとして使えるみたいですね。今回初めて知りました...）

## New `clear-none` utility
`clear: none`に対応したみたいです。
特定の画面サイズで回り込み解除を無効化させたい場合に利用できます。

```html:（リリースノートより引用）
<p class="clear-left md:clear-none">
  <!-- ... -->
</p>
```

# さいごに
もし最新のを利用する場合は、記事執筆時点でいくつかのバグ修正が行われたv1.3.3が既に出てるのでそれを利用することになりそう。
space/divideの機能が嬉しすぎる。早くがっつり使いたいなぁ〜