Tailwind is powerful, but sometimes we want to bend the rules — for example, by generating class names dynamically. While this may seem convenient, it often leads to subtle issues. Let’s look at the common mistakes, why they happen, and how to handle them properly.
This article presents a common pattern for fetching data on the client side using the latest version of React (v19.1 at the time of writing) in a way that is easy to implement, clear, and robust enough to get the job done.
I believe that a website or app's progress indicator should respect the global theme and have a touch of originality. That's why I never use an external library or package for it. I prefer to create my own component, keeping it as lightweight as possible and fully customizable.
With React and Tailwind, it's a piece of cake !
This project demonstrates how to build a custom component using inputs and buttons from the Shadcn/ui library. It allows developers to attach one or more customizable action buttons before, after, or on both sides of a text or number input field.
It leverages Tailwind CSS, React, and TypeScript for full flexibility and style consistency.
The guide covers:
Initial project setup with Vite, Tailwind CSS, and Shadcn/ui
Creation of the custom component with extended input props
Dynamic rendering of action buttons via a reusable sub-component
A working usage example with icon buttons and callbacks
This solution is ideal for enhancing form inputs with additional interactivity while maintaining a clean, composable UI design.