尾風3とスイープアトリビュート

会社が始まってからもう一ヶ月以上になりました.
現在担当しているプロジェクトでは、cssはtailwindというライブラリを使用しています.この友达は本当にhtml class属性値を追加してcssを適用しています.最初はまばらでしたが、使い勝手が良く、切れ目もよく、反応型のデザインを体現していました.
デフォルト設定も良いですが、カスタマイズしたい場合はtailwindが使えます.config.jsをプロジェクトディレクトリのルートディレクトリに配置し、必要なプロパティを再定義すればいいです.
今日この文章を書いたのはtailwindを使うメリットをまとめるためです.
最初はそうでした.組長が作ってくれたプロジェクトテンプレートをローカルでぐるっと回って、尾風警告を出したのではないでしょうか.そこでconfigファイルをチェックすると、contentプロパティにenabledプロパティとcontentプロパティの2つが作成されていることがわかります.

module.exports = {
	content: {
		enabled: process.env.NODE_ENV === "production"
		content: ['./public/index.html','./src/**/*.{ts,tsx}']
	}
}

最近tailwindを持ってプロジェクトを行い、tailwind 2から3への変換中に大量の挿入が行われ、tailwind公式ドキュメントを何時間も見た人としてcontent属性内にファイルパスを指定してもenabled属性を指定したりcontent内にcontentを指定したりすることは覚えていません.
このため、このプロパティを削除してファイルパスのみを作成すると、警告は消えます.tailwind 3バージョンに伴い、purge属性が内容に変更されたので修正しましたが、実際にpurge属性が何を意味するのか分からないので、今日は組長に教えてもらい、もう一つ学びました.
purgeプロパティはcss最適化に関連するプロパティであり、現在のプロジェクトで使用されているtailwind cssプロパティのみを解釈して構築するための最適化モジュールバンドルと似ています(理解).
開発環境ではtailwind cssモジュール全体をロードできますが、操作環境ではバインドするファイルをできるだけ減らすことが望ましいので、purcheプロパティを設定して、開発環境に応じてモジュールをインポートできます.
ただし、この属性がtailwind 3にアップグレードされるにつれて、基本的にpurce属性が使用されるため、操作環境でbuildを行う場合、cssをさらに最適化したい場合はcssnanoなどのツールを使用することができます.

Optimizing for Production
Getting the most performance out of Tailwind CSS projects.

Tailwind CSS is incredibly performance focused 
and aims to produce the smallest CSS file possible 
by only generating the CSS you are actually using in your project.

cssnanoは最終的に生成されたcssファイルをもう一度圧縮する役割であり、purge属性はツリー構造に関連する概念である.
参考資料:
https://tailwindcss.com/docs/content-configuration
https://tailwindcss.com/docs/optimizing-for-production