# Tailwind CSS Projects at AI Tinkerers

> Canonical HTML: https://aitinkerers.org/technologies/tailwind-css
> Markdown URL: https://aitinkerers.org/technologies/tailwind-css.md
> Technology record last updated: 2026-09-18T14:19:44Z
> Generated: 2026-09-21T08:39:37Z

Utility-first CSS framework: rapidly build modern UIs by composing low-level classes (e.g., `flex`, `pt-4`, `text-center`) directly in your HTML markup.

Tailwind CSS is a utility-first framework: it provides thousands of low-level classes (like `flex`, `pt-4`, and `bg-blue-500`) that map directly to single CSS properties, allowing developers to build complex, custom designs without writing custom CSS. This approach, unlike traditional component-based frameworks, ensures consistency across a project's design system and significantly accelerates development speed. The Just-In-Time (JIT) engine is key: it scans your code to generate only the necessary styles, resulting in an optimized, tiny production CSS bundle, which is a major performance advantage for any modern web application.

- Official technology site: https://tailwindcss.com/
- Public AI Tinkerers demos and talks: 22
- Result page: 1 of 1

## Recent Public Talks and Demos

### [What happens when you give a guy with little coding experience an AI Server? Just Another AI DAW (JAAD)](https://columbus.aitinkerers.org/talks/rsvp_4YU8BPj7FwE)

Just Another AI DAW (JAAD) is an open-source, browser-based, multitrack Digital Audio Workstation that integrates Google Gemini to deliver real-time AI mixing advice, generative MIDI/stem creation, and mastering tools directly in a local-first interface. In the live demo, I will showcase a working multitrack workspace with responsive AudioWorklet playback, demonstrate Gemini-powered tempo detection and natural-language MIDI sequence generation, and show how we handle local storage caching using the Origin Private File System (OPFS) alongside a WebGL-based visual analyzer.

- Event context: AI Tinkerers - Columbus July Meetup — 2026-07-06 — Columbus
- Public talk page: https://columbus.aitinkerers.org/talks/rsvp_4YU8BPj7FwE

### [Building Product Videos with Code: From React to Launch Video in 5 Minutes](https://zurich.aitinkerers.org/talks/rsvp_dcRr36x9-9s)

A programmatic video production pipeline using Remotion that lets you build product launch videos entirely in code. I'll walk through a live coding session where we build a video from scratch: composing scenes as React components, reusing existing web app UI components directly in video compositions, generating AI narration with ElevenLabs, syncing text transitions to the beat of a backing track, and rendering the final output. The demo shows how your easy it is to create launch videos for new features, based on the code of the feature.

- Event context: AI Tinkerers Zürich: July Build Night with Swisscom Ventures — 2026-07-01 — Zürich
- Public talk page: https://zurich.aitinkerers.org/talks/rsvp_dcRr36x9-9s

### [Why I gave up on agent voting: hard escalation in a 3-reviewer LLM pipeline](https://nyc.aitinkerers.org/talks/rsvp_gIVCOg1tRfI)

Redline is a production-readiness review tool for AI agents. Three specialized LLM reviewers (Engineer, Risk, Business) read an agent transcript against a company's pasted rulebook, mark up the dossier in three colors, and a synthesizer returns a Deploy, Hold, or Kill verdict. Live demo: pasting a real agent dossier into sanjitkangovi.com/redline, watching the three reviewers annotate in parallel, then walking through the deterministic synthesis layer in the backend that decides the final verdict. I'll show the prompt structure for each reviewer role, the JSON contract between reviewer and synthesizer, and the server-side escalation logic firing when a critical Risk finding contradicts the other two reviewers.

- Event context: NY Tech Week Demo Day ft PostHog, Convex, Veris, & HPE — 2026-06-03 — New York City
- Public talk page: https://nyc.aitinkerers.org/talks/rsvp_gIVCOg1tRfI

### [inteligencia Artificial y creatividad: Dos fronteras cada vez mas juntas](https://pereira.aitinkerers.org/talks/rsvp_z2VSRgVfmfk)

Una herramienta para la escritura de libros, ebooks, biografias impulsada con inteligencia artificial.

- Event context: AI Tinkerers Pereira: Innovando con IA desde el SENA — 2026-04-30 — Pereira
- Public talk page: https://pereira.aitinkerers.org/talks/rsvp_z2VSRgVfmfk

### [Juggle 10+ projects in parallel without getting overwhelmed](https://atlanta.aitinkerers.org/talks/rsvp_chajEf1PUyg)

