Tailwind-based CSS-in-JS syntax

[algebrain]

I have the idea of CSS-in-TS library with syntax based on Tailwind. The working title of the planned library is 'gauge', so the following typescript code:

const myStyle = gauge.boxBorder.p('10px');

would be equivalent of

const myStyle = {
  boxSizing: "border-box",
  padding: "10px",
}

How do you think, could such a syntax become in demand (in React projects, for example)? Can I use parts of Tailwind code in order to simplify this work?

[itsMapleLeaf]

Have you looked at twin.macro? What are your thoughts on it?

[algebrain]

Good library, thanks a lot for this link. However, I think writing

gauge.borderBox.p2

is still better then

"borderBox p2"

because in the first case editor may use the language in order to help us. The downside is that I don't know how to do this server-side, or solutions that I know are ugly.

[itsMapleLeaf]

Sure, I agree, but the tailwindCSS extension with some additional config actually makes for a pretty good experience already. The only thing missing is linting against invalid class names

[Watsica]

Tailwind is a utility css framework, which gives you specific, rememberable css classes to set, instead of writing plain css rules. It aims to help you build rich user interfaces fast. One can declare the needed utilities by editing a config JavaScipt file. Find out more in their docs.

mybpcreditcard