Windicss provides very rich class names to quickly implement styles, the following are some commonly used class names:
- width and height
.w-{size}: The width is{size}, for example,.w-4means the width is 4rem..h-{size}: The height is{size}, for example,.h-16means the height is 4rem.
- margins and padding
.m-{size}: The outer margin is{size}, for example,.m-4means the outer margin is 1rem..p-{size}: The inner margin is{size}, for example,.p-4means the inner margin is 1rem..mx-{size}: The outer margin in the horizontal direction is{size}, for example,.mx-4means the left and right outer margins are 1rem..my-{size}: The outer margin in the vertical direction is{size}, for example,.my-4means the upper and lower outer margins are 1rem.
- font size and color
.text-{size}: The font size is{size}, for example,.text-lgmeans the font size is large..text-{color}: The font color is{color}, for example,.text-red-500means the font color is red 500..bg-{color}: The background color is{color}, for example,.bg-gray-200means the background color is gray 200.
- Positioning and Layout
.absolute: Absolute positioning..relative: Relative positioning..fixed: Fixed positioning..flex: Flexible layout..grid: grid layout..justify-{content}: Main axis alignment, for example.justify-centermeans that the main axis is centered..items-{align}: Alignment of the cross axis, for example.items-centermeans that the cross axis is centered..gap-{size}: grid spacing, for example.gap-4means the grid spacing is 1rem.
The above are just some commonly used class names. Windicss also provides a very rich class name to implement styles. For details, please refer to the official documentation.