2019.05.14

Tailwind CSS v1.0 が正式リリースされました🎉

Tailwind CSS v1.0 が正式リリースされたので、今回は一部内容を確認してみます

TailwindCSS

フロントエンド

[ 目次 ]

はじめに
Release Notes
v0.x から v1.0へのアップグレード

tailwind.js を tailwind.config.js に変更する
CSSのTailwind読み込みを @tailwind preflight から @tailwind baseに変更
config関数をtheme関数に変更
classの定義変更について

text/bg/border-{color} classes

最後に

はじめに

こんにちは、香港に住んでいるWEBデベロッパーのなかむ（@nakanakamu0828）です。
Tailwind CSS v1.0 が正式リリースされたので、今回は内容を確認してみましょう。

Release Notes

まずは、公式のリリースノートを確認してみましょう。
2019/05/13にTailwind CSS v1.0が正式リリースされました。より汎用性が高まり利用しやすくなったのではないでしょうか！？

Tailwind CSS v1.0 ReleaseNote

v0.x から v1.0へのアップグレード

公式サイトにv0.xからv1.0へのアップグレード方法がまとまっています。こちらを確認してみてください。
本ブログでは変更点をピックアップしたいと思います。

tailwind.js を tailwind.config.js に変更する

./node_modules/.bin/tailwind init コマンドや npx tailwind init コマンドでTailwind CSSの設定ファイルを生成できます。v1.0では生成したファイル名がtailwind.jsからtailwind.config.jsに変更されました。アップグレードする際もリネームするようにしましょう。

※ ファイル名は任意に変更できます。デフォルトのファイル名が変わっています。

また、ファイル内の定義も一部仕様変更されています。以下からご確認ください。

tailwind.config.jsでは、themeという要素が追加され、その中にcolors, screensなどスタイルの仕様を定義するように変更されています。

./node_modules/.bin/tailwind init --full or npx tailwind init --full のように--fullオプションをつけることで、デフォルトの設定ファイルが生成できます。アップグレード時も--fullオプションで出力したファイルをベースに修正した方が手間が少なそうですね。
（--fullオプションがない場合、雛形のみ出力されます。個人で定義を追加する必要があります）

ファイルをリネームした際は、設定ファイルの読み込みを変更しましょう。
Laravel Mixの場合、以下のようになります。

mix.postCss('resources/css/app.css', 'public/css/app.css', [
-     require('tailwindcss')('./tailwind.js'),
+     require('tailwindcss'),
])

mix.postCss('resources/css/app.css', 'public/css/app.css', [
-     require('tailwindcss')('./tailwind.js'),
+     require('tailwindcss')('./tailwind.config.js'),,
])

CSSのTailwind読み込みを @tailwind preflight から @tailwind baseに変更

Replace @tailwind preflight with @tailwind baseに記載がある通り、以下のようにCSSでの読み込み方法が変わります。

- @tailwind  preflight;
+ @tailwind  base;

  @tailwind  components;
  @tailwind  utilities;

config関数をtheme関数に変更

Replace config() with theme()に記載がある通り、関数が変わります。

  .btn {
-   padding: config('padding.3');
+   padding: theme('padding.3');
    // ...
  }

classの定義変更について

classの定義も一部変わっています。今回試してみて修正が多かったclass（よく利用するclass）を紹介します。

text/bg/border-{color} classes

colorの定義が変わりました。text, bg, borderのカラーは今まで７段階のカラーバリエーションだったのですが、v1.0から９段階のバリデーションになっています。

Replace 0.x colors with rough draft of 1.0 colors

text-grey-darkest --> text-gray-900 に変更されるなど、接尾語が数値で定義できるようになっています。
これはtext-gray-150など独自の定義ができるように汎用性を持たせる為、数値になったようです。

grey --> grayに変更。カラーバリエーションは以下の通りです。

Old	New
black	gray-900
grey-darkest	gray-800
grey-darker	gray-700
grey-dark	gray-600
grey	gray-500
grey-light	gray-400
grey-lighter	gray-200
grey-lightest	gray-100

gray以外は以下のようになります。

Old	New
{{color}}-darkest	{{color}}-900
{{color}}-darker	{{color}}-800
{{color}}-dark	{{color}}-600
{{color}}	{{color}}-500
{{color}}-light	{{color}}-400
{{color}}-lighter	{{color}}-200
{{color}}-lightest	{{color}}-100