@nexim/tailwind-material-colors/docs/variables/materialThemeBuilderTailwindPlugin.md

A Tailwind CSS plugin to automatically generate and apply Material Design 3 color palettes.

[@nexim/tailwind-material-colors](../README.md) / materialThemeBuilderTailwindPlugin

# Variable: materialThemeBuilderTailwindPlugin()

> `const` **materialThemeBuilderTailwindPlugin**: (`options`: [`MaterialThemePluginOptions`](../interfaces/MaterialThemePluginOptions.md), `configFunction?`: (`options?`: [`MaterialThemePluginOptions`](../interfaces/MaterialThemePluginOptions.md)) => `Partial`\<`Config`\>) => `object`

Creates a Tailwind CSS plugin that implements Material Design 3 theming.
This plugin generates CSS variables for light and dark themes, and provides utility classes for state interactions.

The plugin provides:

- CSS variables for all Material Design 3 colors
- Dark mode support via media query and .dark-theme class
- Light mode support via media query and .light-theme class
- State utility classes (.state-_, .stateHover-_, .stateActive-\*)
- Automatic color palette generation based on input colors

## Parameters

| Parameter         | Type                                                                                                               |
| ----------------- | ------------------------------------------------------------------------------------------------------------------ |
| `options`         | [`MaterialThemePluginOptions`](../interfaces/MaterialThemePluginOptions.md)                                        |
| `configFunction?` | (`options?`: [`MaterialThemePluginOptions`](../interfaces/MaterialThemePluginOptions.md)) => `Partial`\<`Config`\> |

## Returns

`object`

| Name        | Type                           |
| ----------- | ------------------------------ |
| `handler()` | (`api`: `PluginAPI`) => `void` |

## Example

```ts
// tailwind-plugin/material-colors.mjs
import { materialThemeBuilderTailwindPlugin } from '@nexim/material-design-color-tailwind-plugin';

export default materialThemeBuilderTailwindPlugin({
  colors: {
    primary: '#6200EE',
    extraColors: {
      success: {
        hex: '#00FF00',
      },
    },
  },
});
```

And then use it in your CSS:

```css
// main.css
@import 'tailwindcss';

@plugin "./tailwind-plugin/material-colors.mjs";
```

## Throws

Error When options parameter is undefined