m3-web-tailwind
CommunityMaterial Design 3 for Tailwind CSS
Authorshelbeely
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill enables the implementation of Material Design 3 (M3) principles within projects utilizing Tailwind CSS, bridging the gap between M3's design language and Tailwind's utility-first approach.
Core Features & Use Cases
- Token Mapping: Integrates M3 design tokens (colors, typography, shapes) into Tailwind's theme configuration.
- Plugin Integration: Supports the
tailwind-material-3plugin for streamlined setup. - Manual Configuration: Provides guidance for manually mapping M3 tokens via
tailwind.config.jsand CSS custom properties. - Component Examples: Demonstrates practical application with examples for buttons, cards, text fields, and chips.
- Use Case: When starting a new web project that requires adherence to Material Design 3 guidelines and leverages Tailwind CSS for styling, this skill provides the necessary configuration and examples to ensure consistency and efficiency.
Quick Start
Integrate M3 design tokens into your Tailwind CSS project by installing the tailwind-material-3 plugin and configuring your tailwind.config.js file.
Dependency Matrix
Required Modules
None requiredComponents
scriptsreferences
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: m3-web-tailwind Download link: https://github.com/shelbeely/Shelbeely-Agent-skills/archive/main.zip#m3-web-tailwind Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.