Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Building React and Vue Support for Tailwind UI

blog.tailwindcss.com

Post reply on HN
Print view View original

21–30 of 122 posts

Re: Building React and Vue Support for Tailwind UI

#21

Post by natural219 »

franciscop wrote: post #16

Ah I'm not a huge fan of this: I'd prefer it to be like this: 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

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

Re: Building React and Vue Support for Tailwind UI

#22

Post by mgerullis »

natural219 wrote: post #21
franciscop wrote: post #16

Ah I'm not a huge fan of this: I'd prefer it to be like this: 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

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

I feel the exact same way

Re: Building React and Vue Support for Tailwind UI

#23

Post by welder »

This is so ugly and error prone:

How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way:

Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Having your React component render the same result given the same props and state makes things so much easier to work with. Also, the compiler knows about your theme so your IDE helps auto-complete and makes sure the style you're using is actually defined.

[1] https://github.com/airbnb/react-with-styles

[2] https://reactjs.org/docs/react-api.html#reactpurecomponent

Re: Building React and Vue Support for Tailwind UI

#24

Post by theturtletalks »

5Qn8mNbc2FNCiVV wrote: post #19
ssijak wrote: post #4

Or just use something like Chakra UI, which is like Tailwind CSS but based on styled system and built with Typescript for React from the beginning and has a nice set of basic components. I even built something like Tailwind UI but for Chakra (link is in my bio if you want to check it out)

And then you have JSS, no restrictions to the available design tokens, no postcss plugin support and your "css bundle" increases since you don't reuse tokens but styles are generated. Those things alone are reason for never using Chakra for anything serious as these are actual reasons your product/saas/whatever is at a higher risk of failing. And that's just apart from the fact that the components are not allowing ea…

Chakra-ui uses Styled-system and Emotion. All your points are against those 2 projects, not Chakra directly. Chakra turns Tailwind into a Styled-system theme that can be adapted and changed.

>> Those things alone are reason for never using Chakra for anything serious as these are actual reasons your product/saas/whatever is at a higher risk of failing.

Emotion and other CSS-in-JS libraries are used extensively and don't raise a risk of the project failing.

>> And that's just apart from the fact that the components are not allowing easy overriding

You can use Styled-system to create and extend the existing theme. This is actually a knock against using Tailwind CSS directly since you will need to write custom CSS to override the theme. I've even seen projects where Tailwind is used with Emotion to extend the existing theme.

>> At some point the frontend also randomly crashed for me because of the Popover component and it's usage of Popper.js

I use Chakra (and the Menu component that uses Popper) on my landing page and SaaS and have never had any issues. If your code is open, I can help you debug this.

Re: Building React and Vue Support for Tailwind UI

#25

Post by nailer »

welder wrote: post #23

This is so ugly and error prone: How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way: Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Havi…

Love this. And anything else that uses design systems rather than styling individual elements.

I currently have a tailwind project that's around twelve months old. I'd like to add a dark theme.

Normally - in a CSS, SCSS, PostCSS project - this would consist of adding a media query overriding a handful of color variables.

Using tailwind (which has 'inbuilt dark mode support') I have a few thousand colors spread around the project and I have to modify them all. Additionally by having a giant palette of named colors, we have, for example, multiple occurrences of our active color as `blue-400` and `blue-500` and `blue-600` rather than a single `var(--active-color)`.

Re: Building React and Vue Support for Tailwind UI

#26

Post by leadingthenet »

welder wrote: post #23

This is so ugly and error prone: How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way: Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Havi…

> How do you remember the names of all your classes?

You don't.

https://tailwindcss.com/docs/extracting-components

Re: Building React and Vue Support for Tailwind UI

#27

Post by welder »

leadingthenet wrote: post #26
welder wrote: post #23

This is so ugly and error prone: How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way: Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Havi…

> How do you remember the names of all your classes? You don't. https://tailwindcss.com/docs/extracting-components

So, the dev never reads/modifies the extracted component that still uses hard-to-read hard-to-typecheck classes? Doesn't seem like a good solution.

Re: Building React and Vue Support for Tailwind UI

#28

Post by ahuth »

welder wrote: post #23

This is so ugly and error prone: How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way: Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Havi…

You don't need to remember all the classes. Instead, you can go to https://tailwindcss.com/docs and search for whatever you're looking for.

Having IDE autocompletion (or even TypeScript integration) would be really nice. I'm sure there's plugins for many IDEs or editors that can do that, though.

Re: Building React and Vue Support for Tailwind UI

#29

Post by welder »

nailer wrote: post #25
welder wrote: post #23

This is so ugly and error prone: How do you remember the names of all your classes? Should your IDE know about these classes? Can you autocomplete class names? Where's the import statement for these classes so you know where they're defined and what they do. There's a better way: Use site-wide themes (Objects with keys like colors.heading.primary having value '#000') and withStyles[1] and React.PureComponent[2]. Havi…

Love this. And anything else that uses design systems rather than styling individual elements. I currently have a tailwind project that's around twelve months old. I'd like to add a dark theme. Normally - in a CSS, SCSS, PostCSS project - this would consist of adding a media query overriding a handful of color variables. Using tailwind (which has 'inbuilt dark mode support') I have a few thousand colors spread around…

Yep, design systems (your own component library) are the way to go with React. Auto-complete, type checking support, functional, etc. You do style the component once, but after that it's self-contained, reusable, and functional.

Everyone stopped using unstructured cryptic class="bg-gray-100" for good reason. Tailwind is backwards progress.

Re: Building React and Vue Support for Tailwind UI

#30

Post by franciscop »

natural219 wrote: post #21
franciscop wrote: post #16

Ah I'm not a huge fan of this: I'd prefer it to be like this: 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

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

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?

    Hello
    Hello
Post reply on HN