If you're looking for a UI kit for a Tailwind css project, Tailmater might be the perfect fit for you. Tailmater is an open source UI Kit based on Tailwind css framework. Built with Material Design 3 the latest version of Google's open-source design system.

What's in the Tailmater UI kit?

Many components are ready for you to use to build a Tailwind css web project. The following are the components available in Tailmater.

• Action component contains various buttons such as the general button, floating action buttons (FAB), extended Fabs, icon buttons and segmented buttons.
• Communication component contains badges, progress indicators, and snackbar.
• Containment component contains cards, divider, lists, bottom sheets, dialogs, side sheets, and full screen dialogue.
• Navigation component contains the bottom app bar, navigation ba, bar, avigation drawer, navigation rails, search, top app bar and tabs
• Selection component contains a check box, radio, chip, switch, slider range and menu (dropdown)
• Text input component contains input text with the filled and outline.

In this project I have also completed it with a simple Vanilla Javascript so it is ready to use.

Demo component in herehttps://aribudin.github.io/tailmater/

You can find a tailmater project athttps://github.com/aribudin/tailmater

How to start?

To start using tailmater is quite easy

• Clone the repository with the following command:
• git clone https://github.com/aribudin/tailmater.git
• Run in terminal this command:
• npx tailwindcss -i ./src/tailwindcss/tailwind.css -o ./src/css/style.css --watch
• Open html file in browser and start editing

Tailmater use the MIT license so you can use it included in a commercial project. Credit to the Github page will always be appreciated.

Closing

If you like the “TailMater” project, please give a star on ourgithub page. We always accept contributions and proposals. You can also follow my Twitterhttps://twitter.com/ari_budin to get the latest updates.