Tailwind CSS
1、认识和介绍
官方在线网站
离线地址
https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css
使用Tailwind CSS的案例如下图：
js
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80" alt="Woman paying for a purchase">
</div>
<div class="mt-4 md:mt-0 md:ml-6">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
<a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
<p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
</div>
</div>2、安装使用Tailwind CSS
js
npm install -D tailwindcss postcss autoprefixer
yarn add -D tailwindcss postcss autoprefixer代码解释如下：
js
1. `tailwindcss`: 这是一个流行的 CSS 框架，它提供了一套灵活的 CSS 实用程序类，用于快速构建现代化的 Web 界面。
1. `postcss`: 这是一个用于处理 CSS 的工具，它可以通过插件扩展其功能。在这种情况下，它用于将 Tailwind CSS 与 Autoprefixer 集成，以自动添加所需的浏览器前缀。
1. `autoprefixer`: 这是一个 PostCSS 插件，用于自动为 CSS 添加浏览器特定的前缀，以确保样式在不同的浏览器中都能正确显示。3、配置tailwindcss配置
js
npx tailwindcss init -p这个时候我们的目录跟文件下面已经多了一个文件 tailwind.config.js 文件内容如下：
js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [],
theme: {
extend: {},
},
plugins: [],
}tailwindcss.config.js，修改成如下内容:
js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js, jsx, ts, tsx}",
],
theme: {
extend: {},
},
plugins: [],
}将加载 Tailwind 的指令添加到你的 CSS 文件中
在你的主 CSS 文件中通过 @tailwind 指令添加每一个 Tailwind 功能模块。
主要的css之中引入
js
@tailwind base;
@tailwind components;
@tailwind utilities;开启 Tailwind CLI 构建流程
运行命令行（CLI）工具扫描模板文件中的所有出现的 CSS 类（class）并编译 CSS 代码。
js
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch在你的 HTML 代码中使用 Tailwind 吧
在 <head> 标签内引入编译好的 CSS 文件，然后就可以开始使用 Tailwind 的工具类 来为你的内容设置样式了。
js
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>3、vue之中使用
☞ 安装tailwindcss
js
yarn add tailwindcss
npx tailwindcss init
yarn add postcss
yarn add autoprefixer
yarn add -D tailwindcss postcss autoprefixer☞ 配置tailwind.config.js
js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}☞ 配置postcss.config.js
在项目根目录下创建或编辑 postcss.config.js 文件，并添加 Tailwind CSS 插件
js
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
// 其他 PostCSS 插件
]
}🙋 踩坑
Tailwindcss不生效
如果项目中单独引入了全局样式文件，那么上面创建的tailwind.css文件在引入时务必放在全局样式文件上面，否则Tailwindcss不会生效。如下：
vite.config.ts配置问题
js
import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
export default defineConfig({
css: {
postcss: {
plugins: [tailwindcss, autoprefixer],
},
},
})vite之中使用(2025-07)
安装
JS
yarn add tailwindcss @tailwindcss/vite配置vite.config.ts
JS
import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
tailwindcss(),
],
})样式中引入，放在其他样式前面
JS
// tailwindcss.css
@import "tailwindcss";
// main.ts
import './assets/styles/tailwindcss.css' //引入 tailwindcss测试样式代码
JS
<div
class="max-w-sm mx-auto my-8 bg-white shadow-lg rounded-xl overflow-hidden transform transition duration-300 hover:scale-105">
<!-- 卡片顶部图片 -->
<img class="w-full h-56 object-cover"
src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=448&q=80"
alt="Card Image">
<!-- 卡片内容部分 -->
<div class="p-6">
<!-- 卡片标题 -->
<h3 class="text-2xl font-semibold text-gray-800">现代设计师卡片</h3>
<!-- 卡片描述 -->
<p class="mt-2 text-gray-600 text-sm">这是一张现代、优雅的卡片设计，适用于产品展示或简短的介绍。</p>
<!-- 卡片按钮 -->
<div class="mt-4">
<button
class="w-full py-2 px-4 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-semibold rounded-lg shadow-md hover:bg-gradient-to-l focus:outline-none focus:ring-2 focus:ring-purple-500">
立即查看
</button>
</div>
</div>
</div>