Login

r/tailwindcss

▲ 56 r/tailwindcss+5 crossposts

Tailwind MCP that gives coding agents actual design taste

TL;DR: https://windframe.dev/mcp

Hi everyone 👋

I’ve been working on a Tailwind-native MCP that gives coding agents better design context when generating  interfaces.

A lot of AI-generated UI still feels inconsistent because the agent has no real sense of design systems, spacing, typography, or visual structure. It can write Tailwind, but it often lacks the taste and context needed to make the result feel properly designed.

So I built the Windframe MCP around that idea.

It gives coding agents access to curated Tailwind-native styles, design tokens, and styleguides inspired by products like Linear, Notion, and other companies that invest heavily in their design systems.

The difference in output quality has been really impressive. The generated interfaces feel polished and visually cohesive, not like a random collection of Tailwind components.

I’ll keep adding new design styles to the MCP as well, so the library will continue to grow over time.

Give it a try here https://windframe.dev/mcp

Would love any thoughts or feedback :)

u/Speedware01 — 1 day ago
▲ 14 r/tailwindcss+1 crossposts

I built HTML/CSS, CSS, Bootstrap to Tailwind converters

Hey everyone,

I made a few simple tools that help convert existing code to Tailwind. They're support preview, fullscreen, really complex sources. Also they have responsive support, so you can shrink your side window and use them in parallel. They're completely free, enjoy!

HTML/CSS to Tailwind:
https://tailfind.org/html-css-to-tailwind

CSS to Tailwind:
https://tailfind.org/css-to-tailwind

Bootstrap to Tailwind:
https://tailfind.org/bootstrap-to-tailwind

Now I want to add output configuration, like apply prefixes, units (px/rem), etc..

Would love to hear your feedback or suggestions for improvement.

u/akopian25 — 1 day ago
▲ 12 r/tailwindcss

I recently added 200+ Free Premium Tailwind CSS UI Components (No Sign-up Required)

Hey everyone! 👋

I recently added 200+ Free Tailwind CSS UI Components apexcodestudios.com

Everything is free to use for personal and commercial projects, and I structured the code to be as clean and drop-in ready as possible.

I’d love for you to check it out and let me know what components you'd like to see added next!

👉 Check it out here: ApexCodeStudios.com

reddit.com
u/themashabrand — 2 days ago
▲ 12 r/tailwindcss

Built a Neon styled futuristic React UI library using Tailwind CSS

Hey everyone,

I built a react UI library using Tailwind CSS called NeonBlade UI.

NeonBlade UI is built for providing futuristic cyberpunk style ready to use UI components which are highly customizable and can be installed directly into your project using CLI.

The only dependency is Tailwind CSS for using the lib.

I recently made the lib open source. Would love any feedback.

Website: https://neonbladeui.neuronrush.com/

Repo: https://github.com/vprix21/neonblade-ui

reddit.com
u/Short-Opportunity537 — 4 days ago
▲ 22 r/tailwindcss+2 crossposts

Gerçek React kodunuzu düzenleyen bir Visual Editor geliştiriyorum

Merhaba

Üzerinde çalıştığım bir projeyi sizlerle paylaşmak istiyorum. Gerçek React/Vite/Tailwind projelerinin doğrudan kodunu düzenleyen yapay zeka destekli bir Web Builder geliştirdim.

Neler mümkün ?

- Yeni dosyalar oluşturabilir mevcut kodları düzenleyebilirsiniz.Eklediğiniz yeni kodlar da editör üzerinden düzenlenebilir.

- Yapay zeka desteği sınırlı olsada var.Vibe coding yapabilirsiniz.Yapay zekayı dahada geliştirmeyi hedefliyorum

- Gerçek Nodejs ortamında çalışıyor.Packages ile herhangi bir kurulum yapılabilinir veya yapay zekanın kurduğu paketleri görebilirsiniz.

-Console kısmı ile preview modda logları görebilirsiniz.

- Stil değişkenleri oluşturabilir kodunuzda kullanabilirsiniz.

Henüz tam bir projeyi içe aktarmak mümkün değil gelecekteki hedefim bu şimdilik sıfırdan yeni dosyalar oluşturup kod düzenlenebilir.

