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-colors for 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:

npm install tailwind-material-3 tailwind-material-colors

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:

import { createMaterialConfig } from 'tailwind-material-3';

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:

<!-- Filled Button -->
<button class="md-btn md-btn-filled">
  Click Me
</button>

<!-- Outlined Card -->
<div class="md-card md-card-outlined p-4">
  <h3 class="text-md-title-medium">Card Title</h3>
  <p class="text-md-body-medium">Card content goes here.</p>
</div>

<!-- Text Field -->
<div class="md-text-field md-text-field-outlined">
  <input type="text" class="md-text-field-input" placeholder=" " />
  <label class="md-text-field-label">Username</label>
</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

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <button class="md-btn md-btn-filled">
      Action
    </button>
  `
})
export class AppComponent {}

React

export default function App() {
  return (
    <button className="md-btn md-btn-filled">
      Action
    </button>
  );
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.