I created tailwindCSS like framework that provided css utility classes to quickly create Uniq UI Design without write css.

CSS UTILITY CLASSES ADDED LIKES

alignItems, alignSelf, alignContent, backgroundColor, backgroundOpacity, textColor, textOpacity, borderColor, borderOpacity, borderWidth, borderRadius, boxSizing, boxShadow, // container, // not implement yet cursor, display, divideColor, divideWidth, divideOpacity, justifyContent, justifyItems, justifySelf, margin, flex, flexDirection, flexWrap, fontSize, fontWeight, gap, gridTemplateColumns, gridTemplateRows, gridAutoFlow, gridColumn, gridColumnStart, gridColumnEnd, gridAutoColumns, gridAutoRows, lineHeight, opacity, order, outline, overflow, padding, pointerEvents, position, positionState, placeholderColor, placeholderOpacity, space, transform, translate, textAlign, textDecoration, userSelect, whitespace, zIndex, width, minWidth, maxWidth, height, minHeight, maxHeight

implement like this.

<div className="w-max-7xl">
  <div className="font-sm relative -top-3.5">Hi</div>
  
  <h1 className="font-100 hover:font-900 ">Hi This is H1 Tag</h1>
  
  <div className="text-danger text-primary hover:text-opacity-50">Hover ME</div>

Run

  # app running...  
  yarn start
  

Happy Codding