I am building what Claude described to be a Project Awareness System. As a developer I can now trust Claude to let me plan with it then have it write the code, but that leads to a lot of wait time. So I started working on multiple projects in parallel, each in a different tmux window so I don't end up having to wait. However, one project often begets often projects that it depends, so over time I found myself with over 15 parallel projects all in-progress. And with this I got lost in what to do next, and so did Claude. To address this I started building a web dashboard of all my current projects that gets its data from monitors running in hooks, on prompts and as a daemon. I call this software Endless. It is still very early and very much a work in progress.

- Event context: AI Tinkerers Atlanta: Community Demos & Technical Deep Dives — 2026-04-21 — Atlanta
- Public talk page: https://atlanta.aitinkerers.org/talks/rsvp_chajEf1PUyg

### [Re-inventing CSS, again, but this time for AI](https://denver-boulder.aitinkerers.org/talks/rsvp_Cm8pGpaoBhE)

Modifying ow CSS is compiled in NextJS to improve design iterations with AI.

- Event context: AI Tinkerers Denver Meetup - March 25, 2026 — 2026-03-25 — Denver
- Public talk page: https://denver-boulder.aitinkerers.org/talks/rsvp_Cm8pGpaoBhE

### [Real-Time Web Scraping with AI Agents: No Puppeteer, No XPath, Just a Goal](https://ho-chi-minh-city.aitinkerers.org/talks/rsvp_APx09m92Cf8)

Traditional scraping breaks every time a site updates its HTML. I'll show a different approach: give an AI agent a URL and a plain-English goal, and it figures out the page on its own. Live on stage: a hotel search app that sends Booking.com and Agoda URLs to Tinyfish agents. Each agent autonomously navigates the real site, handles dynamic content, and returns structured JSON — no CSS selectors, no brittle DOM parsing. II'll also show the Tinyfish run dashboard live so you can watch the agent clicking through pages in real time.

- Event context: AI Tinkerers Ho Chi Minh City: From Prompt to Agent — 2026-03-07 — Ho Chi Minh City
- Public talk page: https://ho-chi-minh-city.aitinkerers.org/talks/rsvp_APx09m92Cf8

### [Clawber.ai - Agentic Battle Arena](https://seattle.aitinkerers.org/talks/rsvp_v9frcFVTu5g)

Clawber.ai is a battle royale arena for AI agents, modeled after Moltbook (Reddit for agents). Agents built with OpenClaw or other AI agents write JavaScript to control bots and compete in automated ladder matches running 24/7. Agents self-register via API and submit bot code that runs sandboxed on AWS Lambda. Human operators verify ownership by tweeting a claim code, generating organic mentions with every signup. Humans can stay in the loop throughout, able to influence bot strategy and watch matches live. ELO-based rankings track performance over time, making Clawber a real-world benchmark for comparing strategic reasoning and coding capabilities across agent frameworks.

- Event context: AI Tinkerers Seattle: GTM Engineering Kickoff — Building AI for Growth — 2026-02-26 — Seattle
- Public talk page: https://seattle.aitinkerers.org/talks/rsvp_v9frcFVTu5g

### [Claude in the Channel: Building an Autonomous Frontend Agent for No-Code Teams](https://tokyo.aitinkerers.org/talks/rsvp_ILK68XIsX3A)

I’ll demonstrate how I turned a Slack channel into a functional "Frontend Desk" where designers and admin staff ship production code without touching an IDE, or having to pay for a no-code platform or a content delivery network (CDN). The system connects a Slack bot to a Claude-powered agent sitting on a server with a live clone of our React/Vite/Tailwind repository. I’ll walk through the technical plumbing that allows the bot to: * Ingest design specs and SVGs directly from Slack threads. * Contextualize those assets within a complex codebase to perform precise UI updates. * Trigger a password-protected staging environment for instant visual feedback. * Execute a `/approve` flow that handles the merging and deployment to GitHub Pages.

- Event context: AI Tinkerers Tokyo - Toranomon Meetup - February 19, 2026 — 2026-02-19 — Tokyo
- Public talk page: https://tokyo.aitinkerers.org/talks/rsvp_ILK68XIsX3A

### [From Screenshot to Code: AI-Powered Design Cloning and Verification](https://nyc.aitinkerers.org/talks/rsvp_oSYfxCynLls)

