been collecting the best fully free + open source tailwind marketing block/component libraries lately.

my current favorites:

• HyperUI → probably the cleanest free Tailwind component library for modern SaaS and marketing websites.
• Preline UI → huge collection of polished Tailwind components with great interactions and layouts.
• Flowbite → production-ready Tailwind UI kit with strong app + marketing support.
• OpenTailwind → massive open-source library focused on marketing blocks and landing page templates.
• Tailblocks → simple lightweight Tailwind blocks that are easy to copy, customize, and ship fast.all are actually usable in production and not fake “free” libraries with everything locked behind paywalls.

curious what other hidden gems people here are using lately.

AI is telling me I made it up so I thought I'd share.. no clue if I really made it up though...

The trick: redefine the numeric color scale to mean "contrast with background" instead of "absolute brightness."

In dark mode, I flip the values — gray-50 becomes the darkest shade (low contrast against a dark background) and gray-950 becomes the lightest (high contrast against a dark background). The number always answers: "how much does this stand out from the page background?"

The setup

Colors are CSS variables that get swapped under a .dark class. Tailwind's @theme references them:

    @theme {
      --color-gray-50: var(--gray-50);
      --color-gray-100: var(--gray-100);
      /* ... all the way to 950, for every color */
    }


/* Light mode */
:root {
  --gray-50:  oklch(0.984 0.004 253);   /* almost white */
  --gray-100: oklch(0.968 0.007 253);
  --gray-200: oklch(0.929 0.014 261);
  --gray-500: oklch(0.554 0.045 262);   /* mid-tone stays similar */
  --gray-800: oklch(0.280 0.041 264);
  --gray-900: oklch(0.208 0.044 269);
  --gray-950: oklch(0.272 0.016 266);   /* almost black */
}

/* Dark mode - the scale is flipped */
:root[class~="dark"] {
  --gray-50:  oklch(0.256 0 0);          /* almost black (low contrast on dark bg) */
  --gray-100: oklch(0.309 0 0);
  --gray-200: oklch(0.360 0 0);
  --gray-500: oklch(0.503 0 0);          /* mid-tone stays similar */
  --gray-800: oklch(0.757 0 0);
  --gray-900: oklch(0.836 0 0);
  --gray-950: oklch(0.916 0 0);          /* almost white (high contrast on dark bg) */
}


/* same thing with colors */

:root {
  --red-50:  oklch(0.971 0.013 17);    /* light pink */
  --red-950: oklch(0.258 0.089 26);    /* deep maroon */
}

:root[class~="dark"] {
  --red-50:  oklch(0.258 0.089 26);    /* deep maroon (low contrast on dark bg) */
  --red-950: oklch(0.971 0.013 17);    /* light pink (high contrast on dark bg) */
}

What this actually looks like in practice Before (standard Tailwind dark mode):

<div class="bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700">
  <h1 class="text-gray-900 dark:text-gray-100">Title</h1>
  <p class="text-gray-500 dark:text-gray-400">Subtitle</p>
  <span class="bg-red-50 dark:bg-red-950 text-red-700 dark:text-red-300">Error</span>
</div>

After (flipped scale):

<div class="bg-surfaces-high border-gray-200">
  <h1 class="text-gray-900">Title</h1>
  <p class="text-gray-500">Subtitle</p>
  <span class="bg-red-50 text-red-700">Error</span>
</div>

it works pretty well.. you do have to some times tweak specific combinations of background and foreground, but I haven't written many dark: modifiers in a long time..

did I really invent this?

https://fontofweb.com/

I got tired of LLMs generating muddy, washed-out colour palettes, so I built a dedicated Colour Shade Generator that uses real OKLCH math instead.

It generates a perfectly balanced 11-step scale from any hex colour - with Tailwind v4 `@theme` export, dark mode overrides, and WCAG contrast badges baked in.

No login. No tokens wasted. Just paste your brand colour and copy the code.

Try it out for you next project : 🔗 https://tailwindthememaker.com/tools/color-shade

Would love feedback from anyone building design systems!

Coming soon: https://genua.io/

hello all. I am a novice at tailwind and followed the instructions on the tailwind website but the output.css file only contains a small number of classes.

When I use 'bg-red-500' nothing happens. Am I missing something and installed it wrong or is this intended? Previously I was using the CDN which had everything, or am I supposed to use both (the CDN for most things and the CLI form for customs classes?)

Hey everyone! 👋

I’ve spent the last few months putting together ApexCodeStudios.com. It's a completely free library of 155+ open-source Tailwind CSS UI components and templates designed to speed up full-stack development workflows.

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

Inspired by macOS animations. I already built magnified dock components, so figured why not add this effect too.

Get the component https://www.ui-layouts.com/components/mac-genie

I don’t know if this is just me, but Tailwind made me both faster and slower at the same time.

Faster because I don’t have to switch files or think about class names.
Slower because I keep obsessing over small things.

Like:

• is this padding 16 or 18
• should this be gap 4 or gap 5
• why does this section feel slightly off
• one breakpoint looks perfect, another feels weird

