当記事は公開されてから 1 年以上経過している記事です。

「Tailwind CSS 1.0 ( + Nuxt 2.7) リリース」の改善提案など気軽にご協力いただければ幸いです。

Issue はこちらでよろしくお願いします: https://github.com/jiyuujin/webneko-blog/issues

Tailwind CSS 1.0 ( + Nuxt 2.7) リリース
5/15/2019
Nuxt
CSS
Vue

今回は現 v0.7.4 から v1.0.0 にアップデートする話を。

詳しくは Upgrade steps for all users をご覧ください。

明示的に読み込む必要が無くなった

tailwindcss.jstailwindcss.config.js に変更する。

また postCSS.config.js でこの tailwindcss.config.js を明示的に読み込む必要が無くなったので修正する。

module.exports = {
  plugins: [
-    require('tailwindcss')('./tailwind.js'),
+    require('tailwindcss'),
  ]
}

インポート先が変更された

下記の通り修正してあげる必要があります。

- @tailwind preflight;
+ @tailwind base;

指定方法も、

postCSS.config.js を確認していただければお分かりになるかと。

具体的な数字を付加、色の濃い/薄いの表現をこの付加された数字を使って実現するように変更されている。

-  @apply bg-blue text-white font-bold py-2 px-4 rounded;
+  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;

Nuxt v2.7 🎉

Admin だけではなく、当ブログでもフロントに Nuxt を採用、奇しくも同日 v2.7 リリースされました。

  • 開発環境でのみ SSR 時も console.log() が確認できるようになった
  • store のウォッチ対象が追加、serverMiddleware のウォッチ改善

主に上記に示す通りですが、 TypeScript が Node.js v8 以下でサポートしなくなっていること。タイミングを見つけて現 LTS Node.js v10 に移行する必要があります。

"dependencies": {
-    "nuxt": "^2.6.1",
+    "nuxt": "^2.7.1",
}

こちら Admin、当ブログ共に問題無くアップデートできました。

詳しくは Nuxt v2.7 をご覧ください。

(1521 characters)

あわせてよみたい..