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:
const sql = "SELECT * FROM User WHERE age > 18 ORDER BY name LIMIT 10";

// Write this:
<QueryBlock query="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";

const adapter = createPrismaAdapter(prisma);

export function UserList() {
  return (
    <QueryBlock
      query="select-[id,name,email] from-[User]"
      adapter={adapter}
    >
      {(users) => (
        <ul>
          {users.map((user) => (
            <li key={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";

const prisma = new PrismaClient();
const adapter = createPrismaAdapter(prisma);

Custom Adapter

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

const customAdapter = async (sql: string) => {
  const result = await myDatabase.execute(sql);
  return result.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

Tailwindsql

Install / Use

README