[franciscop]

Ah I'm not a huge fan of this:

    <Menu.Items className="absolute mt-1 right-0">

I'd prefer it to be like this:

    <Menu.Items absolute mt-1 right-0>

I did some experimenting (I'm the owner of `react-tailwind`, please reach out if you want it!) and it's definitely possible to do that; but it does imply components are purely visual, which I'm not sure it's the way they want to go. It's also not possible to use the colon like `md:...`, but you can do `md="..."` instead, which is a good approximation IMHO

[natural219]

Blurring the line between attributes/react props and CSS classes seems abhorrent to me, but just my two cents

[switz]

I've found a lot of success abusing a styled-system Box (+ Flex/Grid) component. It's like a more mature, flexible tailwind that allows complex integrations and much more dynamic styling, not to mention extremely simple media query adjustments.

I know it's not the right system for everyone, but it's the best styling/layout framework I've ever used. You can have it span as much functionality or as little as you want. In my experience sticking to largely layout based styles is the right move, while occasionally mixing in some slight design-based styling as needed.

    <Box
      px={4} // padding left & right
      width={['95%', '80%', 320]} // correlates to my media query grid
    >
      <Card ... />
    </Box>

or

    <Flex gap={4} flexDirection="column">
      <Card ... />
      <Card ... />
    </Flex>

or

    <Grid
      gridTemplateColumns="1fr 1fr 320px"
      gridGap={4}
    >
      <Card ... />
      <Card ... />
      <Sidebar ... />
    </Flex>

I can put together nearly any layout I want without ever touching styled-components, raw css/sass, or augmented classNames (ew?). If I need to do something complex, falling back to a normal styled-component is trivial enough. Plus every layout is in your face and immediately visible; no paging and scrolling around files to figure out what this class or custom styled-component does.

The only downside is that if you don't organize your layouts effectively and break up your react components, you can end up with Box overloads or abuse, but ultimately its up to the developer or team member to figure out that balance. It hasn't been too much a problem for me.

[dmt0]

I also like styled-system a lot. It's too sad that it was essentially abandoned. Theme-UI seems like a replacement that most people are moving to, but I doubt that it will be maintained for years to come either.

[franciscop]

Sure in this "extreme" I'll agree, it was just an experiment after all (I do think both the short-hand classes and attributes look wrong). Do you think the same about either of these?

    <Button color="red">Hello</Button>
    <Button red>Hello</Button>

[bcrosby95]

What does red apply to? The button color? The text color? Both (sounds useless)?

If you told me a button were red, I would assume the button is red and any decoration on it (e.g. text) isn't. Not sure if that's what happens here.

[natural219]

I dislike both of these :). Just leave the styling layer to itself.

[qudat]

With props you get auto complete which is fantastic for this type of styling work. I’m constantly going to the tailwind website to remember their “DSL” of class names. Autocomplete would dramatically help here.

[aniforprez]

I know it's not actually a great solution but personally I've had no problems with remebering their DSL because I use the official Tailwind extension for VSCode which also uses your config file to give you autocompletion

[mgerullis]

I feel the exact same way

[CraftThatBlock]

A big issue I see with this is that having custom classes (the whole extensibility point), at least in TypeScript (without re-declaring them).

[qudat]

I investigated figuring this part out. Theoretically you could build a postcss plugin that generates the proper typescript types. It would be difficult.

[franciscop]

If typescript is an issue don't use it ;)

[jeswin]

Giving up the myriad benefits of type-safe code over this relatively minor and entirely subjective coding style preference will be a poor engineering decision.

[qudat]

i’d prefer `<Menu.Items absolute mt={1} right={0}>`