Tailwind CSS 2.0で追加された機能全部使ってデモページを作る


この記事は[弥生 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/yayoi)の4日目の記事です。

さて、2020年11月19日にTailwind CSSのver2.0がリリースされました🎉🎉🎉
https://blog.tailwindcss.com/tailwindcss-v2

それを記念して？ Tailwind CSS 2.0で追加された機能全部入れてデモページを作ってみました。アドベントカレンダー記事というのもあり、Qiitaアドベントカレンダーをインスパイアした形で作っています。

TailwindCSSとは何ぞやという話は、いろんな方がすでにたくさん記事を書いていますので割愛します。

(ご参考)

- [TailwindCSS入門 ~ Utility First + デザインシステムの構築 ~](https://qiita.com/oedkty/items/68461080515ec1012980)
- [CSS Utility Classes and "Separation of Concerns" 翻訳](https://qiita.com/kojiii/items/fbd61ca8ac9cd7350475)

# 作ったもの
アドベントカレンダーのページっぽく、ヘッダー、タイトル、カレンダー、フッターを含んだ1ページです。レスポンシブ、ダークモード対応しています。生のCSSは1行も書いていません。全てTailwindCSSだけで作っています。

なお、Tailwind Playというサンドボックス環境に公開していますので、こちらから作ったものとソースコードがみれます。(開いたらビルドが走るみたいですので、初回表示は遅いです。)
https://play.tailwindcss.com/euCH5tu0IA?layout=horizontal

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/29d91d12-f38f-ad3c-1a65-fca47d8e8d32.gif)

chromeの開発ツールでブラウザのダークモード切り替えが出来ますので、遊んでいただければと思います。(Tailwind Playヘッダーの月と太陽マーク押してもスイッチしないので注意)

# Tailwind CSS 2.0で追加された機能

[ニュースリリース](https://blog.tailwindcss.com/tailwindcss-v2)からの引用です。

>
- All-new color palette
- Dark mode support
- Extra wide 2XL breakpoint
- New outline ring utilities
- Utility-friendly form styles
- Default line-heights per font-size
- Extended spacing, typography, and opacity scales
- Use @apply with anything
- New text overflow utilities
- Extend variants
- Group-hover and focus-within by default
- Default transition duration and easing curve
- Incompatibility with IE11


これらを全部デモページに埋め込みましたので、一つ一つ実装したものを見ていきたいと思います。

# All-new color palette
デフォルトで用意されているカラーパレットが全面的に刷新され、今までの10色、9段階の明暗のカラーパレットから、22色、10段階の明暗が用意されました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/6a6cbfe4-5eaa-aff8-f4be-6c567394e8c0.png)
デモページでは`cyan`を使ってみました。色の追加はtailwind.config.jsという設定ファイルをいじります。

```js:tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      cyan: colors.cyan,
    },
  },
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/b1ae6c70-2a74-5c1e-3507-801d2bbfcc85.png)

```html
<span class="block text-cyan-600 dark:text-cyan-500 xl:inline text-6xl"> 2020 </span>
```
色はこんな感じです。いい色ですね。

# Dark mode support
簡単にダークモード対応出来るようになりました。設定ファイルに1行追加して、

```js:tailwind.config.js
module.exports = {
  darkMode: 'media',
  // ...
}
```

```html
<header class="h-16 bg-white dark:bg-gray-800 px-4">
</header>
```
こんな感じで`dark:`ディレクティブを使って記述すれば、ブラウザのダークモード設定時には`dark:`のスタイルが使用されます。簡単！すごい！

# Extra wide 2XL breakpoint
1536px以上の画面サイズに対する新しいブレイクポイント`2xl:`が追加されました。デモページでは画面サイズを1536px以上にすると文字が出てくるようにしてみました。

```html
<p class="hidden 2xl:block text-9xl text-center font-bold my-20">Too wide and Too Big!!</p>
```

![toowide.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/212176c9-8296-b824-8ced-6c2cbf65692b.gif)


# New outline ring utilities
入力フォームなどでフォーカスされた時に出てくる黒い枠のところをoutline ringと呼んでいます。このスタイルが増えました。

```html
<input type="text" placeholder="ユーザーID" class="rounded border mr-2 px-2 py-1 focus:outline-none focus:ring-4 focus:ring-cyan-300 focus:ring-opacity-75" />
```
これをフォーカスすると、、
![スクリーンショット 2020-12-01 20.43.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/a994bf47-9c46-7909-d0a3-977d0d207baa.png)
こんな感じにできます。
![スクリーンショット 2020-12-01 20.43.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/95355d1e-ae48-12e0-711f-45bdb85e2219.png)

# Utility-friendly form styles
ブラウザごとに異なるフォームデザインをノーマライズ・リセットしてTailwindのユーティリティクラスをシンプルに使用できるようになりました。
`@tailwindcss/forms`プラグインを使用するようにconfigファイルに記述します。

```js:tailwind.config.js
module.exports = {
  // ...
  plugins: [require('@tailwindcss/forms')],
}
```

```html
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
<input type="checkbox" class="rounded-full mx-1 text-cyan-600 focus:outline-none" />
```
![スクリーンショット 2020-12-01 21.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/05b55ee4-0a26-ee7a-9605-dcb7ac570949.png)
ユーザビリティは悪いですが、丸いチェックボックスなんかも作れますし、チェックした色も簡単に変えられます。**これ、地味に凄くないですか？**今まではチェックボックスの色変えようと思ったらCSSたくさん書いて自前でチェックの形作ってました。それが`text-cyan-600`だけで色変わります。

# Default line-heights per font-size
フォントサイズを選んだ時にデフォルトでLine Heightも設定されるようになりました。

```html
<p class="text-xl">This will have a line-height of 1.75rem automatically.</p>
```

# Extended spacing, typography, and opacity scales
デフォルトで選べるサイズが増えました。
`96`とかはあまり使わないと思いますが、`7`とかはたまに使いたい場面があったので良かったと思います。

テキストサイズも`9xl`まで用意されています。ちなみにブレイクポイントのところで出した「Too Big！」の文字は`text-9xl`を使っています。
![toowide.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/13dcf5ac-2c94-655b-39af-f3d63770733a.gif)
# Use @apply with anything
普通のセマンティックなクラスを作りたい場合、`@apply`ディレクティブを使って共通化できましたが、今までは`focus:`や`hover:`などの一部の機能が使えませんでした。今回から全ての機能を`@apply`に使用できます。もちろん`dark:`もです。

```html
<button class="btn-cyan">参加登録</button>
```

```css
.btn-cyan {
  @apply bg-cyan-600 dark:bg-cyan-500 text-white text-sm px-2 py-1 rounded mt-2 hover:bg-cyan-700;
}
```

# New text overflow utilities
今まではテキストが要素からはみ出した時に`truncate`しかありませんでしたが、`overflow-ellipsis`と`overflow-clip`が使えるようになりました。ただ、これは日本語には使えないかもしれないです。英語はうまく`...`が入りましたが、日本語はうまくいきませんでした。

```html
<div class="h-20 w-24 overflow-hidden overflow-ellipsis text-xs mt-1">
  <a class="text-cyan-600 dark:text-cyan-500 hover:underline cursor-pointer">This is a long long English Sentences and LongLongLongLongOneWord</a>
</div>
```

![スクリーンショット 2020-12-01 22.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/18c01e41-5d86-d40f-08c0-0250947779b0.png)

# Group-hover and focus-within by default
グループを指定して、その要素がホバーされたら子要素にもホバー時の挙動が適用できます。

```html
<td class="group h-40 w-1/7 border-r text-gray-600 dark:text-gray-300 hover:bg-gray-200">
  <div class="flex flex-col h-full p-2">
    <div class="text-center">8</div>
    <div class="flex items-center text-xs mt-2 hover:underline">
      <div class="h-5 w-5 rounded-full bg-gray-500 group-hover:bg-cyan-600 mr-1"></div>
      <a href="#" class="text-cyan-600 group-hover:text-gray-500 dark:text-cyan-500"> User Name </a>
    </div>
    <div class="text-xs text-gray-400 mt-1 group-hover:text-red-400">group hover確認</div>
  </div>
</td>
```
![hover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/a04030f5-97a8-679d-a487-22d9bce74d2f.gif)
子要素は子要素でホバーしたときの挙動を変えられます。便利。

# Default transition duration and easing curve
transitionとeaseのデフォルト値を定義できるようになりました。tailwind.config.jsに`transitionDuration = 1000ms`を試しに追加してみます。

```js:tailwind.config.js
module.exports = {
  darkMode: "media",
  theme: {
    //...//
    transitionDuration: {
      DEFAULT: '1000ms',
    },
    transitionTimingFunction: {
      DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
    },
  },
  variants: {},
  plugins: [require('@tailwindcss/forms')],
}
```

```html
<button class="bg-cyan-600 rounded text-white px-3 py-2 transition  hover:bg-white hover:text-cyan-600 shadow-lg focus:outline-none">招待する</button>
```

`transition`クラスを追加するだけでいい感じになりました。アニメーションの一貫性を維持しやすくなりますね。
![transition.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/555569/452e9290-7c4a-054e-6285-950dee8afab5.gif)

# 以上！
2.0で追加された機能を全部試してみました。

個人的にはダークモードがやっぱり楽すぎるのと、`@apply`全機能対応が嬉しかったです。

最後までお付き合いいただきありがとうございました。