One thing, which is very cool and you don't have in Tailwind CSS is the attributes - copyto and copyfrom. You define the style on the element and use the 'copyto' attribute to copy the styles in memory, and when you use the attribute copyfrom and pass the value same as the copyto, the styles are replicated.

Thought process behind making this?

• To create something like Tailwind CSS, but with a little difference.
• CSS styles are abbreviated into letters for each word, for eg: text-align translates to ta and the value is passed within square brackets like ta-[right].
• I wanted to avoid repeating same styles for similar elements, like the one above in cards, I have defined styles only for the first one and the later are just copies. Advantage being the new styles when changed are automatically applied not needing to change for other elements, just like classes.
• Whatever styles you define, they are transformed into classes and applied.
• Even the hover, active, focus, focus-within element states can be defined.
• This complete page is styled using no external stylesheet or inline styles.

This is a sample button with hover and active states