Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何模板中的 CSS 类（class）名，然后生成相应的样式代码并写入到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。再也不用为了取一个 classname 类名而烦恼了。
一、安装
这里以 React + Vite 为例
- 安装依赖，生成
postcss.config.js和tailwind.config.js配置文件
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
- 在
postcss.config.js中引入tailwindcss和autoprefixer
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}
- 配置
tailwind.config.js文件
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
corePlugins: {
preflight: false,
},
}
- 新建
tailwind.css入口文件
/* @/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- 在
main.jsx中引入tailwind.css文件
import { ConfigProvider } from 'antd'
import ReactDOM from 'react-dom/client'
import zhCN from 'antd/locale/zh_CN'
import Routers from '@/router'
import '@/assets/css/tailwind.css'
import 'dayjs/locale/zh-cn'
ReactDOM.createRoot(document.getElementById('root')).render(
<ConfigProvider locale={zhCN}>
<Routers />
</ConfigProvider>
)
二、使用
1、width、height、line-height
常用值：
w-[200px]：width: 200px;h-[100vh]：height: 100vh;min-h-[100vh]：min-height: 100vh;max-h-[100vh]：max-height: 100vh;w-full：width: 100%;h-[100%]：height: 100%;min-h-full：min-height: 100%;min-h-[calc(100vh-60px)]: min-height: calc(100vh - 60px);leading-none：line-height: 1;leading-tight：line-height: 1.25;leading-3：line-height: 0.75rem; /* 12px */leading-4：line-height: 1rem; /* 16px */leading-[20px]：line-height: 20px;
<div class="w-[200px] min-h-[100vh]"></div>
<!--等价于-->
<div style="width: 200px; min-height: 100vh"></div>
2、background
<div class="bg-[#f00]"></div>
<!--等价于-->
<div style="background-color: #f00"></div>
3、font、text-align
<div class="text-[#f00] text-[20px] font-bold text-center"></div>
<!--等价于-->
<div style="color: #f00; font-size: 20px; font-weight: 700; text-align: center;"></div>
4、border、border-radius
常用值：
rounded-none：border-radius: 0;rounded：0.25rem; /* 4px */rounded-md：小圆角rounded-lg：大圆角rounded-full：圆形
<div class="border-[1px] border-[#f00] border-solid rounded-[6px]"></div>
<!--等价于-->
<div style="border: 1px solid #f00; border-radius: 6px;"></div>
参考：https://www.tailwindcss.cn/docs/border-radius
5、margin、padding
常用值：
m-0：margin: 0;mx-0: margin-left: 0; margin-right: 0;my-0: margin-top: 0; margin-bottom: 0;mt-[10px]: margin-top: 1px;m-[15px]: margin: 15px;
<div class="m-[10px] p-[10px]"></div>
<!--等价于-->
<div style="margin: 10px; padding: 10px;"></div>
参考：https://www.tailwindcss.cn/docs/margin
6、flex
常用值：
flex：display: flex;flex-row：flex-direction: row;flex-col：flex-direction: column;flex justify-between: justify-content: space-between;flex justify-center: justify-content: center;flex items-center: align-items: center;
<div class="flex flex-row justify-between items-center"></div>
<!--等价于-->
<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center;"></div>
参考：https://www.tailwindcss.cn/docs/flex
7、overflow
常用值：
overflow-hidden：overflow: hidden;overflow-auto：overflow: auto;overflow-x-auto：overflow-x: auto;overflow-y-scroll：overflow-y: scroll;
<div class="overflow-y-scroll"></div>
<!--等价于-->
<div style="overflow-y: scroll;"></div>
参考：https://www.tailwindcss.cn/docs/overflow
8、hover、focus、active、first、last
常用值：
hover:bg-[#f00]：鼠标悬浮时的背景色first:bg-[#f00]：第一个子元素的背景色
<div class="hover:bg-[#f00] focus:bg-[#f00] active:bg-[#f00]"></div>
参考：https://www.tailwindcss.cn/docs/hover-focus-and-other-states
9、important
<div class="!tw-font-bold"></div>
<!--等价于-->
<div style="font-weight: 700 !important;"></div>
参考：https://www.tailwindcss.cn/docs/configuration#important
10、display
常用值：
hidden：display: none;block：display: block;inline-block：display: inline-block;flex：display: flex;
<div class="flex"></div>
<!--等价于-->
<div style="display: flex;"></div>
11、white-space、text-overflow
常用值：
whitespace-normal：white-space: normal;whitespace-nowrap：white-space: nowrap;whitespace-pre：white-space: pre;whitespace-pre-wrap：white-space: pre-wrap;whitespace-break-spaces：white-space: break-spaces;text-ellipsis：text-overflow: ellipsis;text-clip：text-overflow: clip;truncate：text-overflow: ellipsis; overflow: hidden; white-space: nowrap;（文本溢出隐藏）
<div class="w-[150px] whitespace-nowrap overflow-hidden text-ellipsis">文本溢出隐藏</div>
<!--简洁写法-->
<div class="w-[150px] truncate">truncate 文本溢出隐藏</div>
<!--等价于-->
<div style="width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">truncate 文本溢出隐藏</div>
欢迎访问：天问博客
