1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. CSS
  6. »
  7. 從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學

從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學

2023/04/12

梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
  其實現在在網頁CSS的原始碼,都要比程式要來的多,動不動都上千行,裡面的樣式名稱,至少都上百個起跳,同時還為了想樣式名稱,從有名稱想到沒名稱,因此梅干要來分享個好東西,那就是Tailwind CSS,而它是什麼東西呢?簡單的來說,它就是一個CSS框架,讓你在HTML標籤中,只需寫樣式名稱,就會自動幫你產生CSS的話法,完全不用寫到任何的CSS語法。

更重要的是日後也相當的好維護,只需要調整HTML標籤的類別,立即就可同步調整CSS的屬性,完全不用再像以前,就得在CSS的檔案中尋找到相關的樣式設定,但要怎麼來使用Tailwind CSS這個CSS框架呢?現在就一塊來看看吧!


Tailwind CSS專案初始化
npm install -D tailwindcss
npx tailwindcss init

Tailwind CSS設定(tailwind.config.js)
content: ["./src/*/.{html,js}"]

Tailwind CSS設定(src/input.css)
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind CSS發佈設定(package.json)
"scripts": {
"dev":"npx tailwindcss -i ./src/input.css -o ./dist/output.css –watch"
}

Tailwind CSS設定(index.html)
<link href="/dist/output.css" rel="stylesheet">

Step1
首先開啟VS Code,將專案目錄拖曳到檔案總管後,開啟終端機。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step2
分別輸入初始化指令,就會自動產tailwind的設定檔。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step3
接著新增一個src資料夾,並建立一個input.css檔,並引用以下三個套件。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step4
接著再到tailwind.config.js,將content內設定要監控的目錄與檔案。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step5
再到package.json中,加入自動監控指令,以後只要點一下就會自動執行,就不用再背指令啦!
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step6
接著建立一個HTML於src的目錄中,再CSS連結位置為/dist/output.css。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step7
當要執行自動監控時,若沒看到Npm指令碼的頁籤,可在面板按滑鼠右鍵,將它給勾起來。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step8
勾起來後,在頁籤中就會看NPM指令碼,再對著後方的執行鈕點一下。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step9
這時就會即時進行CSS的編譯。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step10
而tailwindcss寫起來,就像平常我們將css寫在標籤底下。
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學
Step11
可在output.css的檔案中,看到輸入的標籤則會自重幫你轉成CSS的類別與設定,從頭到尾完全不用寫到任何的CSS,是不是快樂許多呀!
梅問題-從零開始,一次學會 Tailwind CSS!安裝、設定、快速上手教學