官網https://tailwindcss.com/

CDN 使用

<link href="<https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css>" rel="stylesheet">

• 不能自定義 Tailwind 主題
• 不能使用指令
• 不寧啟用其他的 variants
• 不能安裝第三方套件
• 不能 tree-shake 為使用到的樣式

安裝 使用 NPM

npm install tailwindcss@latest postcss@latest autoprefixer@latest

• 如果報錯誤 Error: PostCSS plugin tailwindcss requires PostCSS 8.

  就安裝 PostCSS 7

  npm uninstall tailwindcss

  npm install tailwindcss@npm:@tailwindcss/postcss7-compat

初始化 Tailwind

• npx tailwind init

• 會有 tailwind.config.js

  module.exports = {
  	purge: [],
  	darkMode: false,
  	theme: {
  		extend: {},
  	},
  	variants: {
  		extend: {},
  	},
  	plugins: [],
  }
  

• 把核心 tailwind 加入到 style.css 檔案裡面

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

不依賴 PostCSS

npx tailwindcss-cli@latest build -o tailwind.css

就可以使用了