@claas.dev/material-tailwind
TypeScript icon, indicating that this package has built-in type declarations

0.6.0 • Public • Published

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).

Readme

Keywords

none

Package Sidebar

Install

npm i @claas.dev/material-tailwind

Weekly Downloads

2

Version

0.6.0

License

Apache-2.0

Unpacked Size

32.4 kB

Total Files

9

Last publish

Collaborators

  • claas.dev