Tailwind CSS

动画效果展示

体验 Tailwind CSS 强大的工具类如何轻松实现各种动画和过渡效果

悬停效果

状态变化

加载状态

多种动画效果实时演示

<!-- 悬停效果示例 -->
<button class="px-4 py-2 bg-dark-200 hover:bg-primary rounded-lg transition-all duration-300">
  按钮
</button>

<!-- 动画效果示例 -->
<div class="w-12 h-12 bg-primary rounded-lg animate-spin"></div>
<div class="w-10 h-10 bg-secondary rounded-full animate-pulse"></div>

关于 Tailwind CSS

了解这个革命性 CSS 框架的起源、名称含义和核心特性

名字含义

"Tailwind"（顺风）这个名字来源于航海术语，指的是从船尾吹来的风，能帮助船只更快地前进。

这个名字象征着该框架旨在为开发者提供"顺风"，帮助他们更高效地构建网站，而不是成为阻碍开发的"逆风"(Headwind)。

起源

Tailwind CSS 由 Adam Wathan 于 2017 年创建，最初是他个人项目中使用的一套 CSS 工具类集合。

随着其理念的受欢迎程度不断提高，它逐渐发展成为一个完整的框架。2020 年 11 月，Tailwind CSS v2.0 发布，带来了许多重要改进。最新版本是 v3.0+，引入了 JIT 编译模式等革命性特性。

优点

实用优先的方法，加速开发流程
高度可定制，适应各种设计系统
通过 JIT 模式生成最小化的 CSS
无需切换上下文，在 HTML 中完成样式编写
优秀的响应式设计支持
丰富的工具类覆盖各种 CSS 属性

缺点

学习曲线陡峭，需要记忆大量工具类
HTML 可能变得冗长和混乱
不适合小型项目，有一定配置成本
团队协作需要统一的命名约定
与传统 CSS 思维方式不同，需要适应
某些复杂动画仍需自定义 CSS

免费资源与使用方法

探索丰富的学习资源，快速开始使用 Tailwind CSS

免费资源

官方文档

全面的 Tailwind CSS 指南和参考

Tailwind Components

免费的 Tailwind 组件库

Tailwind UI

高质量的 UI 组件集（部分免费）

Tailwind Play

在线 Tailwind 代码编辑器

GitHub 仓库

源代码和贡献指南

快速开始

1 通过 CDN 使用

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold text-primary">Hello, Tailwind!</h1>
  </body>
</html>

2 使用 npm 安装

# 安装 Tailwind CSS
npm install -D tailwindcss

# 初始化配置文件
npx tailwindcss init

# 在 tailwind.config.js 中配置内容路径
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

3 配置样式文件

/* 在 CSS 文件中引入 Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

4 启动开发服务器

# 启动 Tailwind CLI 开发服务器
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

社区评论

来自全球开发者对 Tailwind CSS 的真实评价

Sarah Johnson

2天前

使用 Tailwind 后，我的开发效率提高了至少 40%。不再需要为了一个小样式切换到 CSS 文件，一切都可以在 HTML 中完成。

Michael Chen

1周前

刚开始觉得学习曲线有点陡，但一旦掌握了基本概念，就再也回不去了。自定义主题的能力非常强大，适合各种项目需求。

Emma Rodriguez

2周前

对于大型项目非常有用，但小型项目感觉有点臃肿。HTML 变得有点冗长，需要花时间组织代码才能保持可读性。

David Kim

3周前

JIT 编译模式彻底改变了游戏规则！生成的 CSS 文件体积大大减小，性能提升明显。强烈推荐给所有前端开发者。

Olivia Parker

1个月前

与 React 配合使用简直完美！通过组件封装可以解决 HTML 冗长的问题，同时享受快速开发的便利。文档非常完善。

James Wilson