世界を旅して暮らしたい放浪エンジニアブログ

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

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

[ 目次 ]

はじめに

こんにちは、香港に住んでいる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のカラーは今まで7段階のカラーバリエーションだったのですが、v1.0から9段階のバリデーションになっています。

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

最後に

簡単ではありますが、Tailwind CSS v1.0リリースを記念して記事をまとめました。
順次v0.7.4を利用しているプロジェクトをアップグレードしていきたいと思います。また、その際に気づいたことを追記していきます。

前のページ

Profile

なかむ🇭🇰Webデベロッパー

なかむ🇭🇰Webデベロッパー

香港在住4年目になるWEBエンジニアのなかむです。 現在は、LaravelやRailsを利用したWEB開発を中心にエンジニアをしています。 顧客は全て日本の企業になります。リモート開発にて各企業様の支援を行なっております

プロフィール詳細はこちら

Latest Posts