This project was developed for TailwindCSS v3 and is no longer maintained.
We recommend migrating from TailwindCSS v3 to v4. If you are using TailwindCSS v4, please visit @sandlada/material-design-css.
Import the Material Design tokens into tailwindcss and use them through plugins.
- ESM Supported Only
- Typescript Supported
npm i -D @glare-labs/tailwindcss-material-tokens
import { provideAll } from '@glare-labs/tailwindcss-material-tokens'
const all = provideAll()
/** @type {import('tailwindcss').Config} */
export default {
// ...
plugins: [
...all.allPlugins()
],
}If you don’t want to be troubled by the original styles of tailwindcss, please try to turn off the styles that come with tailwindcss (color, rounded, shadow, text).
For example:
<div class="w-24 h-24 shape-large elevation-1 bg-primary">
<p class="text-title-large text-on-primary">Title</p>
</div>import { provideBorder, provideColor, provideElevation, provideMotion, provideShape, provideSizing, provideTypography, provideWindowMediaQuery } from '@glare-labs/tailwindcss-material-tokens'
const border = provideBorder()
const color = provideColor()
const elevation = provideElevation()
const motion = provideMotion()
const shape = provideShape()
const sizing = provideSizing()
const typography = provideTypography()
const width = provideSizing()
const mq = provideWindowMediaQuery()
/** @type {import('tailwindcss').Config} */
export default {
// ...
plugins: [
border.getPlugin(),
color.getPlugin(),
elevation.getPlugin(),
motion.getPlugin(),
shape.getPlugin(),
sizing.getPlugin(),
typography.getPlugin(),
width.getPlugin(),
mq.getPlugin(),
],
}provideAll includes:
- border
- color
- elevation
- motion
- shape
- sizing
- typography
import { provideAll } from '@glare-labs/tailwindcss-material-tokens'
const all = provideAll()
/** @type {import('tailwindcss').Config} */
export default {
// ...
plugins: [
...all.getAllPlugins()
],
}Most plugins support prefix, hardcodeDefaultValue, excludeTokens and customTokens options.
prefix represents a public CSS variable:
const color = provideColor({
prefix: 'my-product-prefix'
})the result:
.bg-primary {
background-color: var(--my-product-prefix-primary, #005ac1);
}If hardcodeDefaultValue is true, the CSS contains a default value.
const color = provideColor({
prefix: 'my-product-prefix',
hardcodeDefaultValue: false,
})the result:
.bg-primary {
background-color: var(--my-product-prefix-primary,);
}excludeTokens is a token blacklist, including unnecessary token groups.
const color = provideColor({
excludeTokens: [
// remove .bg-primary and .text-primary
'primary'
]
})Contains only color.
{
primaryPaletteKeyColor: '#047aff',
secondaryPaletteKeyColor: '#727598',
tertiaryPaletteKeyColor: '#7b70a3',
neutralPaletteKeyColor: '#737782',
neutralVariantPaletteKeyColor: '#727785',
background: '#f9f9ff',
onBackground: '#181c25',
surface: '#f9f9ff',
surfaceDim: '#d7d9e6',
surfaceBright: '#f9f9ff',
surfaceContainerLowest: '#ffffff',
surfaceContainerLow: '#f1f3ff',
surfaceContainer: '#ebedfa',
surfaceContainerHigh: '#e5e8f5',
surfaceContainerHighest: '#dfe2ef',
onSurface: '#181c25',
surfaceVariant: '#dee2f2',
onSurfaceVariant: '#424753',
inverseSurface: '#2c303a',
inverseOnSurface: '#eef0fd',
outline: '#727785',
outlineVariant: '#c2c6d6',
shadow: '#000000',
scrim: '#000000',
surfaceTint: '#005ac1',
primary: '#005ac1',
onPrimary: '#ffffff',
primaryContainer: '#d8e2ff',
onPrimaryContainer: '#001a41',
inversePrimary: '#adc6ff',
secondary: '#595c7e',
onSecondary: '#ffffff',
secondaryContainer: '#dfe0ff',
onSecondaryContainer: '#151937',
tertiary: '#625789',
onTertiary: '#ffffff',
tertiaryContainer: '#e7deff',
onTertiaryContainer: '#1e1341',
error: '#ba1a1a',
onError: '#ffffff',
errorContainer: '#ffdad6',
onErrorContainer: '#410002',
primaryFixed: '#d8e2ff',
primaryFixedDim: '#adc6ff',
onPrimaryFixed: '#001a41',
onPrimaryFixedVariant: '#004494',
secondaryFixed: '#dfe0ff',
secondaryFixedDim: '#c1c4eb',
onSecondaryFixed: '#151937',
onSecondaryFixedVariant: '#414465',
tertiaryFixed: '#e7deff',
tertiaryFixedDim: '#ccbff8',
onTertiaryFixed: '#1e1341',
onTertiaryFixedVariant: '#4a4070'
}