0.6.0 • Published 8 months ago
@claas.dev/material-tailwind v0.6.0
Material Theme Plugin for Tailwind CSS
Use the Material design system with Tailwind CSS. Based on material.io.
Get started
Install
npm install --save-dev @claas.dev/material-tailwind
Configure plugin
Tailwind CSS v4.0
/* This is from your Tailwind CSS install */
@import "tailwindcss";
@plugin "@claas.dev/material-tailwind" {
/* Pick your favorite color */
source-color: #0c1445;
}
For reference you can look at an example using SolidJS.
Tailwind CSS v3.0 (or v4.0 with configuration file)
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({ sourceColor: "#0c1445" })],
};
How it works
The plugin generates colors with @material/material-color-utilites and extends the Tailwind CSS theme to make them available for you. Additionally this plugin extends the default theme with various design tokens collected from material.io and the Material 3 Design Kit (Community).