tailwindcss 安裝教學

最近 tailwindcss 這個 css 的工具在不少朋友口中都獲得了稱讚，想說來研究一下他的特點在哪邊，首先就來安裝一下。

因為需要用到打包工具，這邊我使用 parcel.js。

在 parcel 的環境下我們來開始安裝，首先在 npm 安裝 tailwindcss

npm install tailwindcss@latest postcss@latest autoprefixer@latest

因為 tailwindcss 是以 postcss 為基礎的，所以如果之前沒有用過 postcss，也需要安裝一下

npm i postcss-cli

接著在專案的 root 建一個 postcss.config.js 的檔案，內容為：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

然後執行這段：

npx tailwindcss init

這段會幫我們建一個 tailwind.config.js 的檔案，內容為：

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

接下來就可以開始寫 tailwindcss 了，建一個 css 檔，並在裡面輸入以下這段：

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

在 package.json 加上這段

"scripts": {
    "build": "postcss path/tailwind.css -o path/tailwind.css"
  },

然後執行

npm run build

就可以看到打包好的 css 檔案了。