Tailwind Class Generator

If you are using Tailwind, you need to generate Tailwind classes for the colors you add. By default, we generate primary, secondary, success, warning, danger and surface colors. for example, you added a color to the theme called Accent 1 and needed it in Tailwind, you can generate classes with the functions provided to you.

Create palette

Using this function, you can give it the variable name you added in the theme file as input and generate color range classes from 50 to 950.

tailwind.config.js

Create surfaces

To be able to create additional color classes you need to use the createSurface. This function generates seven surface colors. Also, if you want to have surfaces in all Tailwind properties, you can put them in colors.

tailwind.config.js

Create on surfaces

The on surface color is based on the surface color of the same name, so you can generate it with createOnSurface for both text and other colors.

tailwind.config.js

Create border surfaces

The board color is only used for border colors, which you can generate with the createBorderSurfaces function.

tailwind.config.js