###### tags: `模板素材` # Prettier & TailwindCSS 設定 將 TailwindCSS 導入至素材樣板，並使用 Prettier 進行自動排版與 class 排序，提高程式碼的一致性。 ## Folder Structure - public |- output.css (build 之後才有) - src |- index.html |- input.css - .prettierrc - package-lock.json - package.json - postcss.config.js - tailwind.config.js ## Tailwind 設定 1. 產生 package.json >> `npm init` 2. 安裝 tailwind & postcss >> `npm install -D tailwindcss postcss autoprefixer` 3. 產生 tailwind.config.js 和 postcss.config.js >> `npx tailwindcss init -p` ### tailwind.config.js ```=javascript module.exports = { content: ["./src/**/*.{html,js}"], //檢視 src folder 內使用到 tailwind class 的文件 theme: { extend: {}, }, plugins: [], important: true // 開啟 !important 功能 } ``` ### postcss.config.js 目前未做額外設定，維持初始狀態。 ```=javascript module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, } } ``` ### input.css 在 src/input.css 內置入下列程式碼： ```=css @tailwind base; @tailwind components; @tailwind utilities; ``` ### package.json 可以加上自定義的 script 便利開發 ```=json "scripts": { "watch": "tailwindcss -i ./src/input.css -o ./public/output.css --watch", "minify": "tailwindcss -i ./src/input.css -o ./public/output.css --minify" } ``` 在 Terminal 輸入指令生成 output.css，或使用指令監聽更動、產出壓縮檔 - `tailwindcss -i ./src/input.css -o ./public/output.css` >> 產出編譯後的 css - `npm run watch` >> 持續監聽 input.css 是否更動 - `npm run minify` >> 產出壓縮版本的 output.css 目前使用的版本紀錄： ```=json "dependencies": { "autoprefixer": "^10.4.13", "postcss": "^8.4.21", "prettier": "^2.8.4", "prettier-plugin-tailwindcss": "^0.2.2", "tailwind": "^4.0.0" } ``` ### index.html 最後在 public/index.html 的 \<head> 內，引入 output.css ，就可以使用囉 ## Prettier 設定 安裝 plugin >> `npm install -D prettier prettier-plugin-tailwindcss` ### .prettierrc 在專案資料夾的根目錄內新增 .prettierrc，填入下方內容： ```=json { "trailingComma": "es5", "tabWidth": 4, "semi": true, "singleQuote": false, "bracketSpacing": true, "htmlWhiteSpaceSensitivity": "css", "plugins": [ "prettier-plugin-tailwindcss" ], "pluginSearchDirs": false } ``` - 目前已知開啟 tab 功能後，將排版過的 HTML 放入系統會出錯，所以設定 tabWidth 為 4、不開啟 tab 功能。 ### Format on save 在 VSCode 內開啟格式化設定： 檔案 > 喜好設定 > 設定 > 文字編輯器 > 格式化 > Format on save ![](https://i.imgur.com/8KHu1JO.png) 在儲存檔案時，Prettier 會自動抓取 .prettierrc 的設定進行格式化。