Foundations

Foundations in Tailwind Material

A guide to use Tailwind Material in your project.

We highly recommend you to watch the videos explaining the material color generation and roles.

Material Design 3 Videos

Material Scheme

Material color schemes start from a source color, a single color from which all other scheme colors are derived. The source color is provided in the tailwind.config.ts as the primary-color and injected in the html body as --md-sys-color-[keyColor]. Every pallet color has a on-color that is used for text and icons.

**Hover over element to check tailwind class**

Primary Key Color

0
10
20
30
40
50
60
70
80
90
95
99
100

Secondary Key Color

0
10
20
30
40
50
60
70
80
90
95
99
100

Tertiary Key Color

0
10
20
30
40
50
60
70
80
90
95
99
100

Error Key Color

0
10
20
30
40
50
60
70
80
90
95
99
100

Surface Key Color

Surface Container Key Color

Outline Key Color

Experimental

As experimental this library has components with only css you can access this components only digit `md-[component]` in future updates we pretend to document the components.