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"/>
Donald Bartik
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
Donald Bartik
Product List
Display products as an unordered list
<DBclassName="db-products-title-limit-5"as="ul"/>
Output
- Essential Microphone 1
- Classic Cable 2
- Modern Hub 3
- Premium Dock 4
- Modern Stand 5
Top Posts by Likes
Posts ordered by popularity
<DBclassName="db-posts-title-orderby-likes-desc-limit-3"as="ol"/>
Output
- How I Built WebAssembly with Kubernetes
- Getting Started with Machine Learning
- Why DevOps is the Future of Edge Computing
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
Donald Bartik, Dennis Li, Margaret Li, Grace Stroustrup, Linus Li
User Details
Select multiple columns from users table
<DBclassName="db-users-name-email-limit-5"as="table"/>
Output
| name | |
|---|---|
| Donald Bartik | donald.bartik0@example.com |
| Dennis Li | dennis.li1@example.com |
| Margaret Li | margaret.li2@example.com |
| Grace Stroustrup | grace.stroustrup3@example.com |
| Linus Li | linus.li4@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 Lamp 90 | 999.09 |
| Elite Keyboard 269 | 997.79 |
| Elite Cable 668 | 995.44 |
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 Complete Guide to GraphQL | 59164 |
| 10 Tips for Better Go | 59036 |
| Docker vs DevOps: Which is Better? | 58695 |
| Understanding WebAssembly in Docker | 57447 |
| Go vs GraphQL: Which is Better? | 57331 |
Admin Email
Find admin user's email
<DBclassName="db-users-email-where-role-admin-limit-15"/>
Output
linus.li4@example.com, brendan.pichai12@example.com, sundar.mayer35@example.com, shafi.huang53@example.com, james.lovelace57@example.com, marissa.hopper65@example.com, vint.dahl67@example.com, brendan.gosling76@example.com, linus.wilson84@example.com, jean.wilson86@example.com, vint.huang87@example.com, donald.zuckerberg90@example.com, sophie.thompson97@example.com, sophie.wilson100@example.com, margaret.lovelace106@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 | Essential Microphone 1 | High-quality build with premium materials | 505.92 | networking | 205 | 1.9 | 2025-12-20 09:41:44 |
| 2 | Classic Cable 2 | Built for comfort and productivity | 865.68 | peripherals | 207 | 4.4 | 2025-12-20 09:41:44 |
| 3 | Modern Hub 3 | Perfect for professionals and enthusiasts | 862.51 | electronics | 414 | 4.1 | 2025-12-20 09:41:44 |
| 4 | Premium Dock 4 | Built for comfort and productivity | 61.9 | accessories | 106 | 3.3 | 2025-12-20 09:41:44 |
| 5 | Modern Stand 5 | Sleek and modern aesthetic | 248.01 | storage | 298 | 3.7 | 2025-12-20 09:41:44 |