Use the Material design system with Tailwind CSS. Based on material.io.
npm install --save-dev @claas.dev/material-tailwind
/* 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.
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" })],
};
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).