TailwindSQL lets you write SQL queries using Tailwind-style class names.
TailwindSQL lets you write SQL queries using Tailwind-style class names.
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
// Renders: "Ada Lovelace"
// Render products as a list
// Renders:
Mechanical Keyboard
...
// Order by price and show as table
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!
src/lib/parser.ts) - Parses class names into query configurationssrc/lib/query-builder.ts) - Transforms configs into safe SQL queriessrc/components/DB.tsx) - React Server Component that executes queries and renders resultsThe 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.mdThis 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
No open issues yet, or sync has not completed.