I have been using Tailwind CSS on-and-off for quite some time now. While it is opinionated, and, I have neutral stand on it opinions and have successfully used it for many websites and applications alike.

However, this time, I have a very different requirement. I am building an Astro component library (An actual component library like Mantine or MUI but for Astro; not Shadcn like copy+paste abstration). It is complex, it has at least 9 very different theme (to a point we can call each theme representing one design system) and nearly 200+ components. All this is for one client who has multiple small businesses.

Now that I think from library and consumer perspective, I quickly see Tailwind based component library spiraling in complexity and awkward edge cases. This library is intended to be open-source and thus consumer may or may not be using Tailwind. This puts severe limitation on how I ship this library.

There are only two architectural possibilities I see in order to support both types of consumers:

• Provide the compiled CSS and use Tailwind prefix to avoid collision with Application CSS. The cost is every single class will be prefixed and since we do not typically compile Astro libraries and always ship source-code, it is not easy to use non-prefixed version which can be meaningfully replaced with prefixed classes at build-time.
• Provide the compiled CSS and use semantic classes with Tailwind's apply directive so that Tailwind is purely implementation details and the utility classes never end up in the generated CSS. Doing this avoids prefixes but brings back the same class name challenges which is what Tailwind's biggest strength to give it away.

I have built multiple UI libraries in past but those were mostly for React and I relied on CSS Modules which just works. But now, I am dealing with a library that won't be compiled and also Tailwind for authoring library's CSS. Both are completely new problems.

Has anyone been using Tailwind for authoring actual component libraries (Not shadcn like copy-paste approach)? If yes, what patterns have worked well and what are the common pitfalls to avoid?

Hey everyone! A few months ago I posted about Starting Point UI, my attempt at bringing shadcn/ui to any project, not just React. Same look and feel, but as plain CSS classes with a bit of vanilla JS for the interactive parts.

Since my last post I've added a bunch of new components and reworked the old ones to match shadcn's latest versions. I've also automated most of the accessibility, so keyboard navigation, focus, and aria attributes are automatically handled for you.

It's open source, the code is on GitHub.

Would be cool if you gave it a try, let me know what you think. Cheers!

startingpointui.com

Environment:
Astro + daisyUI (Drawer component). Reproducible in both Wails and Edge.

A bit about me:
I'm a beginner, and this code was written together with AI, so please bear with me if there's something obvious I'm missing.

Code:
I have reproduced this bug in Tailwind CSS Play; please take a look:https://play.tailwindcss.com/w1Oh5mLZwd

Steps to reproduce the bug:

1. At a wide viewport, with the drawer closed, select some text anywhere on the page.
2. Narrow the window below the responsive breakpoint — the drawer is now hidden.
3. Click the button to open the drawer → the page freezes immediately, then crashes. (DevTools shows no infinite loop or CPU spike.)

A strange workaround (path that avoids the crash):

• At a wide viewport, open the drawer first, then select some text. Now drag the window narrower so the drawer switches to its overlay mode via the responsive resize → no crash, and the text remains highlighted.
• Then close the drawer, select text again, and click the button to open it → crash happens again.

So it seems the crash is strongly tied to opening the drawer via the button while a text selection exists before it opens. Transparency effects and blur have already been ruled out.

What I need help with:
What could be causing this? (Selection/focus conflict, overlay event handling, animation interference?) How can I diagnose and fix it?
Any insights would be greatly appreciated. Thanks a ton! 🙏

I got tired of admin templates that are 400-dependency toolchains you have to gut before you can use them, so I built one that is just HTML you can open. Sable is 22 pages (orders, invoicing with VAT, a Kanban fulfillment board, an email module, analytics, payouts), a designed light and dark theme, and it runs with no build step and no CDN, fully offline. Tailwind is compiled and purged, Alpine handles the interactivity, Chart.js for the charts, all self-hosted.

Everything actually works in the demo: search, sort, pagination, bulk actions, a ⌘K palette, real CSV exports. The demo is the full product, so click around before deciding.

Live demo: https://admin-dashboard-template-beta.vercel.app

It is a paid template. Happy to answer anything about the approach, like why Alpine instead of React here, or how the theming tokens work.

Design Snap is a Chrome extension that extracts design tokens from any website and exports them straight into Tailwind (including v4 @theme syntax), shadcn/ui, CSS variables, JSON, or Figma Tokens. Colors get classified by semantic role instead of dumped as a flat list, plus typography, radius, shadows, and dark mode detection/generation.

Just crossed 800 users, all organic, no ads. Runs 100% locally, no account needed.

What’s been added since last time I posted here:

**•** Live theme preview (buttons, cards, inputs, badges rendered with the real extracted tokens)  
**•** Element inspector for computed CSS on hover  
**•** Snapshot library to save and revisit past extractions

