Tailmater - Material Design 3 UI kit for Tailwind CSS
Tailmater is a high-quality and open-source Material Design 3 UI Kit based on the Tailwind CSS framework built with HTML and vanilla javascript.
Authentic implementation of Google's latest design system using Tailwind CSS utility classes.
Every component includes both light and dark theme variants out of the box.
Pure HTML and vanilla JS with no React, Vue, or Angular dependencies required.
Well-documented source code makes customization and modification straightforward for any developer.
Ready-to-use HTML files open directly in browser without complex build steps or tooling.
Build polished web interfaces with Material Design 3 components
Tailmater brings Google's Material Design 3 system to Tailwind CSS, offering a lightweight set of UI components built entirely with HTML and vanilla JavaScript. The kit follows the latest iteration of Google's open-source design language, giving developers a familiar and consistent visual foundation without requiring any frontend framework. Developers who prefer working without React, Vue, or other frameworks will appreciate the dependency-free approach.
What's included
- Material Design 3 styled UI components (buttons, forms, cards, and more)
- Light and dark mode variants for all components
- Tailwind CSS configuration file
- Custom Tailmater.js script for interactive behavior
- Commented source code for easy modification
- HTML template files ready for browser editing
Ideal for
- Web apps that need a Material Design look without a heavy framework
- Developers who prefer vanilla JavaScript over frontend libraries
- Internal tools and dashboards following Google's design language
- Prototyping interfaces quickly with a consistent component set
- Projects where keeping bundle size small is a priority
Theming & dark mode
Every component ships with both light and dark mode styling out of the box. Since the kit is built on Tailwind CSS utility classes and plain JavaScript, switching between themes or customizing color palettes is straightforward — just adjust the Tailwind config and the components follow suit.
Good to know
- The kit is open source and free to download, with optional paid tiers that serve as a way to support the creator
- A pro version with additional components is available separately: Goodash
- Last updated in February 2023, so verify compatibility with the latest Tailwind CSS releases before integrating into newer projects
Stack
