『VUE』快速入門配置環境使用tailwind css 記憶tailwind css常見規則（詳細圖文注釋）

效果預覽
快速入門
- 環境配置
- 配置 tailwind.config.js 設置文件
- 添加 Tailwind 的基礎樣式
- 引入樣式到項目
- 檢查構建工具配置
- 測試 Tailwind CSS 效果
使用插件
- tailwind.config.js的最終內容
- app.vue演示
為什么不需要記憶 Tailwind 的類名？
- - 1. 類名直觀
  - 2. 文檔全面
  - 3. 工具提示
  - 4. 記憶頻率高的類
高效使用 Tailwind 的技巧
- (1) 安裝 Tailwind CSS IntelliSense 插件
- - **優勢**
  - **安裝方式**
- (2) 熟悉常用類的邏輯
- - **布局**
  - **間距**
  - **顏色**
  - **字體**
  - **邊框**
- (3) 利用官方文檔和工具
- - **官方文檔**
  - **Tailwind Play**
- (4) 創建自定義類
- - **示例**
- 總結

歡迎關注『VUE』專欄，持續更新中
歡迎關注『VUE』專欄，持續更新中

效果預覽

在這里插入圖片描述

快速入門

官方文檔為準https://tailwind.nodejs.cn/docs/installation

環境配置

新建vue項目
vue create vue-study-tailwind
cd目錄
cd vue-study-tailwind
安裝
npm install -D tailwindcss postcss autoprefixer
初始化 Tailwind CSS 配置文件
npx tailwindcss init

配置 tailwind.config.js 設置文件

在 tailwind.config.js 文件中，配置 Tailwind CSS 的內容路徑，以確保只生成實際使用的樣式。

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

添加 Tailwind 的基礎樣式

將 Tailwind CSS 的基礎樣式添加到項目的主 CSS 文件中（通常是 src/assets/main.css 或 src/style.css）。如果項目中沒有 CSS 文件，可以新建一個。
這里以main.css為例子

main.css的內容

/* src/assets/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

引入樣式到項目

確保在項目入口文件中引入 main.css 文件。例如，在 src/main.js 中：

加入這一行import './assets/main.css' // 引入 Tailwind CSS后可能是下面這樣

import { createApp } from 'vue'
import App from './App.vue'
import './assets/main.css' // 引入 Tailwind CSScreateApp(App).mount('#app')

檢查構建工具配置

不同的工具可能需要額外的配置。

對于 Vite：
Vite 默認支持 PostCSS，無需額外配置。只需確保 vite.config.js 文件中沒有錯誤的 CSS 配置。

對于 Vue CLI：
需要在 vue.config.js 的css中配置 PostCSS：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('tailwindcss'),require('autoprefixer'),],},},},},
})

測試 Tailwind CSS 效果

在任意組件中使用 Tailwind 的類名.把App.vue改為

<template><div class="p-4 bg-blue-500 text-white text-center"><h1 class="text-3xl font-bold">Hello, Tailwind CSS + Vue!</h1></div>
</template><script>export default {name: 'App',
}
</script><style>
</style>

使用插件

你可以通過插件擴展 Tailwind CSS 的功能，以下是一些推薦的插件：

Forms 插件（優化表單樣式）：

npm install -D @tailwindcss/forms

在 tailwind.config.js 中添加插件：

plugins: [require('@tailwindcss/forms'),
],

Typography 插件（優化文章樣式）：

npm install -D @tailwindcss/typography

在 tailwind.config.js 中添加插件：

plugins: [require('@tailwindcss/typography'),
],

Aspect Ratio 插件（設置固定比例的容器）：

npm install -D @tailwindcss/aspect-ratio

在 tailwind.config.js 中添加插件：

plugins: [require('@tailwindcss/aspect-ratio'),
],

tailwind.config.js的最終內容

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./index.html","./src/**/*.{vue,js,ts,jsx,tsx}",],theme: {extend: {},},plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography'),require('@tailwindcss/aspect-ratio')],
}

app.vue演示

