TailwindSQLLike TailwindCSS, but for SQL.
className your way to database queries!
React Server ComponentsSQLiteZero RuntimeType Safe
Quick Links:
<DBclassName="db-users-name-where-id-1"/>
Jeff Lovelace
Syntax Reference
db-{table}-{column}-where-{field}-{value}-limit-{n}-orderby-{field}-{asc|desc}Interactive Playground
Type a TailwindSQL query and see results update in real-time
<DBclassName=""as=""/>
More Examples
Different ways to query and render data with TailwindSQL
Get User Name
Fetch a single user's name by ID
<DBclassName="db-users-name-where-id-1"/>
Output
Jeff Lovelace
Product List
Display products as an unordered list
<DBclassName="db-products-title-limit-5"as="ul"/>
Output
- Premium Monitor 1
- Elite Webcam 2
- Premium Microphone 3
- Classic Hub 4
- Modern Microphone 5
Top Posts by Likes
Posts ordered by popularity
<DBclassName="db-posts-title-orderby-likes-desc-limit-3"as="ol"/>
Output
- Getting Started with TypeScript
- Machine Learning vs Cloud Computing: Which is Better?
- The State of Python in 2024
Users with Posts (JOIN)
Join users with their posts
<DBclassName="db-users-name-limit-5"as="table">
<Jointable="posts"on="id-author_id"select="title"/>
</DB>Output
Jeff Lovelace, Margaret McCarthy, Bill Gates, Ada Brin, Ken Hamilton
User Details
Select multiple columns from users table
<DBclassName="db-users-name-email-limit-5"as="table"/>
Output
| name | |
|---|---|
| Jeff Lovelace | jeff.lovelace0@example.com |
| Margaret McCarthy | margaret.mccarthy1@example.com |
| Bill Gates | bill.gates2@example.com |
| Ada Brin | ada.brin3@example.com |
| Ken Hamilton | ken.hamilton4@example.com |
Top Products by Price
Sort and limit products by price
<DBclassName="db-products-title-price-orderby-price-desc-limit-3"as="table"/>
Output
| title | price |
|---|---|
| Pro Dock 322 | 999.19 |
| Pro Desk 712 | 998.99 |
| Wireless Microphone 462 | 998.77 |
Published Posts
Filter published posts ordered by views
<DBclassName="db-posts-title-views-where-published-1-orderby-views-desc-limit-5"as="table"/>
Output
| title | views |
|---|---|
| The State of Python in 2024 | 59185 |
| Getting Started with Machine Learning | 58944 |
| 10 Tips for Better REST APIs | 58911 |
| Getting Started with Rust | 58346 |
| Edge Computing vs AI: Which is Better? | 58127 |
Admin Email
Find admin user's email
<DBclassName="db-users-email-where-role-admin-limit-15"/>
Output
ken.hamilton4@example.com, sophie.wojcicki14@example.com, linus.musk22@example.com, brian.cerf25@example.com, john.thompson29@example.com, bjarne.goldwasser34@example.com, alan.huang39@example.com, alan.hopper64@example.com, john.liskov65@example.com, sheryl.perlman68@example.com, vint.torvalds69@example.com, ada.ritchie79@example.com, linus.berners-lee96@example.com, sheryl.torvalds98@example.com, guido.bartik114@example.com
Product Catalog
Full product details in a table
<DBclassName="db-products-limit-5"as="table"/>
Output
| id | title | description | price | category | stock | rating | created_at |
|---|---|---|---|---|---|---|---|
| 1 | Premium Monitor 1 | Built for comfort and productivity | 251.73 | audio | 41 | 5 | 2025-12-20 16:01:43 |
| 2 | Elite Webcam 2 | High-quality build with premium materials | 89.02 | audio | 293 | 3.3 | 2025-12-20 16:01:43 |
| 3 | Premium Microphone 3 | Award-winning design and performance | 79.51 | peripherals | 60 | 4 | 2025-12-20 16:01:43 |
| 4 | Classic Hub 4 | Next-generation features | 556.74 | audio | 488 | 2.3 | 2025-12-20 16:01:43 |
| 5 | Modern Microphone 5 | Perfect for professionals and enthusiasts | 213.44 | audio | 269 | 4.6 | 2025-12-20 16:01:43 |