TailwindSQL

Like TailwindCSS, but for SQL queries. className your way to database queries!

React Server ComponentsSQLiteZero RuntimeType Safe*
View on GitHub
<DB className="db-users-name-where-id-1" />
→ Renders: James Wilson

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

<DB className="db-users-name-where-id-1" />
Output
James Wilson

Product List

Display products as an unordered list

<DB className="db-products-title-limit-5" as="ul" />
Output
  • Pro Tablet 1
  • Ultra Keyboard 2
  • Ergonomic Webcam 3
  • Smart Desk 4
  • Wireless Mouse 5

Top Posts by Likes

Posts ordered by popularity

<DB className="db-posts-title-orderby-likes-desc-limit-3" as="ol" />
Output
  1. Advanced GraphQL Techniques
  2. Mastering Edge Computing for Beginners
  3. Advanced SQL Techniques

Users with Posts (JOIN)

Join users with their posts

<DB className="db-users-name-limit-5" as="table">
<Join table="posts" on="id-author_id" select="title" />
</DB>
Output
James Wilson, Susan Stroustrup, Grace Li, Jean Ritchie, Steve McCarthy