Tailwind CSS 简述及安装
一、Tailwind CSS 简介
1.1 什么是 Tailwind CSS
Tailwind CSS 是一个功能类优先的 CSS 框架，它与传统的 UI 框架（如 Bootstrap、Bulma 等）不同，不提供预设的组件，而是提供大量的功能类（utility classes），让开发者能够直接在 HTML 中组合这些类来构建自定义设计。
1.2 Tailwind CSS 的特点
- 功能类优先：直接在 HTML 中应用样式，减少在 CSS 文件中编写自定义样式的需求
- 高度可定制：通过配置文件可以完全控制颜色、断点、字体等设计系统
- 响应式设计：内置响应式变体，轻松创建适应不同屏幕尺寸的界面
- 暗色模式：内置暗色模式支持
- 按需生成：只包含你使用的样式，保持 CSS 文件体积小
1.3 与传统 CSS 框架的区别
传统 CSS 框架提供预设组件，而 Tailwind 提供原子化的功能类：
<!-- Bootstrap 按钮 -->
<button class="btn btn-primary">按钮</button>
<!-- Tailwind CSS 按钮 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
按钮
</button>
二、安装 Tailwind CSS
2.1 使用 npm 安装
# 安装 Tailwind CSS 及其依赖
npm install -D tailwindcss postcss autoprefixer
# yarn 安装
yarn add tailwindcss postcss autoprefixer
2.2 配置文件设置
# 生成配置文件
npx tailwindcss init -p
在生成的 tailwind.config.js 文件中配置内容路径：
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {
},
},
plugins: [],
}
2.3 创建 CSS 文件
创建一个 CSS 文件（如 src/tailwind.css）并添加 Tailwind 指令：
@tailwind base;
@tailwind components;
@tailwind utilities;
2.4 在项目中引入
在 Vue 项目中
// main.js
import './tailwind.css'
在 React 项目中
// index.js 或 App.jsx
import './tailwind.css'
备注 : 因为我的习惯是vite+yarn来构建项目, 所以留一份自己适配的vite.config.js进行备忘, 以供参考。
//...其它略
import tailwindcss from "tailwindcss";
import autoprefixer from "autoprefixer";
export default defineConfig({
base: '/',
css: {
postcss: {
plugins: [tailwindcss, autoprefixer],
}
},
//...其它略
})
2.5 使用 CDN（简单项目）
对于简单项目，可以直接使用 CDN：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<title>Tailwind CSS 示例</title>
</head>
<body>
<div class="container mx-auto p-4">
<h1 class="text-3xl font-bold text-blue-600">Hello Tailwind CSS!</h1>
</div>
</body>
</html>
三、基本使用示例
<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl m-4">
<div class="md:flex">
<div class="md:shrink-0">
<img class="h-48 w-full object-cover md:h-full md:w-48" src="/img/example.jpg" alt="示例图片">
</div>
<div class="p-8">
<div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Tailwind CSS 示例</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">使用功能类构建现代网站</a>
<p class="mt-2 text-slate-500">使用 Tailwind CSS 可以快速构建现代、响应式的用户界面，无需编写自定义 CSS。</p>
</div>
</div>
</div>
参考链接
四 ( 新添加 )、添加Tailwindcss4的简化使用方式
执行安装 :
# npm安装
npm install tailwindcss @tailwindcss/vite
# yarn安装
yarn add tailwindcss @tailwindcss/vite
修改vite.config.js
//添加 tailwindcss 导入
import tailwindcss from '@tailwindcss/vite';
import vue from '@vitejs/plugin-vue';
import {
defineConfig} from 'vite';
// https://vite.dev/config/
export default defineConfig({
// 添加导入的 tailwindcss()
plugins: [vue(), tailwindcss()],
});
修改 main.ts
// 添加依赖即可
import 'tailwindcss/index.css';
App.vue中测试
<div class="bg-red-300">
<h1>Hi, this is test page</h1>
</div>
展示效果 :
五、tailwindcss配置
1、安装插件, 实现类提示。
在IDE ( vs-codd、cursor、 trea 等等 ) 的插件市场搜索 Tailwind CSS IntelliSense 插件进行安装。
2、配置格式化 ( 按照我们推荐的类顺序自动对您的类进行排序。 )
-
安装格式化插件
-
# npm npm install -D prettier prettier-plugin-tailwindcss # yarn yarn add prettier prettier-plugin-tailwindcss
-
-
根目录 创建
.prettierrc文件-
{ "plugins": ["prettier-plugin-tailwindcss"] }
-
-
配置项目采用默认的格式化插件设置 , 在
.vscode文件夹里面添加一个setting.json文件, 内容如下。-
{ "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.organizeImports": "explicit" }, "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
-
-
按保存
-
<!-- 原html --> <div class="bg-red-300 w-240 m-auto"> <h1 class="w-240 text-center bg-green-300">Hi, this is test page</h1> </div> <!-- 新html --> <div class="m-auto w-240 bg-red-300"> <h1 class="w-240 bg-green-300 text-center">Hi, this is test page</h1> </div>可以看到 , 顺序已经发生改变。
-