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>
欢迎访问:天问博客