Live demo of an AI pipeline I made that takes any website URL and recreates it in an editable sandbox. The system: 1. Captures a live site using Playwright (screenshots, DOM, styles) 2. Uses Claude to analyze the design and generate a React clone 3. Creates an instant editable sandbox with the cloned site 4. Verifies the clone matches the original using design contracts 5. Suggests and applies CSS fixes for any differences I'll show the full loop: paste a URL → AI analyzes it → generates code → live preview appears → iterate with chat to refine. No Figma access needed, no manual coding - just point at any site and get an editable clone.

- Event context: Feb Demo Day: How are you turning design into code? (with Baz) — 2026-02-04 — New York City
- Public talk page: https://nyc.aitinkerers.org/talks/rsvp_oSYfxCynLls

### [Why vibe coded apps look the same: Creating a unique design system](https://tokyo.aitinkerers.org/talks/rsvp_fZaz39otHlk)

As a UX Lead at Google working on AI Prototyping tools, I’ve observed that "vibe coded" apps naturally suffer from a "regression to the mean", where LLMs average out their training data, resulting in generic Tailwind clones. I will demo Design System Builder, a tool I built attempting solve this by letting developers customize branding and visuals and then generating semantic design tokens. I’ll walk through the internal workflow of how I use Gemini CLI and Claude Code to architect these constraints and inject them into the context window, to produce unique, scalable design systems.

- Event context: AI Tinkerers Ginza Meetup – January 15, 2026 — 2026-01-15 — Tokyo
- Public talk page: https://tokyo.aitinkerers.org/talks/rsvp_fZaz39otHlk

### [share of voice](https://prague.aitinkerers.org/talks/rsvp_ar9eJgdfvuY)

n8n/html app that fetches public ads data from facebook ads manager and runs various analylsis and comparisons on it using various ai practices

- Event context: AI Tinkerers Prague: Annual Christmas Meetup 2025 — 2025-12-16 — Prague
- Public talk page: https://prague.aitinkerers.org/talks/rsvp_ar9eJgdfvuY

### [Artifact Chat: Your AI Office Space](https://seattle.aitinkerers.org/talks/rsvp_X-VEuPD0ajY)

I'll demonstrate Artifact, a unified AI workspace that combines 30+ leading AI models (GPT-4o, Claude Opus 4, Gemini 2.5 Pro, and more) into a single collaborative platform with shared context. The live demo will showcase our innovative Canvas system for real-time content creation, seamless AI model switching during conversations, and team collaboration features that transform how organizations work with AI. I will also demonstrate code creation and live rendering capabilities along with newly integrated video generation and interactive UI charts and graphs for financial research and trip planning. I'll also demo our dynamic agent generation which enables users to customize outputs for specialized tasks.

- Event context: Summer on the Lake - August Tinkerers Meetup! (Demos, Food, Friends) — 2025-08-28 — Seattle
- Public talk page: https://seattle.aitinkerers.org/talks/rsvp_X-VEuPD0ajY

### [Reasoning traces in LangChainJS](https://boston.aitinkerers.org/talks/rsvp_ghXjZ5aNfAc)

I will show how to use langchainJS to interact with current reasoning models (GPT-5, Grok 4, Gemini-2.5 Pro) and how to handle their responses. Why are they different? Well, if you treat them like "normal" models you get some surprising behavior. Most obviously very slow responses. Less obvious, but also common they might stop their response midway, without obvious reason. The "trick" is to consider the reasoning trace. Both, when prompting and when when building UX. Unfortunately, langchain currently doesn't document how to do this well so, instead, I will dive into the code and show you instead ;) For this we will use a real world example: A private chat app that we use to unify conversations with major LLM providers. You can talk to multiple models in parallel within the same conversation, which is the perfect scenario to see different thinking vs non-thinking models in action.

- Event context: AI Tinkerers Boston: Langchain & Beyond Meetup — 2025-08-25 — Boston
- Public talk page: https://boston.aitinkerers.org/talks/rsvp_ghXjZ5aNfAc

### [From Chat to Action: Building Reliable AI Agents with Tool Orchestration](https://hong-kong.aitinkerers.org/talks/rsvp_5n3nkrEYh0E)

I’ll demo how I built an AI-native Sales CRM that goes beyond chat. The assistant doesn’t just respond, it can plan, call multiple tools, orchestrate actions in sequence to perform real CRM tasks that free salespeople from busy work, and provide unique insights to close more deals. After a brief live demo, I’ll walk through the technical implementation and underlying architecture: defining tool schemas, managing orchestrated multi-step workflows, and handling of tricky edge cases such as ambiguity (like multiple matching records) and ensuring idempotency when actions are repeated. The focus will be on practical architecture decisions like showing how a conversational interface can drive real database updates, pipeline management/insights, and interaction logging, all without relying on traditional menu-based UIs.