<template><div class="p-6 bg-gray-100 min-h-screen space-y-8"><!-- 使用 Forms 插件 --><div class="bg-white shadow p-4 rounded"><h2 >Tailwind CSS Forms 插件示例 沒有任何文本內容</h2><h2 class="text-xl font-semibold mb-4">Tailwind CSS Forms 插件示例</h2><form><div class="mb-4"><label for="name" class="block text-sm font-medium text-gray-700">名字</label><inputid="name"type="text"class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"placeholder="請輸入您的名字"/></div><div class="mb-4"><label for="email" class="block text-sm font-medium text-gray-700">郵箱</label><inputid="email"type="email"class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200"placeholder="請輸入您的郵箱"/></div><button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">提交</button></form></div><!-- 使用 Typography 插件 --><div class="prose max-w-none bg-white shadow p-4 rounded"><h2>Tailwind CSS Typography 插件示例</h2><p>這是一個使用 <strong>Typography</strong> 插件的段落。它會自動優化文字樣式，適用于文章內容。</p><blockquote>這是一段引用，Typography 插件會為它自動應用更優美的樣式。</blockquote><ul><li>這是列表項 1</li><li>這是列表項 2</li><li>這是列表項 3</li></ul></div><!-- 使用 Aspect Ratio 插件 --><div class="bg-white shadow p-4 rounded"><h2 class="text-xl font-semibold mb-4">Tailwind CSS Aspect Ratio 插件示例</h2><div class="aspect-w-16 aspect-h-9"><iframesrc="https://www.youtube.com/embed/dQw4w9WgXcQ"title="YouTube 視頻"frameborder="0"class="w-full h-full"allowfullscreen></iframe></div><p class="text-gray-500 mt-2 text-sm">以上是一個 16:9 比例的視頻嵌入框。</p></div></div>
</template><script>
export default {name: 'App',
}
</script><style>
/* 這里留空，因為我們完全依賴 Tailwind CSS 的類名 */
</style>

為什么不需要記憶 Tailwind 的類名？

1. 類名直觀

Tailwind 的類名與 CSS 屬性密切相關，幾乎可以直接猜出來。

p-4 對應 padding: 1rem;
text-center 對應 text-align: center;
bg-blue-500 是背景色為藍色，顏色強度為 500。

2. 文檔全面

Tailwind 提供了詳細的官方文檔，可以隨時查詢類名和用法。

3. 工具提示

IDE 插件（如 VS Code 的 Tailwind CSS IntelliSense）會自動提示和補全類名。

4. 記憶頻率高的類

常用的類會隨著使用頻率被你自然記住，比如 flex、grid、text-white 等。

高效使用 Tailwind 的技巧

(1) 安裝 Tailwind CSS IntelliSense 插件

優勢

自動補全類名。
提供類名的實時預覽。
檢查拼寫錯誤。

安裝方式

打開 VS Code。
搜索插件 Tailwind CSS IntelliSense 并安裝。
重啟 VS Code。

效果：輸入類名時，插件會根據上下文提示可用的 Tailwind 類，并顯示樣式預覽。

(2) 熟悉常用類的邏輯

布局

flex / grid: 布局方式。
justify-center: 水平居中。
items-center: 垂直居中。

間距

p-{size}: 內邊距（padding）。
m-{size}: 外邊距（margin）。
- 例：p-4 表示內邊距為 1rem，m-2 表示外邊距為 0.5rem。

顏色

text-{color}-{intensity}: 文本顏色。
bg-{color}-{intensity}: 背景顏色。
- 例：text-red-500 表示紅色文本，bg-blue-200 表示淺藍色背景。

字體

text-{size}: 字體大小。
font-{weight}: 字體粗細。
- 例：text-lg 表示大號字體，font-bold 表示粗體。

邊框

border: 添加邊框。
border-{color}: 設置邊框顏色。
- 例：border-2 表示 2px 寬邊框，border-gray-500 表示灰色邊框。

(3) 利用官方文檔和工具

官方文檔

提供了完整的類名列表和用法示例。
文檔搜索功能強大，可以快速找到想用的樣式。

Tailwind Play

官方提供的在線沙盒工具 Tailwind Play。
無需配置環境即可測試 Tailwind 樣式。

(4) 創建自定義類

對于復雜的重復樣式，可以創建自定義類，而不必使用大量的原子類：

示例

在main.css中

/* 自定義組合類 */
.btn {@apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
}

總結

大家喜歡的話，給個👍，點個關注！給大家分享更多計算機專業學生的求學之路！

發現你走遠了@mzh原創作品，轉載必須標注原文鏈接

Crated：2024-3-1

歡迎關注『VUE』專欄，持續更新中
歡迎關注『VUE』專欄，持續更新中
『未完待續』