TailwindSQL 🎨

Like TailwindCSS, but for SQL queries in React Server Components.

What is this?

TailwindSQL lets you write SQL queries using Tailwind-style class names. Just use className to query your database directly in React Server Components!

// Fetch and render a user's name
<DB className="db-users-name-where-id-1" />
// Renders: "Ada Lovelace"

// Render products as a list
<DB className="db-products-title-limit-5" as="ul" />
// Renders: <ul><li>Mechanical Keyboard</li>...</ul>

// Order by price and show as table
<DB className="db-products-orderby-price-desc" as="table" />

Features

• 🎨 Tailwind-style syntax - Write SQL queries using familiar class names
• ⚡ React Server Components - Zero client-side JavaScript for queries
• 🔒 SQLite - Built on better-sqlite3 for fast, local database access
• 🎯 Zero Runtime - Queries are parsed and executed at build/render time
• 🎭 Multiple Render Modes - Render as text, lists, tables, or JSON

Syntax

db-{table}-{column}-where-{field}-{value}-limit-{n}-orderby-{field}-{asc|desc}

Examples

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/mmarinovic/tailwindsql.git
cd tailwindsql

# Install dependencies
npm install

# Seed the database with demo data
npm run seed

# Start the development server
npm run dev

Open http://localhost:3000 to see the demo and interactive playground!

How It Works

1. Parser (src/lib/parser.ts) - Parses class names into query configurations
2. Query Builder (src/lib/query-builder.ts) - Transforms configs into safe SQL queries
3. DB Component (src/components/DB.tsx) - React Server Component that executes queries and renders results

Render Modes

The as prop controls how results are rendered:

Project Structure

tailwindsql/
├── src/
│   ├── app/              # Next.js app directory
│   │   ├── page.tsx      # Landing page
│   │   └── api/          # API routes
│   ├── components/        # React components
│   │   ├── DB.tsx        # Main DB component
│   │   ├── Example.tsx   # Example components
│   │   └── Playground.tsx # Interactive playground
│   └── lib/              # Core logic
│       ├── parser.ts     # Class name parser
│       ├── query-builder.ts # SQL query builder
│       └── db.ts         # Database connection
└── README.md

Why?

This project was built to explore css-driven database queries.

License

MIT - Do whatever you want with it (except deploy to production 😅)

---

Built with 💜 using Next.js, SQLite, and questionable decisions