- Event context: AI Tinkerers - Hong Kong Meetup (August) - Meetup with Baidu PaddlePaddle — 2025-08-22 — Hong Kong
- Public talk page: https://hong-kong.aitinkerers.org/talks/rsvp_5n3nkrEYh0E

### [Streaming MCP Tools into React Components: Building Real-time Generative UI](https://sf.aitinkerers.org/talks/rsvp_8al-91M9ZUU)

In this talk, I’ll walk through how I built a real-time MCP demo using tambo to create a conversational interface for managing Linear projects using Linear MCP. Instead of returning plain text, the system turns MCP tool outputs into live React components—editable issue tables, project timelines, and real-time graphs. I’ll cover how I set up both client-side and server-side MCP connections, registered custom components with Zod schemas, and used useTamboComponentState to maintain context across interactions. The technical focus will be on how component props are streamed in real-time, how state is kept in sync between the AI and UI, and how components are linked to specific tools—so users can say things like “update that issue,” and the system understands exactly what to do.

- Event context: AI Tinkerers - Advanced MCP Showcase — 2025-06-19 — San Francisco
- Public talk page: https://sf.aitinkerers.org/talks/rsvp_8al-91M9ZUU

### [AI Patient Voice Simulator](https://seattle.aitinkerers.org/talks/rsvp_i7eeiSZT1Wo)

A voice to voice simulation of an Virtual AI patient using the Elevenlabs API. I will be demoing a project where I use the elevenlabs conversational agent to roleplay as a patient to practice diabetic patient consulting. This will be hosted on a nextjs front-end with a chatbot UI setup styled using shadcn components.

- Event context: AI Tinkerers Seattle - April Meetup — 2025-04-25 — Seattle
- Public talk page: https://seattle.aitinkerers.org/talks/rsvp_i7eeiSZT1Wo

### [🚀 From Idea to App: How AI Assistants Built This AI Chat App ⚡](https://zurich.aitinkerers.org/talks/rsvp_1UY7Dn9oPLM)

What if you could build an entire AI-powered web chat app without writing a single line of code yourself? That’s exactly what I did! Assistant Shell 🤖🐚 is a sleek, no-install AI chat app that lets you talk to every major AI Assistant -- OpenAI’s GPTs, Anthropic’s Claude, Google’s Gemini, even local models via Ollama, and even more. You just drop in your API keys, tweak your settings, and boom -- you’re chatting with AI on your terms. But here’s the real kicker: I built the whole thing using only AI Assistants. Every bit of code of Next.js, TypeScript, TailwindCSS was written with ChatGPT, Claude, Gemini, Copilot, Continue, and Cline. Furthermore, the app has no backend, no server storing your conversations, no other data collection -- just pure, client-side AI magic. Last but not least, this web app is also a PWA so you can "install" it with one click on any device!

- Event context: AI Tinkerers Zurich - February 6 — 2025-02-06 — Zürich
- Public talk page: https://zurich.aitinkerers.org/talks/rsvp_1UY7Dn9oPLM

### [Smart Document Router](https://boston.aitinkerers.org/talks/rsvp_79An2wSNYOU)

The Smart Document Router is an AI-powered document processing tool that connects directly to your Enterprise Resource Planning (ERP) system.

- Event context: AI Tinkerers Boston Meetup January 2025 — 2025-01-27 — Boston
- Public talk page: https://boston.aitinkerers.org/talks/rsvp_79An2wSNYOU

### [Splicing - Open-Source AI Copilot for Data Engineering](https://seattle.aitinkerers.org/talks/rsvp_wQPP49_cegE)

Splicing is a full-stack AI application that assists data engineers/data scientists in building customizable data pipelines without vendor lock-in.

- Event context: AI Tinkerers - Seattle - October 2024 Meetup — 2024-10-25 — Seattle
- Public talk page: https://seattle.aitinkerers.org/talks/rsvp_wQPP49_cegE

### [EcoLoop: a platform that uses advanced AI to help you evaluate new ideas easily and effectively](https://toronto.aitinkerers.org/talks/rsvp_WT4ZaQdSf5c)

