v1.0 — concept demo

Write SQL like you write Tailwind classes

Explore how TailwindSQL transforms utility-first token strings into real SQL queries — live, in your browser.

Live Query Builder
Pick a table, choose columns, add filters — watch the token string and SQL generate in real time.
  Token Builder
  Generated Output
TailwindSQL Token
select-* from-[users] limit-5
Generated SQL
SELECT * FROM users LIMIT 5;
Ready — click Run to execute
Token Breakdown
See how each part of a TailwindSQL token maps to an SQL clause. Hover over tokens to learn more.
SELECT FROM WHERE ORDER BY LIMIT
Example 01 — Basic select
select-name-email from-[users] where-[status=active] orderby-[created_at-desc] limit-10
SELECT name, email FROM users WHERE status = 'active' ORDER BY created_at DESC LIMIT 10;
Example 02 — Orders filter
select-id-total-status from-[orders] where-[status=pending] orderby-[total-desc] limit-5
SELECT id, total, status FROM orders WHERE status = 'pending' ORDER BY total DESC LIMIT 5;
Example 03 — JSX component form
<DB className="db-users-name-email-where-status-active-limit-20" render="table" /> // Parser reads className token string and executes: SELECT name, email FROM users WHERE status = 'active' LIMIT 20;
How the parser pipeline works
Token String
className prop
→
Tokenizer
splits by "-"
→
Parser
identifies clauses
→
Query Builder
sanitises + builds SQL
→
Execute
returns data
SQL vs TailwindSQL
Side-by-side comparison of identical queries written in traditional SQL vs the TailwindSQL utility syntax.
Fetch active users
Traditional SQL
SELECT name, email, created_at FROM users WHERE status = 'active' ORDER BY created_at DESC LIMIT 10;
TailwindSQL Token
select-name-email-created_at from-[users] where-[status=active] orderby-[created_at-desc] limit-10
Get all pending orders
Traditional SQL
SELECT id, customer, total, status FROM orders WHERE status = 'pending' ORDER BY total DESC LIMIT 5;
TailwindSQL Token
select-id-customer-total-status from-[orders] where-[status=pending] orderby-[total-desc] limit-5
Inside a React Server Component
Traditional approach (separate fetch)
async function UserList() { const users = await db.query( `SELECT name, email FROM users WHERE status = 'active' ORDER BY created_at DESC LIMIT 20` ); return <Table data={users} />; }
TailwindSQL (co-located)
function UserList() { return ( <DB className="db-users-name -email-where-status -active-limit-20" render="table" /> ); }
Core Concepts
The four ideas that make TailwindSQL work — and why they matter for developers.
Concept 01
Utility-First Syntax
Just like Tailwind CSS gives you text-lg instead of font-size: 1.125rem, TailwindSQL gives you from-[users] instead of writing SQL FROM clauses manually. One token, one job.
Concept 02
Co-location
Data dependencies live right next to the component that needs them. No separate fetch files, no prop drilling. The component is self-contained and its data needs are immediately readable from its JSX.
Concept 03
Zero Runtime Overhead
Queries are parsed and executed at build or render time on the server. Nothing ships to the browser. The rendered HTML table or list is what arrives — no client-side JavaScript needed for the query itself.
Concept 04
LLM-Powered Generation
The Python variant uses a LangChain-compatible LLM to convert natural language into valid SQL. You can write "find all inactive users from last quarter" and get back a proper parameterised SQL string, ready to execute.
Concept 05
Token Schema
The token format is: db-{table}-{cols}-where-{field}-{val}-limit-{n}-orderby-{col}-{dir}. It's linear, left-to-right, and reads like a sentence. No SQL keyword order to memorise.
Concept 06
Best Use Cases
Internal dashboards, admin panels, rapid prototypes, data demos, and components with simple SELECT queries. Not recommended for complex JOINs, window functions, or production transactional systems requiring deep SQL tuning.