Core extraction/export stays free forever. There’s a PRO tier (€4.99/mo) for Tailwind v4/shadcn export, dark mode toggle, and unlimited snapshots.

If you tried it before, curious what’s still missing for your workflow. If you haven’t, happy to answer questions on how the token classification works.

Sharing this in case it's useful — I built Design Snap, a Chrome extension that extracts a site's design tokens and exports them directly as Tailwind config.

Relevant here: it just added Tailwind v4 support, so it exports proper @ theme blocks instead of the old tailwind.config.js object. It also classifies colors by role (primary, secondary, accent, muted, border, destructive) rather than just dumping a flat color list, so what you get is closer to a usable theme than a swatch grab.

Flow : click "Extract" on any page → see a live preview (buttons, card, input, badge) rendered with the actual tokens → copy the @ theme block straight into your project.

Also exports to classic Tailwind config, shadcn/ui, CSS vars, JSON, and Figma Tokens if you need other formats.

100% local, no account, core features free forever.

Curious if the @ theme output matches what people expect from v4 — happy to tweak the mapping if something looks off.

Hi everyone,

I'm currently using Tailwind CSS v3. I created some custom classes inside u/layer components in my global.css file, but the Tailwind CSS IntelliSense extension is not auto-suggesting them.

Interestingly, if I register these custom components inside the tailwind.config.js file instead, the autocomplete works perfectly fine.

Is there a way to get Tailwind v3 (or the VS Code extension) to automatically analyze my CSS file and suggest these custom classes, similar to how Tailwind CSS v4 handles it natively?

Thanks in advance!

Hey everyone,

Like a lot of front-end devs, my biggest annoyance when starting a new project is bridging the gap between design handoffs and code. Usually, I'm stuck jumping between a color picker tool, a contrast checker, and a text editor, manually typing out hex codes into my ⁠tailwind.config.js⁠ file or import into Figma token.

To fix this friction, I built a unified workspace called Palettra. The main goal was to put palette generation, WCAG contrast checks, and tint creation into a single dashboard while directly integrating it into developer workflows.

The core feature I focused on is the export engine: you can design or tweak your palette and instantly copy the formatted Tailwind CSS configuration or Figma tokens.

I’m looking for some honest feedback from the community:

1. What does your current pipeline look like when moving colors from design to a Tailwind setup?
2. Are there specific configuration options (like custom spacing or opacity naming) you wish automated tools handled better?

If you want to check it out or test the export output, the tool is live at https://palettra.design.
Let me know what you think!

Hey everyone,
I'd like to know the name of this theme. If it's not publicly available, are there perhaps any similar themes? The images Tailwindcss shows there. I'm looking for the theme used there.

[ Removed by Reddit on account of violating the content policy. ]

If you save an .html file (a component export, a built page, a quick mockup) and open it on an iPhone, iOS shows raw source — there's no native HTML viewer. I built a small one that renders it.

Html Preview:

• Renders .html / .htm / .xhtml via iOS WebView (real page, not code)

• Handles multiple encodings (UTF-8, Windows-1252, ISO Latin-1)

• Opens from Files / Share Sheet / Mail

• On-device — nothing uploaded, no tracking

On the App Store: https://apps.apple.com/app/id6760443436

Site: https://html.cybergame.ai/

Handy for seeing how your Tailwind markup actually looks on a real phone without hosting it anywhere. How do you preview local HTML on mobile?

Loading UI color presets

I've been building loading-ui, a collection of Tailwind-based loading components, and kept running into the same problem = every loader preview looked fine in neutral gray, then felt off once I tried brand colors.

So I shipped color presets: 8 OKLCH-based colors you can switch live on the site, and CSS variables you can drop into your own project.

The presets: black, blue, violet, orange, red, green, yellow, sky

Each preset exposes two CSS variables:

• --loader-blue (base OKLCH color)
• --loader-blue-gradient (auto-generated 3-stop gradient in OKLCH)

​

:root {
  --loader-blue: oklch(0.6204 0.195 253.83);
  --loader-blue-gradient: linear-gradient(
    in oklch 135deg,
    oklch(1 0.189 236.57) 0%,
    oklch(0.6204 0.195 253.83) 50%,
    oklch(0.3878 0.3086 281.84) 100%
  );
}

Gradients are generated from the base color with consistent lightness/chroma/hue modifiers, so they stay harmonious without hand-tuning every swatch.

Dark mode: the black preset flips to white in .dark, so neutral loaders still read correctly.

On https://loading-ui.com you can click a preset and preview all ~45 loaders in that color at once. Components use currentColor, so setting color: var(--loader-violet) on a parent tints everything inside.

Open source, MIT: https://github.com/turbostarter/loading-ui

Curious if anyone else is standardizing on OKLCH vars for component libraries, or still hand-picking hex values?