Colors

If you are familiar with tailwind this should be easy as the color scheme is adapted to tailwind style.

The difference is that the color of material3 starts with 10 to 99 (from dark to light).
While the Tailwind color scheme is from 50 to 950 (from light to dark colors).

How to edit material sceme color documentation

Primary Color

10 text-primary-900 bg-primary-900
20 text-primary-800 bg-primary-800
30 text-primary-700 bg-primary-700
40 text-primary-600 bg-primary-600
50 text-primary-500 bg-primary-500
60 text-primary-400 bg-primary-400
70 text-primary-300 bg-primary-300
80 text-primary-200 bg-primary-200
90 text-primary-100 bg-primary-100
95 text-primary-50 bg-primary-50
99 text-primary-10 bg-primary-10

Light Theme

Primary text-white bg-primary-600
On Primary text-primary-600 bg-white
Container text-primary-900 bg-primary-100
On Container text-primary-100 bg-primary-900

Dark Theme

Primary text-primary-800 bg-primary-200
On Primary text-primary-200 bg-primary-800
Container text-primary-100 bg-primary-700
On Container text-primary-700 bg-primary-100

Secondary

10 text-secondary-900 bg-secondary-900
20 text-secondary-800 bg-secondary-800
30 text-secondary-700 bg-secondary-700
40 text-secondary-600 bg-secondary-600
50 text-secondary-500 bg-secondary-500
60 text-secondary-400 bg-secondary-400
70 text-secondary-300 bg-secondary-300
80 text-secondary-200 bg-secondary-200
90 text-secondary-100 bg-secondary-100
95 text-secondary-50 bg-secondary-50
99 text-secondary-10 bg-secondary-10

Light Theme

Secondary text-white bg-secondary-600
On Secondary text-secondary-600 bg-white
Container text-secondary-900 bg-secondary-100
On Container text-secondary-100 bg-secondary-900

Dark Theme

Secondary text-secondary-800 bg-secondary-200
On Secondary text-secondary-200 bg-secondary-800
Container text-secondary-100 bg-secondary-700
On Container text-secondary-700 bg-secondary-100

Tertiary

10 text-tertiary-900 bg-tertiary-900
20 text-tertiary-800 bg-tertiary-800
30 text-tertiary-700 bg-tertiary-700
40 text-tertiary-600 bg-tertiary-600
50 text-tertiary-500 bg-tertiary-500
60 text-tertiary-400 bg-tertiary-400
70 text-tertiary-300 bg-tertiary-300
80 text-tertiary-200 bg-tertiary-200
90 text-tertiary-100 bg-tertiary-100
95 text-tertiary-50 bg-tertiary-50
99 text-tertiary-10 bg-tertiary-10

Light Theme

Tertiary text-white bg-tertiary-600
On Tertiary text-tertiary-600 bg-white
Container text-tertiary-900 bg-tertiary-100
On Container text-tertiary-100 bg-tertiary-900

Dark Theme

Tertiary text-tertiary-800 bg-tertiary-200
On Tertiary text-tertiary-200 bg-tertiary-800
Container text-tertiary-100 bg-tertiary-700
On Container text-tertiary-700 bg-tertiary-100

Error

10 text-error-900 bg-error-900
20 text-error-800 bg-error-800
30 text-error-700 bg-error-700
40 text-error-600 bg-error-600
50 text-error-500 bg-error-500
60 text-error-400 bg-error-400
70 text-error-300 bg-error-300
80 text-error-200 bg-error-200
90 text-error-100 bg-error-100
95 text-error-50 bg-error-50
99 text-error-10 bg-error-10

Light Theme

Error text-white bg-error-600
On Error text-error-600 bg-white
Container text-error-900 bg-error-100
On Container text-error-100 bg-error-900

Dark Theme

Error text-error-800 bg-error-200
On Error text-error-200 bg-error-800
Container text-error-100 bg-error-700
On Container text-error-700 bg-error-100

Neutral

10 text-neutral-900 bg-neutral-900
20 text-neutral-800 bg-neutral-800
30 text-neutral-700 bg-neutral-700
40 text-neutral-600 bg-neutral-600
50 text-neutral-500 bg-neutral-500
60 text-neutral-400 bg-neutral-400
70 text-neutral-300 bg-neutral-300
80 text-neutral-200 bg-neutral-200
90 text-neutral-100 bg-neutral-100
95 text-neutral-50 bg-neutral-50
99 text-neutral-10 bg-neutral-10

Light Theme

Body text-black bg-neutral-10
On Body text-white bg-neutral-900
Surface text-black bg-neutral-10
On Surface text-white bg-neutral-900

Dark Theme

Body text-white bg-neutral-900
On Body text-black bg-neutral-100
Surface text-white bg-neutral-900
On Surface text-black bg-neutral-100

Gray

0 text-black bg-black
10 text-gray-900 bg-gray-900
20 text-gray-800 bg-gray-800
30 text-gray-700 bg-gray-700
40 text-gray-600 bg-gray-600
50 text-gray-500 bg-gray-500
60 text-gray-400 bg-gray-400
70 text-gray-300 bg-gray-300
80 text-gray-200 bg-gray-200
90 text-gray-100 bg-gray-100
95 text-gray-50 bg-gray-50
99 text-gray-10 bg-gray-10
100 text-white bg-white

Light Theme

Surface text-black bg-gray-100
On Surface text-white bg-gray-700
Outline text-white bg-gray-500
On Outline text-black bg-gray-100

Dark Theme

Gray text-white bg-gray-800
On gray text-black bg-gray-300
Container text-black bg-gray-400
On Container text-white bg-gray-800

Surfaces - Light

Surfaces at +1 bg-surface-100
Surfaces at +2 bg-surface-200
Surfaces at +3 bg-surface-300
Surfaces at +4 bg-surface-400
Surfaces at +5 bg-surface-500

Surfaces - Dark

Surfaces at +1 bg-surfacedark-100
Surfaces at +2 bg-surfacedark-200
Surfaces at +3 bg-surfacedark-300
Surfaces at +4 bg-surfacedark-400
Surfaces at +5 bg-surfacedark-500