tailwind-stack/

TailwindSQL

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

React Server ComponentsSQLiteZero Runtime
<DB className="db-users-name-where-id-1" />
renders
Query error: no such table: users

Syntax Reference

db-{table}-{column}-where-{field}-{value}-limit-{n}-orderby-{field}-{asc|desc}
db-table

The table name

-column

Columns to select

-where-field-value

Filter condition

-limit-n

Limit results

Interactive Playground

Type a TailwindSQL query and see results update in real-time

Try:
<DB
  className=""
  as=""
/>

Database Explorer

Browse tables and see sample data

More Examples

Different ways to query and render data with TailwindSQL

Top Posts by Likes

Posts ordered by popularity

<DB
  className="db-posts-title-orderby-likes-desc-limit-1"
  as="ol"
/>
Output
Query error: no such table: posts

Get User Name

Fetch a single user's name by ID

<DB
  className="db-users-name-where-id-1"
/>
Output
Query error: no such table: users

Product List

Display products as an unordered list

<DB
  className="db-products-title-limit-5"
  as="ul"
/>
Output
Query error: no such table: products

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
Query error: no such table: users

How to Use

import { DB, Join } from '@tailwind-stack/sql'
// Simple query
<DB className="db-users-name-where-id-1" />
// With render format
<DB className="db-products-title-limit-5" as="ul" />
// With JOIN
<DB className="db-users-name-limit-5" as="table">
  <Join table="posts" on="id-author_id" select="title" />
</DB>