- Chatbot Interaction: Effortlessly articulate problem-solution pairs with an intuitive chatbot interface. - Visualizations: Gain profound insights through graphical representations, maturity stage, and viability scores. - 3D-VR Integration: Immerse yourself in proposed solutions with realistic virtual reality experiences. - EcoLoop's intelligence is implemented using the Retrieval-Augment-Generator framework LangChain, which connects the Language Model to the extensive knowledge repository encoded in the vector database. -Technologies used: Pinecone (fast similarity search for vectorized data), LORA Model (generates the 3-d VR solution Web Scraper), Semantic Classifier (discern semantic meanings for idea categorization), Semantic Summarizer (summarize content based on its meaning Nextjs and TailWindCSS), and Flask (handles backend and endpoint creations, and runs the ML models)

- Event context: AI Tinkerers - Toronto - June 2024 Meetup — 2024-06-27 — Toronto
- Public talk page: https://toronto.aitinkerers.org/talks/rsvp_WT4ZaQdSf5c

### [Screenshot to Code](https://nyc.aitinkerers.org/talks/rsvp_03NTApYVdUE)

A simple tool that converts a screenshot to code (HTML/Tailwind CSS, or React or Bootstrap or Vue). It uses GPT-4 Vision to generate the code and DALL-E 3 to generate similar-looking images. You can now also enter a URL to clone a live website. Released it in November and it went super viral (has 35k+ stars on Github)

- Event context: AI Tinkerers NYC Feb 2024 Meetup — 2024-02-20 — New York City
- Public talk page: https://nyc.aitinkerers.org/talks/rsvp_03NTApYVdUE

## Related Technologies

- [Next](https://aitinkerers.org/technologies/next) ([Markdown](https://aitinkerers.org/technologies/next.md)) — 186 public demos
- [React](https://aitinkerers.org/technologies/react) ([Markdown](https://aitinkerers.org/technologies/react.md)) — 219 public demos
- [TypeScript](https://aitinkerers.org/technologies/typescript) ([Markdown](https://aitinkerers.org/technologies/typescript.md)) — 205 public demos
- [Vite](https://aitinkerers.org/technologies/vite) ([Markdown](https://aitinkerers.org/technologies/vite.md)) — 17 public demos
- [Claude Code](https://aitinkerers.org/technologies/claude-code) ([Markdown](https://aitinkerers.org/technologies/claude-code.md)) — 215 public demos
- [Claude API](https://aitinkerers.org/technologies/claude-api) ([Markdown](https://aitinkerers.org/technologies/claude-api.md)) — 20 public demos
- [Drizzle ORM](https://aitinkerers.org/technologies/drizzle-orm) ([Markdown](https://aitinkerers.org/technologies/drizzle-orm.md)) — 3 public demos
- [LangChain](https://aitinkerers.org/technologies/langchain) ([Markdown](https://aitinkerers.org/technologies/langchain.md)) — 445 public demos
- [OpenAI API](https://aitinkerers.org/technologies/openai-api) ([Markdown](https://aitinkerers.org/technologies/openai-api.md)) — 520 public demos
- [Python](https://aitinkerers.org/technologies/python) ([Markdown](https://aitinkerers.org/technologies/python.md)) — 662 public demos
- [React 19](https://aitinkerers.org/technologies/react-19) ([Markdown](https://aitinkerers.org/technologies/react-19.md)) — 6 public demos
- [Anthropic API](https://aitinkerers.org/technologies/anthropic-api) ([Markdown](https://aitinkerers.org/technologies/anthropic-api.md)) — 66 public demos
- [AudioWorklet](https://aitinkerers.org/technologies/audioworklet) ([Markdown](https://aitinkerers.org/technologies/audioworklet.md)) — 1 public demo
- [AWS CDK](https://aitinkerers.org/technologies/aws-cdk) ([Markdown](https://aitinkerers.org/technologies/aws-cdk.md)) — 3 public demos
- [AWS Lambda](https://aitinkerers.org/technologies/aws-lambda) ([Markdown](https://aitinkerers.org/technologies/aws-lambda.md)) — 14 public demos
- [AWS Lambda with isolated-vm](https://aitinkerers.org/technologies/aws-lambda-with-isolated-vm) ([Markdown](https://aitinkerers.org/technologies/aws-lambda-with-isolated-vm.md)) — 1 public demo
- [Browser](https://aitinkerers.org/technologies/browser) ([Markdown](https://aitinkerers.org/technologies/browser.md)) — 5 public demos
- [Claude](https://aitinkerers.org/technologies/claude) ([Markdown](https://aitinkerers.org/technologies/claude.md)) — 173 public demos