Tailwind的安装,配置,使用步骤

🚀 一、Tailwind 简介

Tailwind CSS 是一种"原子化 CSS"框架。

特点是:

  • 不再手写样式文件,而是直接在 class 中写样式类名;
  • 可快速构建响应式布局;
  • 可自定义主题、颜色、间距、字体等。

⚙️ 二、安装与配置

✅ 1. 新建项目

使用 Vite 创建前端项目(推荐):

perl 复制代码
# 使用 npm
npm create vite@latest my-project

# 或使用 pnpm
pnpm create vite my-project

进入项目目录:

bash 复制代码
cd my-project

✅ 2. 安装 Tailwind CSS

在项目中安装 Tailwind CSS 和相关工具:

复制代码
npm install -D tailwindcss postcss autoprefixer

初始化配置文件:

csharp 复制代码
npx tailwindcss init -p

这会自动生成两个文件:

arduino 复制代码
tailwind.config.js
postcss.config.js

✅ 3. 配置 tailwind.config.js

修改内容如下:

less 复制代码
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}", // 让 Tailwind 扫描这些文件
  ],
  theme: {
    extend: {}, // 可以在这里自定义颜色、字体、间距等
  },
  plugins: [],
}

✅ 4. 在 CSS 中引入 Tailwind

打开或新建文件 src/index.css(或 src/style.css),加入以下内容:

less 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

✅ 5. 在入口文件中导入样式

main.jsmain.tsx 中引入刚才的 CSS 文件:

arduino 复制代码
import './index.css'

✅ 6. 启动项目

arduino 复制代码
npm run dev

打开浏览器访问显示的本地地址(通常是 http://localhost:5173),即可使用 Tailwind。


🧱 三、简单示例

🔹 示例 1:按钮样式

ini 复制代码
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  提交
</button>

效果:蓝色圆角按钮,悬停变深。


🔹 示例 2:响应式卡片布局

ini 复制代码
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-4">
  <div class="bg-white shadow-md rounded-lg p-4">卡片1</div>
  <div class="bg-white shadow-md rounded-lg p-4">卡片2</div>
  <div class="bg-white shadow-md rounded-lg p-4">卡片3</div>
</div>

🔹 示例 3:全屏居中内容

scss 复制代码
<div class="flex items-center justify-center h-screen bg-gray-100">
  <h1 class="text-4xl font-bold text-blue-600">Hello Tailwind!</h1>
</div>

🎨 四、自定义主题(可选)

tailwind.config.js 中扩展主题:

css 复制代码
theme: {
  extend: {
    colors: {
      primary: '#2563eb',
      secondary: '#9333ea',
    },
    spacing: {
      128: '32rem',
    },
  },
},

使用自定义颜色:

css 复制代码
<div class="bg-primary text-white p-4">自定义主色</div>
相关推荐
云枫晖9 分钟前
Webpack系列-Output出口
前端·webpack
用户2680013791914 分钟前
有哪些高效的Python库可以用于解析淘宝评论的JSON数据?
前端·api
brzhang17 分钟前
A Definition of AGI:用人的智力模型去量 AI,这事靠谱吗?
前端·后端·架构
一 乐17 分钟前
宠物管理|宠物店管理|基于SSM+vue的宠物店管理系统(源码+数据库+文档)
java·前端·数据库·vue.js·论文·毕设·宠物
咖啡の猫28 分钟前
Vue插件
前端·javascript·vue.js
韩劳模29 分钟前
Canvas、SVG实现不规则区域高亮的方案说明
前端
张可爱1 小时前
20251026-从网页 Console 到 Python 爬虫:一次 B 站字幕自动抓取的实践与复盘
前端·python
咖啡の猫1 小时前
Vue中的自定义事件
前端·javascript·vue.js
yangwan1 小时前
Ubunut 22.04 安装 Docker 24.0.x
前端·后端