Tailwind 在线演练场
用 Tailwind CSS v4 工具类编写 HTML，浏览器内实时编译预览。
Tailwind 在线演练场是什么？
它是一个免费的浏览器内编辑器：用 Tailwind CSS v4 工具类编写 HTML，并在实时预览中查看编译结果。官方 Tailwind v4 浏览器编译器已打包进页面，无需安装任何东西。
我的代码会被上传吗？
不会。编译完全在浏览器内完成，Tailwind 引擎为本地打包副本。HTML 不会离开页面，草稿只保存在浏览器的 localStorage 中。
使用的是哪个 Tailwind 版本？
使用最新的 Tailwind CSS v4，通过官方 @tailwindcss/browser 编译器运行。所有核心工具类、变体和默认主题都可用，也支持方括号任意值。
实时预览是如何工作的？
你的 HTML 会被注入沙盒 iframe 并连同编译器一起加载。每次编辑后暂停 500 毫秒再重新编译工具类，输入流畅的同时预览保持最新。
如何测试暗黑模式样式？
勾选「暗黑预览」开关。它会为预览文档添加 dark 类，编译器会把 dark: 变体映射到该类，dark:bg-slate-900 之类的工具类会立即生效。
能看到 Tailwind 生成的 CSS 吗？
可以。编辑器下方的「编译后 CSS」面板显示编译器为你的标记生成的确切样式表，「复制 CSS」按钮可将其复制到剪贴板。
下载的 HTML 包含什么？
「下载 HTML」按钮会生成独立文件：包含你的标记以及内联在 head 中的编译后 CSS，无需任何 CDN 链接或联网即可离线正确渲染。
有起始模板吗？
有。模板选择器提供 Hero 首屏、响应式卡片网格和三档定价表，全部使用当前 v4 工具类编写，另附一个极简空白起点。
如何使用Tailwind 在线演练场
这个演练场在你自己的电脑上运行官方 Tailwind CSS v4 浏览器编译器。左侧用工具类编写普通 HTML，编译器在沙盒预览 iframe 中生成对应的 CSS，下方面板显示产出的确切样式表。全程不上传：编译器、你的标记与草稿都留在浏览器里。
- 在「模板」选择器中选一个起点：首屏 Hero、卡片网格、定价表或空白；你编辑的内容也会在下次访问时自动恢复。
- 在左侧编辑器中修改 HTML。按 Tab 会插入两个空格，停止输入约 500 毫秒后预览会自动重新编译。
- 用「自动换行」开关控制换行方式，用「字号」选择器调整编辑器文字大小。
- 打开「暗黑预览」开关，会为预览文档添加 dark 类；dark:bg-slate-900 之类的工具类立即生效。
- 在「编译后 CSS」面板查看生成的规则，需要时用「复制 CSS」一键复制。
- 用「复制 HTML」获取原始标记，或用「下载 HTML」导出内联了编译后 CSS 的独立文件，可离线直接打开。
至少编译一次后，下载的文件才带有真实样式，导出前先让预览渲染一下。想精简生成的 CSS，就从模板中删掉不需要的元素——面板始终精确反映当前标记所需的内容。
相关工具
- 代码演练场 在线 HTML、CSS 和 JavaScript 演练场，带实时预览、行号编辑器和控制台输出。即改即测，结果可下载为单个 HTML 文件——完全在浏览器中运行。
- CSS Grid生成器 免费在线可视化CSS Grid生成器，实时预览。交互式创建响应式网格布局，一键导出生产级CSS代码。
- Chmod 计算器 免费在线chmod计算器，通过复选框可视化Linux文件权限并计算chmod值。即时转换数字(755, 644)和符号(rwxr-xr-x)表示法，支持setuid、setgid、sticky bit等特殊权限。
- ASCII码表 完整的ASCII字符编码参考表，包含十进制、十六进制、八进制、二进制编码、HTML实体和字符描述。支持即时搜索和筛选。
- HTTP 请求测试 在浏览器中直接测试 REST API。发送 GET、POST、PUT、DELETE 请求，自定义请求头、请求体和查询参数，即时查看响应状态、头部和 JSON 内容。
- .htaccess生成器 生成Apache .htaccess规则，包括重定向、重写、安全头、缓存、压缩等。
- Robots.txt生成器 免费在线robots.txt生成器。创建和自定义robots.txt文件，控制搜索引擎爬取，管理爬虫访问，通过可视化编辑器优化网站SEO。
- 站点地图生成器 免费在线XML站点地图生成器。添加URL、设置优先级和更新频率，在浏览器中即时创建SEO友好的站点地图。