Component Library

A component library offers pre-built common UI components, such as buttons, navigation bars, etc. Using components from a UI compoent library can save time and effort as you don't need to build each component yourself. However the downside of using a component library is that your UI might look a bit too generic and less unique.

This guide recommends referring to existing component libraries only for inspiration and to get an idea how such components are built. Tailwind CSS allows us to build custom components with little effort. Building custom components also becomes easier when you have a component library as a reference for inspiration and to check how things can be done.

The component library recommended in this guide is Tailwind UI. Tailwind UI components and templates can be purchased in bundles. Additionally Tailwind UI offers access to the full UI library at a one-time cost of €249. This guide recommends purchasing the personal €249 lifetime access to the full UI library.

The cost of Tailwind UI is steep, however the UI library is extensive and professionally made.

Tailwind UI

To use Tailwind UI, start by purchasing the lifetime access to the full component library. You can do so on the Tailwind UI All-access page. As part of the purchase process you will setup an account with Tailwind UI.

Once you have completed the purchase and have an account on Tailwind UI, you are good to go. There is no need to setup or install anything to start using Tailwind UI. When you want to use a component you simply copy and paste the code from the Tailwind UI website into your project. However as recommended above, we will not use Tailwind UI components directly but rather look to the Tailwind UI library for inspiration when building our custom components. Additionally Tailwind UI can be used as a reference when unsure how something can be achieved in Tailwind CSS.