DEV Community

Cover image for 🎨 I built a Tailwind/NativeWind color palette generator with real-time mobile mockups
TW
TW

Posted on

🎨 I built a Tailwind/NativeWind color palette generator with real-time mobile mockups

#reactnative #tailwindcss #ui

As a React Native developer, I constantly found myself struggling with visualizing color palettes — especially when working with TailwindCSS and NativeWind for mobile UIs.

Picking a few hex codes from a palette site just wasn’t cutting it. I wanted a way to see how color choices actually looked in a real mobile app before committing.

So I built: 👉 ColorWind.dev

🔧 What is ColorWind?

ColorWind is a dev tool that lets you build, preview, and export custom color palettes for mobile apps — with real-time previews in mobile UI mockups.

Here’s what it offers:

✅ Real-Time Previews
Build themes visually instead of guessing hex codes. See your color changes reflected instantly on light/dark mobile UI mockups.

✅ Tailwind/NativeWind Support
Instantly export a valid tailwind.config.js or .ts file.

✅ No Login. No Setup.
Just open the app, start customizing, and download your theme config.

✅ Canvas Mode (like Figma).
Easily navigate mockups with zoom and pan controls

🖼️ Why Mobile Mockups?

Most color tools out there give you boxes, grids, or gradients. But mobile UI design is more than just pretty colors — it’s about how those colors feel in a real app.

With ColorWind, you get:

  • Buttons, headers, backgrounds, and cards previewed live
  • Light and dark toggle to test both modes instantly
  • A realistic way to build themes you’d actually ship

📦 Tailwind Config Export
Once you’re happy with your theme, hit Export to get a prebuilt config:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#...',
        background: '#...',
        text: '#...',
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

You can use this directly in TailwindCSS with NativeWind for React Native projects.


✨ Why I Built It
This started as a personal tool for my own workflow, but after sharing early previews with some dev friends, I realized:

“Wait… everyone struggles with color config in mobile too.”

So I polished it up and launched it as a free tool — no login, no paywall, just pure dev utility.

🚀 Try It Out
🔗 Visit ColorWind.dev

If you're a mobile dev who builds with TailwindCSS/NativeWind, I’d love to hear your thoughts!

Feel free to:

👉🏻 Try it
🫣 Break it
🤗 Suggest features
😄 Tell me what sucks

🙏 Thanks

Building this was a fun journey. If it helps even a few devs save time or design better, I’ll consider it a win.

If you enjoy it, consider sharing with your team or on Twitter/X.
Every little shoutout helps indie tools like this grow ❤️

Top comments (0)