[note] Tailwind CSS
概念
PostCSS 會自動偵測有用到的 CSS class 才在 build time 是把它們打包產生出來,因此不會有額外多餘的樣式在打包好的檔案中。
Installation
installation @ tailwindcss
安裝並建立 tailwindcss 的設定檔:
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init
# 如果不支援 PostCSS 8
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
建立 postCSS 的設定檔:
// postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
在 CSS 檔中載入 tailwind 內建的樣式:
/* style.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Other
- Tailwind CSS IntelliSense @ VSCode Extension