tailwindcss 安裝教學

標籤: tailwindcss CSS

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

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

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

npm install [email protected] [email protected] [email protected]

 

因為 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 檔案了。