TailwindSQL

⚠️DRAFT — NOT READY FOR PRODUCTION This project is under active development. APIs may change without notice.

SQL queries with Tailwind-like syntax.

🌐 Website:tailwindsql.com 📦 Repository:github.com/ptaberg/tailwindsql

---

What is TailwindSQL?

TailwindSQL lets you write SQL queries using a familiar utility-class syntax inspired by Tailwind CSS.

// Instead of this:constsql="SELECT * FROM User WHERE age > 18 ORDER BY name LIMIT 10";// Write this:<QueryBlockquery="select-all from-[User] where-[age>18] orderby-[name] limit-[10]"/>

Syntax

TailwindSQL Token	SQL Output
select-all	SELECT *
select-[id,name]	SELECT id, name
from-[users]	FROM users
where-[age>18]	WHERE age>18
orderby-[created_at]	ORDER BY created_at
limit-[10]	LIMIT 10
offset-[5]	OFFSET 5
join-[posts]	JOIN posts
on-[users.id=posts.user_id]	ON users.id=posts.user_id
groupby-[status]	GROUP BY status
having-[count>5]	HAVING count>5

Quick Start

import{QueryBlock,createPrismaAdapter}from"@repo/tailwindsql";import{prisma}from"./db";constadapter=createPrismaAdapter(prisma);exportfunctionUserList(){return(<QueryBlockquery="select-[id,name,email] from-[User]"adapter={adapter}>{(users)=>(<ul>{users.map((user)=>(<likey={user.id}>{user.name}</li>))}</ul>)}</QueryBlock>);}

Parser Only

Use the parser directly without React:

import{parseTailwindSQL}from"@repo/tailwindsql";parseTailwindSQL("select-all from-[User] where-[id=1]");// → "SELECT * FROM User WHERE id=1"

Adapters

Prisma

import{createPrismaAdapter}from"@repo/tailwindsql";import{PrismaClient}from"@prisma/client";constprisma=newPrismaClient();constadapter=createPrismaAdapter(prisma);

Custom Adapter

Any function matching (sql: string) => Promise<unknown[]> works:

constcustomAdapter=async(sql: string)=>{constresult=awaitmyDatabase.execute(sql);returnresult.rows;};

Development

# Install dependencies
npm install
# Run development server
npx turbo dev
# Build
npx turbo build

Project Structure

├── apps/
│ ├── web/ # Demo app
│ └── docs/ # Documentation site
├── packages/
│ └── tailwindsql/ # Core library
│ ├── parser.ts # TailwindSQL → SQL parser
│ ├── QueryBlock.tsx # React component exports
│ └── QueryBlock.client.tsx # Client component

---

Status: 🚧 Draft License: MIT

---

Inspired by mmarinovic/tailwindsql