晋中市网站建设_网站建设公司_轮播图_seo优化

今天在 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)的能力。

1. 零运行时（Zero Runtime）：这些查询是在构建时或服务器端解析的。

2. 安全性：它使用 SQLite，并且是在服务端运行，不会把 SQL 逻辑发送到浏览器端。

3. 类型安全（假的）：作者在官网上很幽默地标了一个标签——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想围观的可以去看下