[TOC] ## 安裝 > 注意: 如果idea 因為文件太大無法只能感知 "幫助->編輯自定義屬性"添加 "idea.max.intellisense.filesize=2900" ### 方式一:通過 CDN 來使用 Tailwind ``` <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> ``` ### 方式二:不依賴 PostCSS 使用 Tailwind 1. 在 src下添加自動以的css(如沒有自定義css,可不生成) ``` /* ./src/tailwind.css */ @tailwind base; @tailwind components; .btn { @apply px-4 py-2 bg-blue-600 text-white rounded; } @tailwind utilities; ``` 2. 在根節點執行 ``` npx tailwindcss-cli@latest init ``` 會在根節點生成 tailwind.config.js 可對 tailwind.config.js 進行一下自定義操作,如 ``` module.exports = { purge: { // 過濾不需要的 css 類 enabled: true, content: [ './src/**/*.html', './src/*.html' ] }, darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], } ``` 3. 生成 css ``` npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css ``` 4. 壓縮 ss ``` npx clean-css-cli@latest -o ./dist/tailwind.min.css ./dist/tailwind.css // 自定義的 css 在單獨生成一個 css 文件 npx clean-css-cli@latest o ./dist/app.css src/css/common.css src/css/index.css ``` ### 方式三:以 PostCSS 插件的形式安裝 Tailwind CSS 用 vue ,racket 時使用