原文
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
<DB className="db-users-name-where-id-1" />
// Renders: "Ada Lovelace"
// Render products as a list
<DB className="db-products-title-limit-5" as="ul" />
// Renders: <ul><li>Mechanical Keyboard</li>...</ul>
// Order by price and show as table
<DB className="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 |
# 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