Material Theme Plugin for Tailwind CSS

Use the Material design system with Tailwind CSS.

• Swap Tailwind CSS default design system for Material where possible
• The Tailwind CSS IntelliSense extension automatically picks up the new tokens for you to use

Primarily this allows you to use Material color roles in Tailwind CSS.

Get started

Install

npm install --save-dev @claas.dev/material-tailwind

Configure plugin

In your Tailwind CSS configuration e.g. tailwind.config.js

import materialTailwind from "@claas.dev/material-tailwind";

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  // Choose your source color to construct your theme from
  plugins: [materialTailwind({ source: "#0c1445" })],
};

For reference you can look at an example using SolidJS.

How it works

This package provides a Tailwind CSS plugin that wraps material-color-utilites for colors and provides other material theme tokens collected from various sources like material.io and the Figma Material 3 Design Kit (Community).

Roadmap

• Support high and medium contrast as seen in theme.json output from Material theme builder
• Add more configuration options
  • Make overwrite optional