Tailwind-style utilities for everything.
classNameyour way to database queries, API responses, AI generation, and more!
| Package | Description |
|---|---|
| @tailwind-stack/sql | SQL queries via className |
| @tailwind-stack/fetch | API fetching via className |
| @tailwind-stack/ai | AI generation via className |
| @tailwind-stack/auth | Auth conditionals via className |
| @tailwind-stack/qr | QR code generation via className |
| @tailwind-stack/form | Form markup via className |
| @tailwind-stack/fs | File system reading via className |
| @tailwind-stack/env | Environment variables via className |
| @tailwind-stack/crypto | Crypto operations via className |
// SQL queries
<DB className="db-users-name-where-id-1" />
// API fetching
<Fetch className="fetch-[https://api.example.com/users/1]-select-name" />
// AI generation
<AI className="ai-$haiku-[serverless]" as="pre" />
// Auth conditionals
<Auth className="if-auth">Welcome back!</Auth>
// QR codes
<QR className="qr-encode-[https://example.com]-size-lg" />
// Forms
<Form className="form-field-email:email:required-submit-Log_In" />
// File system
<FS className="fs-$readme-lines-1-10" as="pre" />
// Environment variables
<Env className="env-NODE_ENV" />
// Crypto
<Crypto className="crypto-uuid" />What if everything worked like TailwindCSS?
Instead of writing imperative code, you declare what you want in className. The components handle the rest - fetching, rendering, error handling.
// Instead of this:
const user = await db.query('SELECT name FROM users WHERE id = 1')
return <span>{user.name}</span>
// Write this:
<DB className="db-users-name-where-id-1" /># Clone and install
git clone https://github.com/your-org/tailwind-stack
cd tailwind-stack
bun install
# Run the landing page
bun devMIT