TailwindSQL – Like TailwindCSS, but for SQL Queries in React Server Components

Summary

TailwindSQL 🎨 Like TailwindCSS, but for SQL queries in React Server Components. What is this? 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" /> Features 🎨 Tailwind-style syntax - Write SQL queries using familiar class names - Write SQL queries using familiar class names ⚡ React Server Components - Zero client-side JavaScript for queries - Zero client-side JavaScript for queries 🔒 SQLite - Built on better-sqlite3 for fast, local database access - Built on better-sqlite3 for fast, local database access 🎯 Zero Runtime - Queries are parsed and executed at build/render time - Queries are parsed and executed at build/render time 🎭 Multiple Render Modes - Render as text, lists, tables, or JSON Syntax db-{table}-{column}-where-{field}-{value}-limit-{n}-orderby-{field}-{asc|desc} Examples 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 Getting Started Prerequisites Node.js 18+ npm or yarn Installation # 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! How It Works Parser ( src/lib/parser.ts ) - Parses class names into query configurations Query Builder ( src/lib/query-builder....