TailwindSQL
Like TailwindCSS, but for SQL.
className your way to database queries!
React Server ComponentsSQLiteZero RuntimeType Safe*
<DBclassName="db-users-name-where-id-1"/>
→ Renders: Larry Nadella
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
Larry Nadella
Product List
Display products as an unordered list
<DBclassName="db-products-title-limit-5"as="ul"/>
Output
- Smart Headphones 1
- Classic Desk 2
- Ultra Monitor 3
- Pro Hub 4
- Essential Microphone 5
Top Posts by Likes
Posts ordered by popularity
<DBclassName="db-posts-title-orderby-likes-desc-limit-3"as="ol"/>
Output
- The State of Kubernetes in 2024
- React vs Web Development: Which is Better?
- The State of Kubernetes 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
Larry Nadella, John Eich, Susan Goldwasser, Jeff Allen, Guido Musk