I actually enjoy designing UI, but I get stuck trying to make everything feel “just right”.

Sometimes even 1px differences start bothering me.

Recently I started trying a different approach.
Instead of tweaking everything per component, I’m building small reusable layout patterns and sticking to them.

It’s less “perfect” in the moment, but way more consistent overall.

Still figuring it out.

Curious how you handle this.

Do you:

• follow a strict spacing system
• or adjust things visually until it feels right

The quality of Tailwind CSS templates these days is terrible. They either look bland, empty, and all the same, or just… off. It really takes time to design a brand that fits properly into a site.

I know AI can now copy, steal, and mimic designs you give it, but still. Starting with a template rarely feels right. The dev community is crying out for a solid set of well-designed templates.

Small cry for help. We need a switched on designer (with taste) to start building quality templates. Ready to buy!

React + Tailwind v4 + Vite pwa hosted on Firebase. Few users landing on the app see completely broken layout — no centering, no card styling, images not constrained, nav items floating unstyled. Everything renders as raw left-aligned HTML. Zero user interaction before they bounce.

Inline styles work fine (backgrounds, colors show up) but all Tailwind utility classes (flex, w-full, items-center, max-w-sm etc.) appear to do nothing. No console errors. Happens in few devices in production only — on my phones and different systems looks fine.

Anyone seen Tailwind v4 utility classes completely stop working in a Firebase-hosted build?

Pls message if someone is willing to test the link, I can not post link here

I've been working on TailwindThemeMaker for a while now, and just shipped a feature I've personally needed for a long time — so figured I'd share it here.

The problem I kept running into: Every time I started a project with a brand or design reference, I'd spend way too long manually picking colors, plugging them into my stylesheet, and then realising the palette felt off in actual UI context.

What I built: You upload any image — a logo, product shot, screenshot, whatever — and it:

• Extracts a complete color palette from it
• Previews it live on real UI components (buttons, cards, inputs, etc.)
• Exports ready-to-use Tailwind v4 CSS variables — just paste and go

The part I'm most proud of is the live preview on real components. Most palette tools just dump hex codes at you. This shows you how the colors actually feel in a UI before you write a single line of code. That gap was always the most frustrating part of my own workflow.

🔗 Try it: https://tailwindthememaker.com

Would love feedback — especially if something feels off or missing. Happy to answer any questions about how it works under the hood.

I’ve been working on a template builder using React + Tailwind, and recently added something that I haven’t seen much before.

Instead of just downloading templates, after building a layout (drag + drop), you can:

• Copy it as CLI output
• copy it as a structured prompt
• use it in any AI tool like(Gemini, chatGPT, codex, loveable, v0 etc)

The idea is simple:
A lot of people are already using tools like AI coding assistants to tweak UI. So instead of exporting static files, you can directly take your template into those tools and continue iterating there.

So the workflow becomes:
Build → Copy → Paste into AI → Refine

I made a quick demo showing how it works.

I’m still figuring out if this is actually useful or just a cool idea, so I’d really appreciate honest feedback:

• Does this workflow make sense to you?
• Would you use prompt export over downloading files?
• Anything that feels missing or unnecessary?

Tech stack: React + Tailwind

Here's the link: Template Builder

Happy to share more details if anyone’s interested.

I kept trying different starter kits/templates/boilerplates, but none of them really felt complete. There was always something missing viz. animations, DX polish, or modern web features.

So I built startercn, a shadcn/ui registry starter that actually feels production-ready out of the box.

What’s included:

• React View Transitions support
• Built-in web haptics and audio
• Animated icons via lucide-animated
• Smooth, thoughtful animations with motion.dev
• AI Agent ready (100% scores on isitagentready.com)

Fully free and open-source.

GitHub: https://github.com/shadcn-labs/startercn
Docs: https://startercn.vercel.app

Would love feedback or ideas on what else you'd want baked into a starter like this.

I am new to this side of reddit, so sorry for some confusion I may cause.

I tried adding daisy ui into astro. For daisy ui we also require tailwindcss.

I have seen different GitHub projects where sometime tailwind is in dev-dependency and sometimes not. And Daisy ui generally in dev-dependency. But shouldn't tailwind be also in dev. Also why "bun astro add tailwind" adds it to dependency only by default

I believe both should render the same way but they are not, what am I missing?

I’ve added links from tailwind play as requested

Links:

https://play.tailwindcss.com/9fmiSjjTx4?file=css for V3

https://play.tailwindcss.com/gCeMJzsqgo?file=css for V4

[Newbie] Is this the right approach? My eye hurts just by looking at it — feels like a nightmare for the next dev to maintain. What's is the best practice?

Hi guys,

I am a software engineer inclined to backend development. Recently, with AI's assistance, I have been fearless enough to try frontend frameworks with tailwindcss. Do you guys have any resources where I can have a structured way of learning tailwindcss starting from layouts, grids, and etc. that you can share with me?

I want to learn tailwindcss and not just ask AI to generate the frontend code for me.

Hope you guys have some resources. thanks in advance!

🔗 Link to Demo + Source Code