今天在 GitHub 上看到了一个让我 “大脑宕机” 的项目。
作为一个写了多年代码的开发者，我见识过把 HTML 写在 JS 里的（JSX），也见过把 CSS 写在 JS 里的（CSS-in-JS）。
但我万万没想到，2025 年快到了，竟然有人发明了在 CSS 类名里写 SQL。
没错，你没看错。这个项目叫TailwindSQL。
它的口号是：“像写 TailwindCSS 一样，用类名来写你的数据库查询！”
看完这个项目，我的第一反应是：这也太“抽象”了吧？
它是怎么玩的？
如果你用过 Tailwind CSS，你一定熟悉这种写法：通过组合text-center、p-4、bg-blue-500这样的小原子类来构建样式。
TailwindSQL 把这个逻辑搬到了数据库查询上。
假设你想从users表里查出名字（name），并且只查 ID 为 1 的用户。
传统的 SQL 写法：
SELECT name FROM users WHERE id = 1;TailwindSQL 的写法：
<DB className="db-users-name-where-id-1" />是的，你只需要在一个<DB />组件上写一串 class，它就自动变成了 SQL 查询，并且把结果渲染出来。
页面上会直接显示查询到的结果：Larry Nadella。
再看几个离谱的例子
作者似乎是认真的，他还搞出了更复杂的语法。
1. 查列表并限制数量
比如你想查products表里的商品标题，限制前 5 条。
<DB className="db-products-title-limit-5" as="ul" />加上as="ul"，它甚至直接给你渲染成一个无序列表（<ul>）。
2. 排序
按价格倒序排列：
<DB className="db-products-orderby-price-desc" />3. 连表查询（Join）
最硬核的来了。如果你想把users表和posts表连起来查：
<DB className="db-users-name-limit-5" as="table"> <Join table="posts" on="id-author_id" select="title"/> </DB>这一顿操作下来，前端可以直接“篡位”把后端的活干了。后端开发看完可能都要陷入沉思：我原本是负责写 API 的，现在只需维护表结构了吗？
这到底是什么黑科技？
看到这里，你可能会问：这玩意儿在浏览器里跑，岂不是要把数据库密码暴露给用户了？
其实不会。
TailwindSQL 主要是为了展示React Server Components (RSC)的能力。
零运行时（Zero Runtime）：这些查询是在构建时或服务器端解析的。
安全性：它使用 SQLite，并且是在服务端运行，不会把 SQL 逻辑发送到浏览器端。
类型安全（假的）：作者在官网上很幽默地标了一个标签——
Type Safe*，然后底下加了一行小字：* Type safety not actually included（并不包含真正的类型安全）。
这是一个正经项目吗？
作者在项目介绍里非常诚实。
他在页面底部写了一句话：
“"Built with 💜 using Next.js, SQLite, and questionable decisions." （用 Next.js、SQLite 和一些值得怀疑的决策精心构建。）
在 GitHub 的 README 里，他也明确警告：
“"Do whatever you want with it (except deploy to production 😅)" （你想怎么玩都行，除了把它部署到生产环境。）
所以，这并不是一个为了颠覆现有开发模式而生的工具，而是一次充满极客精神的“整活”。
项目地址在这里https://github.com/mmarinovic/tailwindsql想围观的可以去看下
