Tailwind is great CSS library and make you write CSS classes without leaving your html code, but after writing tens of Tailwind classes inside your element, your code looks messyππ, this makes your code unmaintainable.
Tailwind code for a button: π
<button class="bg-indigo-600 px-4 py-3 text-center text-sm font-semibold inline-block text-white cursor-pointer uppercase transition duration-200 ease-in-out rounded-md hover:bg-indigo-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 active:scale-95">
Tailwind Button
</button>
For these problems, there set of Customizable Ui libraries, letβs delve in it: π
Daisy UI
DaisyUi providing you with classes names for mostly used components like card, button, this allows you to focus in basic styles, and you can modify your components by Tailwind utilities.
DaisyUi comes with more than 30 themes, each theme has its set of colors.
Daisy Ui code for a button:
<button class="btn btn-primary">
daisyUI Button
</button>
Flowbite
Flowbite provide 600+ UI components.
Flowbite provides libraries for frontend frameworks like React, Vue, Sevelt, Angular ... etc.
Flowbite has native built in support for dark mode.
Flowbite provide RTL support for languages like Arabic, Hebrew ...etc., and provide SVG icons too.
Code for a button: π
<button type
="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>
Ripple UI
You can use Ripple by CDN or using NPM, it come with default theme, with Easly customization.
Ripple code for a button: π
<button class="btn btn-primary">Default</button>
Sailboat UI
It's open-source Tailwind components, Sailboat has more than 150 customizable components.
Code for a button: π
<button type="button" class="rounded-lg border border-primary-500 bg-primary-500 px-5 py-2.5 text-center text-sm font-medium text-white shadow-sm transition-all hover:border-primary-700 hover:bg-primary-700 focus:ring focus:ring-primary-200 disabled:cursor-not-allowed disabled:border-primary-300 disabled:bg-primary-300">Button text</button>
Hyper UI
Free open-source Ui components based on Tailwind, like badges, alerts, banners, buttons ...etc.
<button class="inline-block border-e p-3 text-gray-700 hover:bg-gray-50 focus:relative">Button text</button>
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Sira
Open-source Tailwind based library highly customizable with easy to use for developers.
Sira code for button: π
<button class="btn solid bw">BW</button>
Mamba UI
Free open-source collections of Ui components and templates build on Tailwind.
Mamba Sira code for button: π
<button type="button" class="px-8 py-3 font-semibold rounded dark:bg-gray-100 dark:text-gray-800">Basic</button>
I give you code example for a button with each library use, what is you like, for me.
I prefer DaisyUi then Sira or Ripple, for short writing and theming.
I hope this is useful to you.
thanks, stay in touch ismail abo almagd or @SaaSboy on Twitter.