Day 5：我要來使用Tailwind了！誰都不能阻止我！【Tailwind環境建置】

2022 iThome 鐵人賽

DAY 5

自我挑戰組

【Tailwind】你聽過尾巴風嗎 ? CSS 框架 tailwind 的新手入門指南系列第 5 篇

14th鐵人賽 tailwindcss environment 環境建置 tailwind cli

linlaose

團隊死線衝鋒 Deadline Squad

2022-09-20 20:25:16

1140 瀏覽

分享至

相信大家已經對 Tailwind 有基礎認識了吧？再來筆者會帶大家進行環境的建置，Let's go！

今天帶大家建置環境 Tailwind cli，以實用性來說 Tailwind cli 已經可以包羅萬象了，但如果需要搭配 webpack 等打包工具的話，還需要使用 PostCSS，本篇僅介紹 Tailwind-cli 的環境搭建。

下載 Node.js
在自己想要的路徑下，創建專案資料夾，這邊筆者命名為 tailwind-cli
在此 tailwind-cli 下建立檔案，筆者建議資料夾結構如下（檔名或資料夾名稱可以不同）

tailwind-cli/
  |
  |-dist/
  |  |-css/
  |    |-style.css
  |
  |-src/
  |  |-all.css
  |  |-index.html

首先進行 npm 初始化：

npm init -y

輸入 -y 是為了方便 npm 初始化的流程，若想客製 package.json 的檔案項目則不需輸入
4. 在 VS Code 的終端機輸入：

npm install -D tailwindcss

接著輸入：

npx tailwindcss init

最終的 package.json 檔案內容應為：

紅框處確保 tailwindcss 安裝成功；此時檔案結構應為

tailwind-cli/
  |
  |-node_modules/
  |  ... # npm install tailwindcss 後的各個檔案
  |
  |-dist/
  |  |-css/
  |    |-style.css #output 檔案
  |
  |-src/
  |  |-all.css #input 檔案
  |  |-index.html
  |-package-lock.json
  |-package.json
  |-tailwind.config.js

接著需要調整 tailwind.config.js 檔案，必須在 content 陣列中定位，確保相對應檔案能夠解讀 tailwind 的樣式，尤其是 js 務必記得要加，筆者遇過坑

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在 all.css 檔案中匯入 tailwind 預設樣式，以下的 @tailwind 是匯入的意思：

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

監聽 tailwindcss 的檔案編譯

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

輸入後確保監聽成功，終端機應顯示畫面如下

到這算是結束了，再把 index.html 檔案讀取編譯過後的 style.css，即大功告成！

<!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>Tailwind-cli</title>
    <link rel="stylesheet" href="../dist/css/style.css" />
  </head>
  <body>
    <div class="bg-red-500 w-full h-screen"></div>
  </body>
</html>

若依照筆者的 HTML 輸入最後會產生的畫面為滿版紅色背景