什么是 Tailwind CSS
Tailwind CSS就像是乐高积木，但它是用来搭建网站外观的。想象一下，你有一盒装满各种小零件的乐高，每个零件都有特定的形状和颜色，你可以随意挑选这些零件拼接在一起，很快就能做出你想要的模型。相对于传统的CSS写法， Tailwind CSS更加便捷、快速，不用从头开始写很多复杂的CSS样式规则，也不用担心样式冲突，因为每个类名都做好了自己的工作，而且很容易理解和修改。所以，Tailwind CSS让网页设计变得更加快捷、直观，特别适合快速制作原型或是需要快速迭代的项目。
为什么要用 Tailwind CSS（举例）
如果让你做一个下面这样的按钮，鼠标停留时变为深蓝色，你会怎么做呢？？？
先让我们来看看传统的CSS是如何写出来的
styles.css:
.button {
background-color: #007bff; /* 蓝色背景 */
color: white; /* 文字白色 */
padding: 10px 20px; /* 内边距 */
border-radius: 5px; /* 圆角 */
text-decoration: none; /* 去除下划线 */
font-size: 16px; /* 字体大小 */
}
.button:hover {
background-color: #0056b3; /* 鼠标悬停时变深蓝 */
}
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>传统CSS按钮示例</title> <link rel="stylesheet" href="styles.css"> </head> <body> <a href="#">点击我</a> </body> </html>
再让我们看看如何用Tailwind CSS写
index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tailwind CSS按钮示例</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css"> <!-- 引入Tailwind CSS CDN --> </head> <body> <a href="#" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-700">点击我</a> </body> </html>
在这个例子中，可以看到：
传统CSS需要手动编写样式规则，并通过类名引用，这给予开发者完全的自由度来定制样式，但可能涉及到较多的代码管理和维护工作。
Tailwind CSS则通过预设的类名快速应用样式，大大减少了CSS代码量，提高了开发速度。不过，这要求开发者熟悉Tailwind的类名体系，有时可能需要查阅文档。
怎么安装 Tailwind CSS
1. 初始化项目： 如果你还没有一个项目，首先需要创建一个新的项目并初始化npm。如果你已经有项目，跳到下一步。
2. 安装Tailwind CSS
打开终端，导航到项目根目录，通过npm安装 tailwindcss，然后创建自己的tailwind.config.js 配置文件。
npm install -D tailwindcss npx tailwindcss init
3. 配置 Tailwind CSS： 在 tailwind.config.js 文件中，你可以根据项目需求自定义主题、组件、实用类等。初始情况下，默认配置应该足够启动和运行大多数项目。
export default {
content: [
"./index.html",
"./src/**/*.{js,vue,jsx,tsx}" //* 模糊匹配 ** 所有 任何层级
],
theme: {
extend: {},
},
plugins: [],
}
content 配置告诉 Tailwind CSS 哪些文件需要被扫描，以查找并提取类名。
theme 部分允许你定制和扩展 Tailwind CSS 的设计主题，比如颜色、字体大小、间距、边框等等。extend 对象用于添加或覆盖默认主题变量，保持了对默认主题的良好扩展性。
plugins 数组用于加载额外的 Tailwind CSS 插件，这些插件可以是官方提供的，也可以是社区开发的，用于增加更多的功能和样式。
4. 引入 Tailwind CSS 到项目中： 在你的CSS入口文件（可能是 app.css、styles.css 或 main.css 等）顶部，添加以下代码来引入 Tailwind CSS 的基本样式、组件和实用程序类：
@tailwind base; @tailwind components; @tailwind utilities;
5. 开始使用： 现在你可以在HTML文件中使用 Tailwind CSS 的类名来快速构建布局和样式了。
Tailwind 的基本使用
Tailwind CSS 的基本使用非常直观，主要通过在 HTML 元素的 class 属性中添加预定义的类名来快速应用样式。下面是一些基本的使用示例来帮助你入门：
1. 文本样式
文本颜色：
text-red-500会使文本变为中等饱和度的红色。文本对齐：
text-center使文本居中对齐，text-right为右对齐。字体大小：
text-xl会应用一个较大的字体大小（具体大小取决于你的配置）。
<p class="text-red-500 text-center">欢迎来到我们的网站！</p> <h1 class="text-3xl font-bold">头条新闻</h1>
2. 布局与间距
容器：
container类可以创建一个宽度受限且水平居中的容器。填充与边距：
p-4添加四面等距的内边距（padding），m-2添加外边距（margin）。响应式：使用
md:p-6可以设定在中等屏幕尺寸及以上时的内边距。
<div class="container mx-auto p-8"> <div class="bg-gray-200 p-6 rounded-lg m-4">这是一个卡片</div> <div class="hidden md:block bg-gray-300 p-4">仅在中等尺寸以上屏幕显示</div> </div>
3. 背景与边框
背景颜色：
bg-blue-300应用一种浅蓝色背景。边框：
border-2 border-green-500添加宽度为2像素的绿色边框。圆角：
rounded-lg使元素具有大圆角。
<button class="bg-blue-500 text-white px-4 py-2 rounded-lg">点击我</button> <div class="border-4 border-dashed border-gray-400 p-4">带虚线边框的盒子</div>
4. 显示与隐藏元素
显示：
block、inline-block、inline控制元素的显示方式。隐藏：
hidden隐藏元素，响应式类如sm:block md:hidden可以控制不同屏幕尺寸下的显示状态。
<div class="sm:block md:hidden">只在小到中等尺寸屏幕上显示</div>
5. 动画与过渡
过渡：
transition duration-300 ease-in-out添加一个平滑的过渡效果。动画：虽然 Tailwind 默认没有动画类，但可以通过自定义或插件添加。
<button class="bg-blue-500 hover:bg-blue-700 transition duration-300">鼠标悬停变色</button>
通过这些基本示例，你可以开始构建具有响应式设计的网页，无需编写大量自定义CSS代码。
ok，今天的Tailwind CSS的分享就到这了，小编还在学习中，欢迎大佬们提出建议！！！非常感谢！！！