Andy Blog
0%

Tailwind CSS - 安裝

Posted on Edited on Disqus:

Tailwind CSS安裝方式

這邊紀錄三種安裝方式，詳細可參考 安裝方式。

Webpack

這種作法主要是要將Tailwind CSS做為postcss的插件，並透過webpack打包處理。

  1. 安裝tailwindcss package，若本身已經配置postcss和autoprefixer，後面兩個package可以不安裝。
    1
    $ npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
    若為現有專案要加入tailwind，且postcss不是最新的8.x.x版本，可參考連結去進行調整。連結

  1. postcss加入tailwindcss plugins

    1
    2
    3
    4
    5
    6
    7
    // postcss.config.js
    module.exports = {
      plugins: {
        tailwindcss: {},
        autoprefixer: {},
      }
    }

  2. 產tailwindcss設定檔

    1
    $ npx tailwindcss init

    透過上述指令，產生tailwind.config.js檔案，其格式如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // tailwind.config.js
    module.exports = {
      purge: [],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
      },
      variants: {},
      plugins: [],
    }

  3. 最終將tailwindcss樣式庫加入css檔案，並導入會被webpack打包之js檔案。

Tailwind CLI

Tailwind CDN