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 |
- 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 dev
Open 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