Features
Style and Color Elements
Use css class
chai-bg-'color-name' or chai-bg-'hex-code'
to set the background color of an element:
Colors
Use css class
chai-color-'color-name'
to set the text color:
class="chai-text-red"
class="chai-text-#3498db"
Typography
Use css class
chai-text-'size'
to set the font size of an element:
class="chai-text-xs"
class="chai-text-sm"
class="chai-text-md"
class="chai-text-lg"
class="chai-text-xl"
class="chai-text-2xl"
class="chai-text-3xl"
class="chai-text-40px"
Box Model
Padding
Use css class
chai-p-'size'
to set padding:
class="chai-p-1" → 8px padding
class="chai-p-12px" → 12px padding
Padding X & Y
class="chai-px-12px" → left & right padding
class="chai-py-12px" → top & bottom padding
Padding with Position
class="chai-p{position}-12px" → t:top r:right b:bottom l:left
Margin
class="chai-m-1" → 8px margin
Border
class="chai-border-2px chai-border-color-#ff0000
chai-border-radius-6px"
Width & Height
Control element size using width and height utilities.
chai-w-100% → width: 100%
chai-w-50% → width: 50%
chai-h-100px → height: 100px
chai-w-50% chai-h-100px
Gap
Use css class
chai-gap-'size'
for gap between elements:
Display & Alignment
Use
chai-d-flex
or
chai-d-grid
for layouts:
Control layout using display utilities.
chai-d-block → display: block
chai-d-inline → display: inline
chai-d-flex → display: flex
Flex Alignment
Align items using flex utilities.
chai-justify-center → center horizontally
chai-justify-between → space between
chai-align-center → vertical center
Grid Layout
Create layouts using grid utilities.
chai-d-grid → display: grid
chai-grid-cols-3 → 3 columns
Shadows & Effects
Use
chai-shadow-sm
or
chai-shadow-md:
Position
Control element positioning.
chai-position-relative → position: relative
chai-position-absolute → position: absolute
chai-top-0 chai-right-0 → position offsets
chai-absolute
Misc Utilities
chai-cursor-pointer → cursor: pointer
chai-opacity-50 → opacity: 0.5
chai-overflow-hidden → overflow: hidden