---

theme: channing-cyan

一起養成寫作習慣！這是我參與「掘金日新計劃 · 4 月更文挑戰」的第6天，點選檢視活動詳情。

嗨！大家好！我是手可摘棉花，一名前端開發，很開心在這裡分享文章，期待著大家的點贊👍與關注➕。

1.介紹

Tailwind CSS是一個非常酷的前端框架，它可以讓你跟快速輕鬆的構建的UI元件。如果你還沒聽過Tailwind CSS，引用官方的話術說的是“ 一個實用程式優先的 CSS 框架 ”，它定義許多非常小的類，用於提供構建你的頁面及元件，你會有一種“挖偶”的一聲，原來css也可以跟html一樣寫。

2.安裝

在vue的根目錄下，安裝 Tailwind 及其依賴項（PostCSS & auto-prefixer）。有可能安裝的時候回提示錯誤導致安裝不成功，一般都是缺少其他依賴或版本問題，根據提示說明解決就好，正常都是一次性通過。

bash npm install -D tailwindcss postcss autoprefixer

生成Tailwind CSS配置檔案

bash npx tailwindcss init -p

在配置檔案content中新增所有模板檔案的路徑

js //tailwind.config.js module.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [], }

建立一個tailwindcss.css樣式檔案，用於初始化並引入tailwindcss的基礎樣式

css /* /src/css/tailwindcss.css*/ @tailwind base; @tailwind components; @tailwind utilities;

匯入css/tailwindcss.css到main.js，這樣就讓你的專案擁有了Tailwind CSS

```js // src/main.js import { createApp } from 'vue' import App from './App.vue' import "./css/tailwindcss.css"

createApp(App).mount('#app') ```

3.嘗試Tailwind CSS

簡單寫了一個首頁頂部導航選單效果，在不寫任何css的情況下，用html結合Tailwind CSS的樣式類進行，程式碼看起來定義的內容有點多，但可以讓我們儘可能的少些一些css。

```vue ```

效果圖：

4.總結

在你成功安裝Tailwind CSS後，你將擁有了所有官方定義的css類，進行頁面的構建，從某種程度上，減少了你重複寫css的程式碼。雖然在一開始的情況下可能有感覺到無從入手，因為Tailwind CSS提供的標籤太多了，寫頁面功能需要些大量的html，所有當你足夠熟悉Tailwind CSS的時候，你會慢慢的發現它的優點，並且可以快速的進行開發頁面，而只需儘可能的少些css的程式碼。