CSS 写 SQL 查询?后端慌了!

CSS 写 SQL 查询?后端慌了!

初次接触到这个项目时,我的第一反应只有四个字

这也行?

最近在 X 上大火的一个叫 TailwindSQL 的项目,引发了广泛讨论。

其核心玩法非常简单------通过 CSS 的 className 来实现 SQL 查询功能。

前端发展到这个地步了吗?

让我们先看一个示例:

ini 复制代码
<DB className="db-users-name-where-id-1" />

如果你是前端开发者 ,可能会下意识地认为这是在定义样式

但如果你是后端开发者,估计已经开始皱眉了。

然而实际上,这段代码执行的是:

ini 复制代码
SELECT name FROM users WHERE id = 1;

看到这里,我确实愣了一下。

TailwindSQL 的本质

简而言之,它将 SQL 语句拆解为一个个「类名」片段。

这种做法类似于 TailwindCSSCSS 的处理方式:

csharp 复制代码
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 就会变得越来越冗长,最终形成一串难以维护的代码片段。

说实话,我很难想象在实际项目中,会有开发者认真地写出这样的代码:

ini 复制代码
className="db-orders-user-products-joinwhere-user-age-gt-18and-order-status-paidgroupby-user-id"

这已经不再是 DSL(领域特定语言)了,而是一种折磨。

我认为 TailwindSQL 很难在生产环境中得到应用,它更像是 vibe coding(氛围编程)的产物。

是否使用?可以了解一下,然后继续编写你熟悉的 SQL 吧。

  • TailwindSQL 官网https://tailwindsql.com/
相关推荐
小高0072 小时前
🔥3 kB 换 120 ms 阻塞? Axios 还是 fetch?
前端·javascript·面试
千寻girling2 小时前
面试官 : “ Vue 选项式api 和 组合式api 什么区别? “
前端·vue.js·面试
小二·2 小时前
从零手写《超级玛丽》——前端 Canvas 游戏开发与物理引擎
前端·游戏
da_vinci_x2 小时前
【2D场景】16:9秒变21:9?PS “液态缩放” + AI 补全,零成本适配全面屏
前端·人工智能·游戏·aigc·设计师·贴图·游戏美术
南知意-2 小时前
3.3K Star ! 超级好用开源大屏设计器!
前端·开源·开源项目·工具·大屏设计
华仔啊3 小时前
Vue 组件通信的 8 种最佳实践,你知道几种?
前端·vue.js
在风中的意志3 小时前
[数据库SQL] [leetcode] 614. 二级关注者
数据库·sql
用户4445543654263 小时前
Android依赖的统一管理
前端