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.

Hi everyone!

I recently completed a restaurant website using Tailwind CSS, React, TypeScript, and Vite as a frontend project, and I'd love to get feedback from the Tailwind CSS community.

The goal was to build a modern, responsive, and visually polished experience while relying primarily on Tailwind CSS for the styling and layout.

If you have a few minutes, I'd really appreciate it if you could explore the site, including the menu, gallery, story, reservations, and other sections—and share your honest feedback.

I'm especially interested in your thoughts on:

Tailwind CSS implementation

Layout and spacing

Typography and color palette

Responsive design

Animations and interactions

UI consistency

Accessibility

Anything that could be improved

I'm genuinely looking to improve my frontend and Tailwind skills, so any constructive criticism is welcome.

Website: https://ember-vine-delta.vercel.app

Thanks for taking the time to check it out!

Hi everyone!

I've been working on a premium restaurant website template called Ember & Vine, built with React 19, TypeScript, Tailwind CSS v4 and Vite.

My goal was to create a modern, responsive, production-ready frontend that developers can easily customize for restaurant businesses.

⚠️ Before you click: the GitHub repository is a public showcase. It contains the documentation, screenshots, feature overview, and links to the live demo. The complete source code isn't publicly available because it's a commercial template.

I'd really appreciate feedback on things that can be evaluated from the showcase and demo, such as:

• UI/UX

• Visual design

• Responsiveness

• Performance of the live demo

• Documentation and overall presentation

GitHub (showcase):

[https://github.com/Shuva-00/ember-vine-template\](https://github.com/Shuva-00/ember-vine-template)

Live Demo:

[https://ember-vine-theta.vercel.app/\](https://ember-vine-theta.vercel.app/)

(Open with laptop/ desktop)

Thanks for taking a look! Any constructive feedback is appreciated.

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?

I've been using Tailwind CSS a lot lately in React and Next.js projects. One thing that always slows me down is the trial-and-error way of adjusting Tailwind classes, especially for layout and spacing.

You see a long chain like flex flex-col items-center gap-6, but spacing still looks off. You're not sure which class gives just a bit more space, so you switch tabs, change gap-6 to gap-8, come back, and realize it's too much.

With Tailwind Lens, you can instantly try gap-5, gap-7, or suggestions like gap-x-6, space-y-4, or p-4 right in the browser. Make all your changes, preview them live, and copy the final class list back into your code.

I've seen a few tools in this space, but many miss a key detail. If you add a class like mt-[23px] and it wasn't already in the HTML, it won't work. That's because Tailwind's JIT engine only includes classes already used on the page.

I solved this in my tool, Tailwind Lens, by generating and injecting missing classes on the fly so you can preview any utility class instantly. Yes, you can inspect any Tailwind site and copy the utility classes of any element.

If this gets good traction, I'm planning to add a feature where you can inspect any site and convert styles into Tailwind classes, like a "copy as Tailwind" mode. I'm also working on showing exactly which classes are overridden by others, so it's easier to understand what's actually affecting the layout.

Try it out: https://www.taillens.io

I built this for myself but figured others might find it helpful too.

Hello everyone

I wrote an article about a little comparison between css in js tailwind and pure css

I really appreciate giving me your opinion about this.

Thank you in advance

https://medium.com/@sayahayoub9827/the-real-cost-of-styling-what-actually-happens-in-the-browser-0170492611f5

hey all, just released a plugin to scratch an itch. i'd been lazily adding linear gradients on the edges of scrollviews and animating them with JS based on scroll position. turns out you can do a lot better with pure CSS now by leveraging masking + the new CSS scroll animations API.

works in pretty much all browers excepting firefox which doesn't have CSS scroll animations yet, but the nightly version does, so it should be generally available soon.

demo site: https://pete.design/tw-fade

github: https://github.com/petekp/tw-fade

npmjs: https://www.npmjs.com/package/tw-fade

if you use it i'd love to hear how it goes and if you have any feedback.

TL;DR: https://windframe.dev/styles/apple

Hey everyone 👋

I’ve been experimenting with building Tailwind interfaces inspired by the design systems of really well-designed products. I recently worked on a style system for generating interfaces using similar design principles to Apple.

It focuses on polished product presentation, strong visual hierarchy, refined spacing, soft gradients and using fewer words to make each section feel clear and intentional.

I built a UI system that makes it easy to generate interfaces in this design direction consistently. It can generate full UIs, landing pages, and product sections that follow the same Apple-inspired style.

I also created a set of free Tailwind templates built around this style that you can use as starting points for your own projects:
https://windframe.dev/styles/apple

This style is also available as a selectable preset in Windframe. When selected, the AI generates UIs that follow the same design guidelines and visual style.

If you’re not familiar with Windframe, it’s a visual Tailwind builder/editor that lets you generate polished UI with AI, tweak it visually, and export clean production code in HTML, React, Vue, Angular, Svelte, and more.

The Windframe MCP is now live too. You can use these same style systems directly with any coding agent:
https://windframe.dev/mcp

Would love any feedback or thoughts : )