🖐🏻 免责声明
本教程仅供学习交流使用，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，请各读者自觉遵守相关法律法规。
# 快速使用
# 安装
npm install tailwindcss
# 初始化 Tailwind 配置文件
运行以下命令初始化 Tailwind 的配置文件 tailwind.config.js：
npx tailwindcss init
# 空配置
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
# 引入tailwind样式
在react文件的入口index.js 引入index.css，其中头部引入tailwind的样式
@tailwind base;
@tailwind components;
@tailwind utilities;
# 详细教程
# 预设样式
简单来讲，就是把html标签默认的样式都干掉了。
# 哪些基操
- 删除默认边距
- 删除标题样式
- 删除列表样式
- 行内元素转为块级（img,video等）
- 图片限制父级宽度
- 重置边框样式
# 扩展预设样式
@tailwind base;
@layer base {
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}
a {
@apply text-blue-600 underline;
}
}
@tailwind components;
@tailwind utilities;
# 如何禁用
module.exports = {
corePlugins: {
preflight: false,
}
}
# 数值换算
4为一个单位，代表1rem，rem又和body的font-size成比例关系，一般默认是16px，那在tailwind中，4就代表16px
# 响应式设计
# 原生css
代码示例
下面代码展示了一个图片在>640px的屏幕上，宽度为100px，在大于1536px的屏幕上宽度为250px
这个其实不太符合人们的使用习惯，起码我更习惯一个范围性的定义，但是那样写没有必要且臃肿，所以你要习惯，脑子里稍微转个弯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试css原生样式</title>
</head>
<style>
/*大于640px时，图片宽度为100px*/
@media (min-width: 640px) {
img {
width: 100px;
}
}
@media (min-width: 1536px) {
img {
width: 250px;
}
}
</style>
<body>
<div>
<span id="sWdith"></span>
<span id="sHeight"></span>
</div>
<img src="bg.webp" alt="">
</body>
<script type="text/javascript">
window.onload = function () {
const screenWidth = window.innerWidth;
const screenHeight = window.innerHeight;
// console.log("屏幕宽度:", screenWidth);
document.getElementById("sWdith").innerText = '宽度：' + screenWidth
document.getElementById("sHeight").innerText = '高度：' + screenHeight
}
</script>
</html>
# @media (min-width: 640px)
宽度大于640px时...
# @media (max-width: 1640px)
宽度小于1640px时...
# @media not all and (min-width: 1640px)
not 就是取反，这个代码的意思就是：宽度小于1640px时...
等价于@media (max-width: 1640px)
# tailwind的响应布局
示例讲解,自己看注释
<span>md是768px,lg是1024px,当小于768px时，宽度为64px，小于1024px时宽度为128px,小于1280为192px,小于1536为256px，其余为64px,大于等于1536时为320px</span>
<img ref={imgRef} className="w-16 md:w-32 lg:w-48 xl:w-64 2xl:w-80" src={require("./bg.webp")} />
# min
| 断点前缀 | 最小宽度 | CSS |
|---|---|---|
sm | 640px | @media (min-width: 640px) { ... } |
md | 768px | @media (min-width: 768px) { ... } |
lg | 1024px | @media (min-width: 1024px) { ... } |
xl | 1280px | @media (min-width: 1280px) { ... } |
2xl | 1536px | @media (min-width: 1536px) { ... } |
# max
| 断点前缀 | 最小宽度 | CSS |
|---|---|---|
max-sm | 640px | @media (max-width: 640px) { ... } |
max-md | 768px | @media (max-width: 768px) { ... } |
max-lg | 1024px | @media (max-width: 1024px) { ... } |
max-xl | 1280px | @media (max-width: 1280px) { ... } |
max-2xl | 1536px | @media (max-width: 1536px) { ... } |
# 断点范围
用冒号堆叠使用
sm:max-md 就是指定sm-md区间
# 自定义断点
配置
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
'tablet': '640px',
// => @media (min-width: 640px) { ... }
'laptop': '1024px',
// => @media (min-width: 1024px) { ... }
'desktop': '1280px',
// => @media (min-width: 1280px) { ... }
},
}
}
使用
tablet:max-laptop
# 任意值
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
<!-- ... -->
</div>
