掌握被 OpenAI、Vercel 和 Shopify 信赖的实用优先 CSS 框架。学习每个实用工具、响应式设计、深色模式、动画和生产优化。本课程包含 30 个循序渐进的小课程，从绝对初级 (A1) 到高级 (B2)，每堂课都简明扼要，并配有快速测验来巩固每个概念。
你将从基础知识开始，逐步学习中级和高级主题，每门课程都建立在前一个的基础上。每堂课都很实用，配有真实示例，需要帮助时还有 AI 导师可用。
每门课程分为四堂重点课。每天完成几堂课，你将在几周内而非几个月内掌握整个课程。
用 AI 工具和功能为你的学习加速
Tailwind CSS Academy 学习路径中的所有课程。
了解 Tailwind CSS 背后的实用优先理念，并理解它与 Bootstrap 等传统 CSS 框架的区别。学习如何在项目中设置 Tailwind，并使用实用类编写您的第一个带样式的元素。
探索 Tailwind 丰富的颜色调色板，学习如何应用背景颜色、渐变和背景图像。了解如何使用不透明度修饰符，创建视觉效果丰富的表面。
学习 Tailwind 一致的间距尺度，为任意元素添加外边距和内边距。了解方向快捷方式和负外边距，精准控制布局。
使用 Tailwind 的 flex 工具类应用 CSS Flexbox 布局，无需编写一行自定义 CSS。轻松构建水平和垂直布局、控制对齐方式并管理换行。
使用 Tailwind 移动优先的响应式断点，构建能够适应任何屏幕尺寸的布局。在特定视口宽度应用不同的工具类，创建真正响应式的设计。
通过掌握 tailwind.config.js 文件，充分发挥 Tailwind 的能力。学习如何扩展默认主题、添加自定义值、配置内容路径和管理插件。
学习何时以及如何使用 Tailwind 的 @apply 指令，将重复的工具类模式提取为可复用的 CSS 类。在实用优先方法与可维护的组件抽象需求之间取得平衡。
使用 Tailwind 工具类为表单元素添加易用且美观的样式。学习创建文本输入框、选择框、复选框、单选按钮，以及带验证状态的完整表单布局。
使用 Tailwind 和少量 JavaScript 构建模态框、对话框和下拉菜单等覆盖层界面模式。学习定位、z-index 堆叠，以及流畅的打开和关闭过渡效果。
了解 Tailwind 的即时引擎，以及它如何仅生成您实际使用的 CSS。学习如何优化生产包、分析输出大小，并编写 JIT 引擎能够检测到的类。
在 Tailwind 配置中建立稳健的设计令牌系统，实现一致的多品牌主题。将基础令牌映射到语义令牌，为大型项目构建可扩展的设计语言。
按照官方设置，将 Tailwind CSS 集成到 React 和 Next.js 应用中。学习在 JSX 中应用工具类、管理条件类名，以及在基于组件的架构中组织样式的最佳实践。
将 Tailwind CSS 与 Headless UI 结合，构建完全易用但不预设样式的组件。在保留开箱即用的强大易用性支持的同时，为菜单、对话框、组合框和过渡效果应用自定义 Tailwind 类。
通过编写自定义插件扩展 Tailwind 的功能，添加新的工具类、组件和变体。学习插件 API，将可复用的样式逻辑封装起来，并在多个项目之间共享。
使用 Tailwind 工具类构建符合 WCAG 易用性标准的界面组件，实现颜色对比度、焦点管理和屏幕阅读器支持。编写适合所有用户的 HTML 结构与 Tailwind 样式。
采用专业的最佳实践，在生产应用中交付 Tailwind CSS。学习大型团队使用的包审计、类组织策略、代码检查和性能优化技术。
使用 Tailwind CSS 构建功能完整的管理后台界面。在统一且响应式的布局中构建侧边栏、顶部栏、统计卡片、数据表格和图表占位组件。
探索 Tailwind 如何融入大型项目所采用的更广泛 CSS 架构策略。学习如何组织文件、构建组件层，并与旧版 CSS 或其他样式工具共存。
免费。你可以免费开始 Tailwind CSS Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。
不需要。课程从基础开始，逐步进阶到更高难度的主题，所以即使你没有任何 HTML 基础也可以开始。
学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合，24/7 AI 导师在你遇到困难时提供个性化帮助。
可以。PRO 学员可以参加考试，获得 Tailwind CSS Academy 课程的可分享的完成证书，其中包含可验证的代码。
可以。CoddyKit 支持网页版和原生 iOS、Android 应用，你可以在任何设备上学习 HTML，进度会自动同步。
