Hey there,
I'm thrilled to announce a project that's been in the works - Rocketicons! This project has been a collaborative effort with a talented friend of mine.
Our journey with Rocketicons started when we encountered the challenges of maintaining separate codebases for web and mobile platforms while developing a solution for sharing expenses via PIX, a Brazilian instant payment method. The duplication headaches were real, causing more inefficiencies than we cared to count. That's when we decided it was time for a change.
Enter React, React Native, and Expo. By unifying our development stack, we streamlined our workflow considerably. Yet, one crucial piece was missing: a comprehensive library for essential tasks like icons and components. As we delved further into our development journey, we realized there were more gaps to fill, including robust boilerplates and other essential necessities.
And thus, Rocketicons was born. The first tool we’ve published to address these challenges. Rocketicons is an icon library designed specifically for Tailwind CSS and fully compatible with React Native. And it's just the beginning. Our mission is to empower developers like you to effortlessly share codebases across platforms, boosting productivity while ensuring consistency. We're also working on solutions for the other problems we've identified, so stay tuned for more tools to come!
Why Tailwind CSS?
I have to admit, I never liked Bootstrap much, but I absolutely love Tailwind CSS! It might sound insane, but here’s why I think it’s a game-changer:
- Utility-First Approach: Say goodbye to digging through endless CSS files. Tailwind's utility-first approach means styling directly within HTML, making development faster and code more maintainable.
- Customization: Tailwind is like a chameleon — it adapts to your design preferences. With its high configurability, we can tailor it to fit our exact needs, ensuring a sleek and cohesive user interface every time.
- Performance: Small CSS bundles? Yes, please! By only including the styles we need, Tailwind keeps our applications lightning fast.
- Community Support: It's not just a framework; it's a family. The vibrant Tailwind community offers a treasure trove of resources, plugins, and support, making troubleshooting a breeze and best practices a cinch to learn.
I can't see any reason not to use Tailwind CSS — it's truly revolutionized how we approach styling.
Now, let's talk Rocketicons features:
- Tailwind CSS Integration: Style your icons effortlessly with Tailwind's utility-first approach.
- React Native Support: Seamlessly use the same icons across web and mobile platforms.
- Consistent Design: Keep your applications looking sharp and feeling cohesive.
- Easy to Use: Use Tailwind classes to avoid mixing HTML attributes with styles, making the code easier to understand and style, you'll be up and running in no time.
Still not convinced? Take a peek at just how simple it is to integrate Rocketicons into your projects:
// Example for a React project
import { RcRocketIcon } from "rocketicons/rc";
const MyComponent = () => (
<div>
<RcRocketIcon className="icon-rose-500 border border-slate-600 rounded-lg bg-slate-50" />
</div>
);
For React Native, no code changes are needed.
// Example for a React Native project
import { RcRocketIcon } from "rocketicons/rc";
const MyComponent = () => (
<div>
<RcRocketIcon className="icon-rose-500 border border-slate-600 rounded-lg bg-slate-50" />
</div>
);
Ready to embark on this journey with us? We're beyond excited to share Rocketicons with the developer community and can't wait to hear your feedback and contributions.
Dive into our documentation or visit our GitHub repository for everything you need to get started, and let's make some coding magic happen!
Dive into our documentation or on GitHub repository for everything you need to get started and let's make some coding magic happen!
Thank you for your consistent support, and let's keep writing countless lines of stellar code!
I've wrote a article on LinkedIn sharing how this project has improved me as a professional.
Top comments (5)
I can - you transfer all your debt to HTML and add a bunch of unnecessary markup. If you want to change your look and feel at any point in the future, you're going to have to change every single instance rather than make a global change in the stylesheet.
I totally understand your point, and it's a valid concern. However, what you've highlighted isn't unique to Tailwind. It's an issue that arises from the bad use of any technology. Poorly written CSS can lead to the same problems. There are numerous strategies to avoid the pitfalls you mentioned. By the way, I think I'm going to write about these solutions. Stick around so we can discuss our different ideas further
I agree that you can use Tailwind without those issues, but it's more effort and nobody really does it. Tailwind (and the like) all promote themselves, and in turn have tutorials for them, based on the "bad" way. Developers who are just learning how to write code are being taught to write problematic code.
Please do write about it!
I did, as I promised.
Enhance Your Tailwind CSS Skills: Essential Tips and Tricks
very good