Getting started

Requirements

All the elements are created to be compatible with the newest release of Tailwind CSS. To ensure you have the most recent version of Tailwind, update it through npm.

❖ Visit Tailwind CSS docs

With the exception of the blue color, which is customized, all components utilize the default Tailwind CSS configuration. Some components also depend on first-party plugins such as @tailwindcss/forms, @tailwindcss/typography, and @tailwindcss/aspect-ratio. In addition, to bring them to life, Alpine.js is utilized.

If an example needs plugins or adjustments to the configuration, a comment at the beginning of the example will indicate this.

Get the Inter font

Visit Rasmus' website, the creator of Inter, and get the CDN or download it from there. Alternatively, you can copy this code:

❖ Get the Inter font

Add AlpineJS

I am using Alpine JS for certain elements, such as navigation and accordeons. If you prefer, you can either use the CDN or install it.

❖ Alpine docs are here

Add Ionic icons

To prevent the components from becoming bloated, I am using Ionicons so that your HTML remains uncluttered. However, if you are dissatisfied with this approach, you can use any other library of your choice.

❖ Ionic icons docs are here