Benim için çok deneysel bir proje ama Beta olarak yayınlamak istedim.

Yapay zeka desteğini arttıracağım.Bu süreçte geri bildirim vererek yardımcı olmak isteyenler olursa tanışmayı çok isterim, denemeniz için hesaplarınıza ek yapay zeka krediside tanımlayacağım.

Bu linkten kayıt olup ücretsiz deneyebilirsiniz:

https://visualwizard.app/

u/tokmako — 7 days ago
▲ 1 r/tailwindcss+3 crossposts

Open Source Contribution: UI component library

Hey everyone

I have built a small component library with mostly AI like cursor, codex and claude. If anyone would like to brainstorm ideas or contribute to the project can find the details below

Hosted link - https://zentauri-ui.vercel.app

GitHub - https://github.com/ShubhamTiwari909/zentauri-ui

npm - https://www.npmjs.com/package/@zentauri-ui/zentauri-components

Tech stack -

React + Next JS + Typescript + Tailwind + Framer Motion + Rechart (It's a monorepo where the library is inside the packages and the previous site is inside apps, helps in maintain both package and preview site under a single repo)

Contacts

Email - shubhmtiwri00@gmail.com

Linkedin - https://www.linkedin.com/in/shubham-tiwari-b7544b193

reddit.com
u/Much_Confection_2668 — 6 days ago
▲ 8 r/tailwindcss+3 crossposts

Yesterday was 1 month once I started my chrome extension for tailwind, and I got first payment

I'm a full-stack developer with 10+ years of experience. I use Angular on the frontend. I faced an issue that I experience in my everyday routine, even when I have powerful tools like Codex.

Refactoring old UI to a new frontend was painful for me. I can vibe-code complex business logic, but I can't pull markup pixel-perfect into a new codebase in seconds. Put screenshots to the Codex and have 80% confidence output + time for editing it - this is the bottleneck for me.

I built a Chrome extension that converts any interface into plain Tailwind HTML. It began as my personal tool, which I use to pull plain Tailwind into a new codebase. Then it turned out that it's not that simple: the web has a lot of markup cases, pseudo-elements, complex gradients, SVGs, authored styling priorities, etc.

It turned out that I built something big, and I wanted to share my pain and solution with you. Also, the inspiration that today it's possible to build something big in one month. Eventually, people will solve their pain as you solve yours.

Few insights about my extension:
- 95% code wrote AI
- 700+ commits created
- 40~ commits daily
- 400+ regression tests
- Developed in 1 month
- Automated self-learning
- Automated regression testing
- Automated parallelism for scheduled testing/learning
- Keeps improving every day
- First buy from guy I don't know, but feel thankful for him very much!

What the purpose:
- Refactor legacy UI without changing it appearance
- Pull any good UI element from any website, or even whole website
- Use this as the entry point for your AI - agents are understanding Tailwind better than screenshots
- Convert any AI output with inline styles, dirty code to plain Tailwind
- Customer wants like in that WOW website - got it, pull and paste to your project

Now I can pull whole Github page and convert it to Tailwind html in seconds, which is not Tailwind based and obfuscated.

https://reddit.com/link/1tc8fni/video/5l2aez94ay0h1/player

reddit.com
u/akopian25 — 7 days ago
▲ 0 r/tailwindcss

Ran Deslint (v0.9.0, just updated) on shadcn-ui/ui — caught 999 design-system issues and wiped 61.6 hours of AI debt

Most linting tools catch syntax or basic patterns, but they miss the design-system drift that AI keeps injecting: arbitrary Tailwind values, token mismatches, broken dark-mode coverage, inconsistent spacing, missing a11y, and now even backend-safety slips (hardcoded secrets, SQL injection patterns, etc.).

Deslint is the narrow deterministic AST layer built exactly for this. It runs inside the Cursor/Claude agent loop (zero false positives, zero egress) and at the merge gate.

Fresh scan on shadcn-ui/ui (3,110 files):

• 999 issues found

• 61.6 hours of design debt removed

• Score 92 → 96

• Warnings 2,477 → 1,378

• Auto-fix touched 554 files

Just dropped v0.9.0 with 62 rules total (including the new backend-safety ones).

One-command MCP install if you want it blocking bad patterns before the file is written:

npx @deslint/mcp install

Full details + live scan video at deslint.com (still only 67 weekly installs — very early).

Anyone running AI-generated React/Tailwind in a real team: does this hit the exact pain you’re feeling, or is the “inside the agent loop” part overkill?

reddit.com
u/jaydrao215 — 8 days ago
▲ 12 r/tailwindcss+1 crossposts

Since Tailwind Formatter is abandoned, I built a replacement for JetBrains IDEs

Since Tailwind Formatter for JetBrains IDEs is no longer maintained, I built a replacement:

Trier – Tailwind CSS Class Sorter

Unlike formatter-based approaches, Trier only sorts Tailwind classes without handing the whole file to Prettier. That means your existing IDE formatting workflow stays untouched - indentation, wrapping, quotes, semicolons, and other unrelated formatting remain exactly as-is.

It uses the official Tailwind Labs sorter from prettier-plugin-tailwindcss.

Main features:

  • sort classes in the current editor or selected ranges
  • sort on save or reformat code
  • project view actions for files and folders
  • dry-run previews with diffs before applying changes
  • selective apply for bulk operations
  • configurable custom attributes/functions (cn, clsx, etc.)
  • support for HTML, JSX/TSX, Vue, CSS/SCSS @apply

It also ships with its own bundled runtime, so projects do not need local prettier dependencies just to sort Tailwind classes.

Built mainly for people who want consistent Tailwind ordering in JetBrains IDEs without giving up native IDE formatting behavior.

Would love feedback, edge cases, or feature requests 🙂

reddit.com
u/kulchytskyi — 7 days ago
▲ 0 r/tailwindcss+1 crossposts

Got tired of writing hover:, group: repeatedly in Tailwind, so I made this

I kept ending up with Tailwind class strings that looked like this:

className="px-4 py-2 rounded hover:bg-blue-500 hover:text-white hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none active:scale-95"

After doing this repeatedly across components, I made a tiny utility called tw-variant to group variant prefixes automatically.

Example:

import { tv } from "tw-variant"

const buttonStyles = tv({
  base: "px-4 py-2 rounded font-medium transition-all",
  hover: "bg-blue-500 text-white shadow-lg",
  focus: "ring-2 ring-offset-2 outline-none",
  active: "scale-95",
  dark: "bg-gray-900 text-white"
})

Generated output:

"px-4 py-2 rounded font-medium transition-all hover:bg-blue-500 hover:text-white hover:shadow-lg focus:ring-2 focus:ring-offset-2 focus:outline-none active:scale-95 dark:bg-gray-900 dark:text-white"

Why I made it:

  • reduces repeated hover: / focus: / dark: prefixes
  • keeps Tailwind class strings easier to read
  • works with any Tailwind variant
  • tiny + zero dependencies
  • full TypeScript support

Works nicely alongside clsx, cn, or tailwind-merge.

import clsx from "clsx"

className={clsx(
  tv({
    hover: "shadow-lg",
    focus: "ring-2",
    dark: "bg-gray-900"
  }),
  isDisabled && "opacity-50"
)}

Install:

npm install tw-variant

Github: https://github.com/kushalxcoder/tw-variant
NPM: https://www.npmjs.com/package/tw-variant

Would genuinely love feedback/suggestions/improvements.

u/Electronic-Stick7492 — 10 days ago
▲ 6 r/tailwindcss+2 crossposts

Hi everyone! 👋

I’m a developer with a big passion for two things: programming and Call of Duty: Warzone.

In my free time, I’ve been working on a project called WZHub, and I’m currently looking for a Frontend Developer who would like to join me on this journey.

⚠️ Important note: this is a passion project (no payment). It’s built by a Warzone nerd for other players. The goal is to have fun, experiment with modern technologies, build something cool, and improve our portfolios. No pressure, no strict deadlines — just a chill, collaborative environment.

🎯 What is WZHub?

The idea is to create a central hub for the Warzone community, where players can:

  • Create and manage Organizations and Teams (invites, rosters, roles)
  • Join and organize Tournaments
  • Track competitive events with a clear calendar (long-term vision)
  • View real-time leaderboards powered by WebSockets

🛠 Current Status & Tech Stack

The backend is already well underway:

  • Backend: Node.js, MongoDB, relational DBs, Redis (for real-time leaderboards), structured REST APIs for Orgs, Teams, and Tournaments
  • Frontend: Next.js / React (basic structure already set up)
  • UI/UX: early mockups and designs for both desktop and mobile
  • Repo: organized on GitHub with separate workspaces (shared types, frontend, backend)

👤 Who am I looking for?

  • Comfortable with React / Next.js
  • Ideally a Warzone player (or at least familiar with its mechanics, tournaments, stats, etc.)
  • Interested in taking ownership of the frontend/UI and turning APIs into a great user experience

I’m still improving my UI/UX skills, so the current design is quite basic (mostly generated with design tools + some custom CSS). That’s exactly why I’m looking for someone stronger on the frontend side.

If this sounds interesting, if you want to experiment in a collaborative environment, or just take a look at the project and chat about it, feel free to DM me or leave a comment!

See you on Warzone (or on GitHub)! 🎮💻

reddit.com
u/Normal_Ad_7601 — 9 days ago
▲ 1 r/tailwindcss+5 crossposts

My extension can pull any website to plain tailwind css

[SELF-PROMOTION]

I built Tailfind, a Chrome extension for developers who work with Tailwind.

At first, I built it for personal use. I found it very useful, especially when developing new pages based on references from other interfaces. The main pain point it solves is reducing the manual work needed to recreate UI patterns. I decided to move forward and share it with other developers. I built Tailfind using Codex and managed to create an automated flow that successfully learned how to parse elements and generate clean, plain Tailwind output.

The idea is simple:
When you find a useful UI pattern on a real page, Tailfind lets you inspect the element, capture the right fragment, and convert it into plain Tailwind-ready HTML.

- No rebuilding from a blank file.
- No manually copying styles one by one.
- Just select, copy, paste, and keep moving.

It’s especially useful when prototyping, rebuilding existing interfaces, or turning live UI references into a starting point for Angular, React, Vue, or Svelte projects. Tailfind can also open the generated HTML directly in Tailwind Play, so you can tweak the result before bringing it into your codebase.

I’m currently refining the extension and would love feedback from developers who use Tailwind in real projects.

Chrome Web Store:
https://chromewebstore.google.com/detail/tailfind/famibopnbenoegknengohifmnjnkhohh

Website:
https://tailfind.org

Full Website capture GitHub page from my extension:
https://play.tailwindcss.com/XiZtXbLn9W

u/akopian25 — 11 days ago
▲ 32 r/tailwindcss+13 crossposts

I built a visual frontend asset library so I can stop losing my own UI snippets

As a web developer, I often build or collect small frontend assets that are useful later: buttons, gradients, loaders, hover effects, CTAs, footers, bento grids, layout fragments and product UI patterns.

The problem is that these assets usually end up scattered across old projects, screenshots, notes, CodePens, local folders or random files. When I need one, I know I already made something similar, but finding it takes too long.

So I built UI IP Toolkit: a static visual catalog for fast access to my copy-ready frontend assets.

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

What it is

UI IP Toolkit is a public, static frontend asset library. It is designed to be browsed visually, not as a package install.

It includes sections for:

  • Buttons and interaction states
  • Gradients and color systems
  • Loading patterns
  • Text effects
  • Hover treatments
  • Glass surfaces
  • CTAs and pricing blocks
  • Footers
  • Bento grids
  • Navigation patterns
  • 404 and recovery pages
  • Product UI patterns
  • Layout fragments and reusable CSS utilities

Every card is meant to be practical: open the site, scan visually, copy the snippet, adapt it, and move on.

Why I made it static

I wanted the toolkit to be simple, fast and easy to publish:

  • No backend
  • No runtime framework dependency
  • No account required
  • No build step needed for browsing
  • Self-hosted fonts and assets
  • Deployed as a static site on Vercel

The goal was not to create a huge npm package or a rigid design system. I wanted a personal working library that feels visual and fast enough to use during real frontend work.

The main use case

When I am building a new page or feature, I can open the toolkit and quickly find a starting point:

  • Need a loader? Go to Loading States.
  • Need a CTA? Open CTA Blocks or Purchase CTAs.
  • Need a footer? Open Footer Systems.
  • Need a visual layout idea? Open Bento Systems.
  • Need a small CSS utility? Open the utilities section.

It is basically a visual memory layer for reusable frontend work.

Tech stack

The project is intentionally simple:

  • HTML
  • CSS
  • Vanilla JavaScript
  • Local fonts
  • Local media assets
  • Vercel static hosting

The repository is public here:

https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

The live version is here:

https://ui-ip-toolkit.vercel.app/

What I learned

The biggest improvement was not adding more components. It was making the catalog easier to navigate.

Once the toolkit had many sections, a long top nav became useless. I replaced it with a compact section menu grouped by category. That made the site feel much more like a real working tool instead of a long landing page.

I also learned that previews matter a lot. If every card looks too similar, the library feels bigger than it is useful. So I spent time making the previews more varied and more realistic while keeping the site lightweight.

Feedback welcome

I am sharing this because I think other frontend developers might have the same problem: useful assets scattered everywhere, but no quick visual way to reuse them.

Would you use a personal visual asset catalog like this in your own workflow? And what sections would you add next?

Live site: https://ui-ip-toolkit.vercel.app/ GitHub: https://github.com/ikerperez12/UI-IP-Toolkit-v4.0

u/Time-Willingness-360 — 11 days ago
▲ 12 r/tailwindcss

Tailwind CSS v4 in production - honest experience after 2 years of daily use

Just finished a full rebuild of my personal site using Tailwind v4 and Next.js 16. Been using Tailwind almost every day for over two years so I went pretty deep this time.

What actually surprised me:

The new engine is genuinely faster. Full builds up to 5x, incremental builds feel instant. You actually feel it during development.

Container queries are now built into core with no plugin needed. In v3 you had to add the official plugin. Small thing but it is cleaner.

The class string problem is still very real. Complex components still end up with strings that are painful to read and maintain. I do not think this ever fully goes away.

One thing I am still figuring out: I use `u/apply` heavily for repeated patterns but the Tailwind team now recommends moving away from it toward CSS variables in v4. Have not fully made that switch yet.

I landed on shadcn plus my own component layer. Best balance I have found so far.

Curious how others are handling this in bigger projects. Full inline classes, CSS layers, utility libraries? What actually works at scale.

reddit.com
u/shubhradev — 14 days ago
▲ 2 r/tailwindcss+1 crossposts

[Free Template] Portfolio with Next.js 16 & Tailwind CSS v4 – Featuring an Automated PDF Resume Generator (Python/WeasyPrint)

Hey everyone!

I just finished building my personal portfolio using the latest stack (Next.js 16, React, and Tailwind CSS v4), and I decided to open-source it as a template for anyone looking for a modern starter.

I wanted to solve the "manual resume update" problem, so I integrated a Python script (WeasyPrint) that automatically generates a PDF version of my CV during the build process on Vercel/Netlify. No more manual exports!

✨ Key Features:

  • Latest Stack: Built with Next.js 16 (App Router) and Tailwind CSS v4.
  • 📄 Automated PDF Resume: Generates your latest CV automatically via a Python script during deployment.
  • 🌗 Dark/Light Mode: OS preference detection with zero-flash persistence.
  • 🧊 3D & 2D Galleries: Integrated Sketchfab 3D models and lightbox artwork gallery.
  • ⚡ Performance: Architected for ultra-fast performance and SEO.
  • ☁️ Deployment-Ready: Pre-configured vercel.json and netlify.toml included.

🔗 Links:

Feel free to use it, fork it, or give it a star if you find it helpful! I’m open to any feedback or questions regarding the "Vibe Coding" architecture or the PDF generation setup.

Cheers! 🍻

reddit.com
u/Hot-Pea4514 — 12 days ago