Tailwind css [1] 簡介和 npm 安裝教學

6 min readApr 26, 2022

什麼是 Tailwind CSS？
Tailwind CSS 是一套 Utility-First CSS，具有彈性、快速刻板的特點。

Tailwind 的特點

方便的 css 寫法，不用花很多時間想 class 命名
維護方便，自動排序 css style，code乾淨，辨識度高
官方文件齊全（使用說明書、組建ui範例、設定教學）
提供Responsive(@media)的class（範例）
提供偽類偽元素(:before :after :hover :focus)的class（範例）
提供 group-hover 的class（範例）

Tailwind 的 Configuration

Configuration 是「結構配置、架構設置」的意思，Tailwind 本身有彈性的Configuration 功能，例如顏色、邊界、浮動。加上 plugin 可以快速處理複雜的問題。

文字大小 的 ConfigfontSize: {
      xs: ['0.75rem', { lineHeight: '1rem' }],
      sm: ['0.875rem', { lineHeight: '1.25rem' }],
      base: ['1rem', { lineHeight: '1.5rem' }],
      lg: ['1.125rem', { lineHeight: '1.75rem' }],
      xl: ['1.25rem', { lineHeight: '1.75rem' }],
      '2xl': ['1.5rem', { lineHeight: '2rem' }],
      '3xl': ['1.875rem', { lineHeight: '2.25rem' }],
      '4xl': ['2.25rem', { lineHeight: '2.5rem' }],
      '5xl': ['3rem', { lineHeight: '1' }],
      '6xl': ['3.75rem', { lineHeight: '1' }],
      '7xl': ['4.5rem', { lineHeight: '1' }],
      '8xl': ['6rem', { lineHeight: '1' }],
      '9xl': ['8rem', { lineHeight: '1' }],
    },

連結：Tailwind css 所有的預設配置

安裝設定 Tailwind

步驟1. 通過 npm 安裝 Tailwind CSS，並創建 tailwind.config.js 文件。

安裝 node.js
在安裝 npm 之前，要先下載安裝 node.js LTS 版本，安裝完畢 node 也會將 npm 設置好。npm 是「套件管理工具」，可以從中下載很多種套件，並操作各種項目去做整合。

如何判斷 npm 有沒有安裝成功？
mac：開啟終端機，輸入 npm -v，如有跳出版本號，即是成功。
windows：開啟命令提示字元，輸入 npm -v，如有跳出版本號，即是成功。

設定終端機
新增一個要使用 Tailwind 的資料夾，在終端機中輸入cd＋半形空格，拖移資料夾到空格後面，設定成功即出現資料夾名稱。

在終端機輸入 Tailwind 的 npm，並按下Enter：

npm install -D tailwindcss
npx tailwindcss init

mac 如果出現安裝錯誤，可以輸入以下指令，用更高權限安裝：

sudo npm install tailwindcss

等待終端機下載完畢，會看到資料夾內多了一個資料夾跟三個檔案，就是完成第一步驟了。

步驟2. 在文件中添加所有模板文件的路徑 tailwind.config.js。

開啟 vscode 把資料夾拖入，在資料夾中有一個檔案 tailwind.config.js，打開將以下指令覆蓋：

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

步驟3. 將 Tailwind 指令添加到您的 CSS

由於上面輸入的路徑是[“./src/**/*.{html,js}”]，所以要在資料夾中新增一個 src 資料夾，並在src資料夾內新增一個 input.css 檔案，將以下指令複製上去：

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

上面的 @tailwind 有點像是要載入各種功能，載入後會經過一個編譯的過程，產生css，當然 tailwind 還有其他的功能可以載入。

步驟4. 產生output.css

在終端機上輸入以下指令：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

意思是，要將 input.css 裡面的code進行編譯，並建立一個 output.css 檔案。此時你會看到資料夾多一個 output.css 檔案，就可以將它添加到<head>。

步驟5. 將已編譯的 CSS 文件添加到<head>並開始使用 Tailwind

在 scr 中新增一個 html 檔案，並輸入以下預設 code：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="dist/output.css">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

vscode 可使用 Live Server 開啟 html 檔，同步變更css。

步驟6. vscode 安裝 Tailwind CSS IntelliSense 智能建議

安裝 Tailwind CSS IntelliSense 可以自動產生建議的 css，建議安裝。

到目前為止， Tailwind 的安裝設定已經完成，而 Tailwind 有彈性的客製化功能，可以讓網頁更多元性，而不會像套版那樣死板。

所以接下來，要開始學習使用客製化的設定！

※ 注意，當重新開啟製作檔的時候，要記得先在終端機輸入：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

不然新增或刪除的 css 不會更新。

Tailwind css [1] 簡介和 npm 安裝教學

Written by Abby 旦旦