Tailwindcss v3.0.1のビルドファイルの作り方を確認したい

Question

#Tailwindcss v3.0.1のビルドファイルの作り方を確認したい
現在Tailwindcss を触って勉強中なのですが、環境構築の結果としてできるファイルについての質問です。
（Next.jsのアプリを作って確認中）

##知りたいこと
公式の手順でtailwindcssのインストールを行ったが、出来上がったファイルが不足しているように思っています。
できたファイルに問題ないかを確認したいです。

※公式の手順は以下を参照
https://tailwindcss.com/docs/installation

簡単にいうと
@tailwind base;
@tailwind components;
@tailwind utilities;
を記載したファイル（以下のコマンド内の「style.css」）を読み込み、
npx tailwindcss -i ./src/styles/style.css -o ./public/css/Tailwindcss.css --watch
のコマンドをたたくということなのですが、確かにこの手順で「Tailwindcss.css」は問題なく作成できました。

しかし、出来上がったファイルは約500行で公式のリファレンスに記載しているクラスのすべてが記載されているわけではなく
不足があるのでは？と思っています。

以下のサイトを見るとVer2.1.2では
「5万行以上の行数のファイルができた」と記載があるため、少し不思議に思っています。
https://reffect.co.jptml/tailwindcss-for-beginners#npmTailwindcss
（npmを使ったTailwindcssのインストールの項を参照）

同じようにver3.0以上でtailwindcssをインストールした方は、どれくらいの行数のファイルができていますか？
また、公式の手順以外で何かプラスで作業をしたものがあれば教えていただけると助かります。

##できあがったファイルの冒頭は以下の通りです。

/*
! tailwindcss v3.0.1 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

Answer 1

v3ではJITがデフォルトなので開発時でも必要なCSSだけがビルドされる。
それが正しい動作。

どうでもいい小手先のことよりv2からv3みたいにメジャーバージョンが変わる時は古い情報が全て役に立たなくなるほど変わることもあるって常識を身につける方が大事。

Comments

[ko_se]

> JITがデフォルトなので開発時でも必要なCSSだけがビルドされる

なるほどー！一気に腑に落ちました。

> v2からv3みたいにメジャーバージョンが変わる時は古い情報が全て役に立たなくなるほど変わることもあるって常識を身につける方が大事。

こちらも叱咤いただきありがとうございます！
メジャーバージョンアップの際はまず何が変更点なのかをきちんと確認すべし、ですね。