PostCSS 與 Tailwind 的關係
- 什麼是 PostCSS？ PostCSS 是一個工具，用來處理 CSS 文件，透過插件的方式對 CSS 進行轉換。它本身並不是一個框架，而是一個強大的工具鏈，可以：
增強 CSS 語法（如自動加前綴）。 支援未來的 CSS 特性（如嵌套規則）。 透過插件實現高度客製化。
- 什麼是 Tailwind CSS？ Tailwind CSS 是一個 CSS 工具框架，專注於實用的原子類別（utility-first classes），讓你可以直接在 HTML 中使用簡單的類別快速構建界面，而不需要手寫太多自定義 CSS。
安裝 npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init，會建立 tailwind.config.js 檔案
檔案內容如下
新增以下內容，告知哪些檔案的 style 需要被處理
修改副檔名 postcss.config.cjs
- 模組格式：CommonJS vs ES Modules Node.js 支援兩種模組格式：
CommonJS（require 和 module.exports） ES Modules（import 和 export） 當 package.json 中包含 “type”: “module” 時，Node.js 預設會將 .js 文件視為 ES 模組，這樣會導致以下行為：
ES 模組中不允許使用 module.exports 或 require。 相反，必須使用 export default 和 import。 而 .cjs 文件則被強制視為 CommonJS，不管 package.json 的 “type” 配置是什麼。
最佳實踐：對於 PostCSS 這類工具的配置，推薦使用 .cjs 格式，因為它的兼容性更好，且不需要重構整個項目。