跳至主要内容

[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​