Skip to main content

[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