3 ms·

> It's an abstraction that actively makes the experience worse I don't understand any sort of DX/UX that requires horizontal scrolling. It is very rare that a

• alayek 4y ago
  I found that one can make Tailwind CSS utility classes appear vertically, if one's been using clsx library[1] (or something similar). clsx accepts an array, and at that point, prettier formatting kicks in. You could have a React `<Button>` component's styling go like this, with clsx and Tailwind: ``` <Button type="button" className={clsx([ "inline-flex items-center", // how its children nodes should be laid out "px-3 py-2", "bg-gradient-to-r from-blue-500 to-indigo-500", // background color stuff "rounded-md", // border radius "text-white", // text color of children nodes "outline-none hover:ring-4 focus:ring-4 ring-blue-500/40", // hover focus behavior "disabled:hover:ring-0 disabled:cursor-not-allowed" // disabled state "disabled:bg-gradient-to-r disabled:from-blue-400 disabled:to-indigo-400" ])} {...props} > Click Me </Button> ``` Imgur link on how it looks like in the editor: https://imgur.com/r0aF9oU https://imgur.com/r0aF9oU Here's a similar button component implemented with horizontal utility classes: https://play.tailwindcss.com/5sbxDmVvsZ https://play.tailwindcss.com/5sbxDmVvsZ. There are other benefits to using a library like clsx. Since clsx accepts array of strings and returns a joined string based on conditional, output of one clsx call can be consumed by another clsx call. References: - [1]: https://www.npmjs.com/package/clsx https://www.npmjs.com/package/clsx
  • CharlieDigital 4y ago
    I dig it; thanks for sharing this.