安裝 Install

CSS: Framework 框架: Tailwind CSS 安裝 Install
Categories:
Tags:

安裝

在專案下面使用 npm 即可安裝 tailwind 套件，即可立即使用 tailwind 語法開始開發

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
npm install postcss-import --save-dev

建立設定檔案

在專案下建立 tailwind 設定檔案 tailwind.config.js，tailwind 會根據客製化設定檔案狀況去產生出對應的 css

npx tailwindcss init

在後方指令加入 --full 即可輸出完整設定檔案，可以直接建立完整的設定檔案，再從中去修改自己需要的部分，減少需要不斷地查找可設定的時間

npx tailwindcss init --full

建立 tailwind.css

在專案目錄下建立 tailwind.css，並載入 tailwind css 相關元件

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

輸出 tailwind.css

npx tailwindcss -i ./src/tailwind.css -o ./dist/tailwind.css

npx tailwindcss -o tailwind.css

建立 postcss 設定檔案

在專案目錄下建立 postcss.config.js 檔案，則使用 postcss 輸出 css 時則會針對這個設定檔案去輸出 css

// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),    
    require('autoprefixer'),
    require('postcss-100vh-fix'),
  ]
}

使用 postcss 輸出 tailwind.css

在輸出時加入 --postcss 參數即可使用 postcss 輸出 css

npx tailwindcss --postcss -o tailwind.css

輸出 Production minify css

npx tailwindcss -o build.css --minify

參考資料