Skip to main content

[note] Tailwind CSS

概念#

PostCSS 會自動偵測有用到的 CSS class 才在 build time 是把它們打包產生出來,因此不會有額外多餘的樣式在打包好的檔案中。

Installation#

installation @ tailwindcss

安裝並建立 tailwindcss 的設定檔:

npm install -D tailwindcss@latest postcss@latest autoprefixer@latestnpx tailwindcss init
# 如果不支援 PostCSS 8npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

建立 postCSS 的設定檔:

// postcss.config.jsmodule.exports = {  plugins: {    tailwindcss: {},    autoprefixer: {},  },};

在 CSS 檔中載入 tailwind 內建的樣式:

/* style.css */@tailwind base;@tailwind components;@tailwind utilities;

Other#