Tailwind Material 3
Tailwind Material 3
Production-ready Material Design 3 components for Tailwind CSS.
Features
- Material 3 Design System: Complete implementation of Google's Material 3 design spec.
- Tailwind CSS Plugin: Seamless integration as a standard Tailwind plugin.
- Dark Mode: Built-in support for light and dark themes.
- Dynamic Colors: Works with
tailwind-material-colorsfor dynamic theming. - 15+ Components: Buttons, Cards, Inputs, Dialogs, Navigation, and more.
- Accessible: Designed with ARIA attributes and keyboard navigation in mind.
- TypeScript: Fully typed for excellent developer experience.
Components
| Category | Components |
|---|---|
| Actions | Button, FAB, Icon Button |
| Communication | Badge, Snackbar, Tooltip |
| Containment | Card, Dialog, Bottom Sheet |
| Navigation | Navigation Drawer, App Bar (Top/Bottom), Tabs |
| Selection | Checkbox, Radio, Switch, Chip, Menu |
| Inputs | Text Field |
| Utils | List, Progress Indicator, Divider |
Quick Start
1. Installation
Install the package and its peer dependencies:
2. Configuration
Note for Tailwind CSS v4: This library uses a JavaScript configuration wrapper to inject Material 3 design tokens and plugins. Even if you are using Tailwind v4, you must use a tailwind.config.js (or .ts) file for this library to work correctly.
Add the plugin to your tailwind.config.js (or tailwind.config.ts) file:
export default createMaterialConfig({
content: ['./src/**/*.{html,js,ts,jsx,tsx}'], // Adapt to your framework
theme: {
extend: {
// Your custom theme extensions
},
},
// You can still add other plugins here
plugins: [],
});
// Or if you prefer the standard plugin approach (recommended for Tailwind v4 compatibility):
import { tailwindMaterial3 } from 'tailwind-material-3';
export default {
content: ['./src/**/*.{html,js,ts,jsx,tsx}'],
plugins: [
tailwindMaterial3
]
};
3. Usage
Start using the components in your HTML/JSX:
<button class="md-btn md-btn-filled">
Click Me
button>
<div class="md-card md-card-outlined p-4">
<h3 class="text-md-title-medium">Card Titleh3>
<p class="text-md-body-medium">Card content goes here.p>
div>
<div class="md-text-field md-text-field-outlined">
<input type="text" class="md-text-field-input" placeholder=" " />
<label class="md-text-field-label">Usernamelabel>
div>
Theming
Tailwind Material 3 is designed to work with tailwind-material-colors to generate your color palette. You can define your primary source color in your Tailwind config.
By default, the library provides a standard M3 purple-based theme. To customize it, simply override the colors in your Tailwind config or use the tailwind-material-colors plugin alongside this one.
Examples & Frameworks
Angular
@Component({
selector: 'app-root',
template: `
Action
`
})
export class AppComponent {}
React
return (
<button className="md-btn md-btn-filled">
Action
button>
);
}
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
License
This project is licensed under the MIT License - see the LICENSE file for details.