Like TailwindCSS, but for SQL queries in React Server Components.
TailwindSQL lets you write SQL queries using Tailwind-style class names. Just use className to query your database directly in React Server Components!
// Fetch and render a user's name<DBclassName="db-users-name-where-id-1"/>// Renders: "Ada Lovelace"// Render products as a list<DBclassName="db-products-title-limit-5"as="ul"/>// Renders: <ul><li>Mechanical Keyboard</li>...</ul>// Order by price and show as table<DBclassName="db-products-orderby-price-desc"as="table"/>- 🎨 Tailwind-style syntax - Write SQL queries using familiar class names
- ⚡ React Server Components - Zero client-side JavaScript for queries
- 🔒 SQLite - Built on better-sqlite3 for fast, local database access
- 🎯 Zero Runtime - Queries are parsed and executed at build/render time
- 🎭 Multiple Render Modes - Render as text, lists, tables, or JSON
db-{table}-{column}-where-{field}-{value}-limit-{n}-orderby-{field}-{asc|desc}
| Class Name | SQL Query |
|---|---|
db-users | SELECT * FROM users |
db-users-name | SELECT name FROM users |
db-users-where-id-1 | SELECT * FROM users WHERE id = 1 |
db-posts-title-limit-10 | SELECT title FROM posts LIMIT 10 |
db-products-orderby-price-desc | SELECT * FROM products ORDER BY price DESC |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/mmarinovic/tailwindsql.git
cd tailwindsql
# Install dependencies
npm install
# Seed the database with demo data
npm run seed
# Start the development server
npm run devOpen http://localhost:3000 to see the demo and interactive playground!
- Parser (
src/lib/parser.ts) - Parses class names into query configurations - Query Builder (
src/lib/query-builder.ts) - Transforms configs into safe SQL queries - DB Component (
src/components/DB.tsx) - React Server Component that executes queries and renders results
The as prop controls how results are rendered:
| Value | Description |
|---|---|
span | Inline text (default) |
div | Block element |
ul | Unordered list |
ol | Ordered list |
table | HTML table |
json | JSON code block |
tailwindsql/
├── src/
│ ├── app/ # Next.js app directory
│ │ ├── page.tsx # Landing page
│ │ └── api/ # API routes
│ ├── components/ # React components
│ │ ├── DB.tsx # Main DB component
│ │ ├── Example.tsx # Example components
│ │ └── Playground.tsx # Interactive playground
│ └── lib/ # Core logic
│ ├── parser.ts # Class name parser
│ ├── query-builder.ts # SQL query builder
│ └── db.ts # Database connection
└── README.md
This project was built to explore css-driven database queries.
MIT - Do whatever you want with it (except deploy to production 😅)
Built with 💜 using Next.js, SQLite, and questionable decisions