前端奇谈：TailwindSQL用CSS类名写SQL查询可行性分析

说实话，我第一次看到这个项目的时候，第一反应只有四个字：

图1：表达初次看到TailwindSQL时的震惊反应

这也行？

一个叫 TailwindSQL 的东西，最近在 X 上被转疯了。它的玩法很简单——用 CSS 的 className，来写 SQL 查询。

图2：TailwindSQL使用className进行SQL查询的界面示例

前端已经发展到这一步了吗？

先看一段代码：

<DB className="db-users-name-where-id-1" />

如果你是前端，下意识会以为这是在 写样式；如果你是后端，大概率已经开始皱眉了。

但它实际做的事情是：

SELECT name FROM users WHERE id = 1;

那一刻我是真的愣了一下。

TailwindSQL 到底在干嘛？

简单说，它就是把 SQL 拆成了一段段 「类名」。这种思路有点像 TailwindCSS 对 CSS 的做法：

db-users
db-users-name
db-users-name-where-id-1
db-products-orderby-price-desc

这些 className 最终会被解析成 SQL，在 React Server Components 里直接执行。你甚至不用写 API，也不用 ORM。

那它靠谱么？

如果从工程角度讲，答案其实很明确：不太行。

SQL 的麻烦，从来不在语法，而在于：

• 表关系
• JOIN
• 子查询
• 事务
• 权限
• 边界条件

一旦查询稍微复杂一点，className 只会越写越长，最后变成一串谁都不想维护的东西。

说实话，我很难想象在真实项目里，会有人认真地写：

className="
db-orders-user-products-join
where-user-age-gt-18
and-order-status-paid
groupby-user-id
"

这已经不是 DSL（领域特定语言）了，这是折磨。我不觉得 TailwindSQL 会被用在生产环境，它更像是一次 vibe coding（氛围编码）的产物。

至于用不用？看看就好，然后继续写你该写的 SQL。这种将数据库查询与样式类名混搭的激进尝试，或许能给我们带来一些关于前端与后端边界的新思考。对这类新奇技术实验感兴趣的朋友，欢迎到 云栈社区 的技术论坛板块参与更多讨论。

• TailwindSQL 官网：https://tailwindsql.com/