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

31–40 of 122 posts

Re: Building React and Vue Support for Tailwind UI

#31

Post by lxe »

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…

> Should your IDE know about these classes? > Can you autocomplete class names?

Yes! (https://marketplace.visualstudio.com/items?itemName=bradlc.v...)

Although I wouldn't mind an array instead so I can use the typescript typechecker.

Re: Building React and Vue Support for Tailwind UI

#32

Post by city41 »

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…

Tailwind out of the box is a simple, canned design system. The Tailwind authors have already decided your color palette, spacings, animations, etc. This is perfectly fine for prototypes or anything that isn't that important. But if you want to have more ownership over the design system, it's better to use Tailwind's config and set it up as it makes sense for your site. Colors are the most obvious candidates, with Tailwind you can setup your own colors and from there do `bg-active` or whatever else makes sense for your site. You can define whatever is important for your site, and fall back to the inbuilt system for the things that aren't.

Re: Building React and Vue Support for Tailwind UI

#33

Post by franciscop »

CraftThatBlock wrote: post #17
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

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

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

Re: Building React and Vue Support for Tailwind UI

#34

Post by welder »

ahuth wrote: post #28
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.

> Having IDE autocompletion would be really nice. I'm sure there's plugins that can do that.

Use withStyles [1] and vscode autocompletes without needing a plugin.

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

Re: Building React and Vue Support for Tailwind UI

#35

Post by lights0123 »

ahuth wrote: post #28
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.

VS Code and IntelliJ plugins provide just that, and the VS Code plugin goes further by showing the CSS it will expand to and show a color preview next to the class name.

Re: Building React and Vue Support for Tailwind UI

#36

Post by lights0123 »

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…

So make it. Add it to your tailwind.config.js: https://github.com/lights0123/lights0123.github.io/blob/7df7..., then use some CSS variables: https://github.com/lights0123/lights0123.github.io/blob/7df7...

Re: Building React and Vue Support for Tailwind UI

#37

Post by welder »

lxe wrote: post #31
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…

> Should your IDE know about these classes? > Can you autocomplete class names? Yes! ( https://marketplace.visualstudio.com/items?itemName=bradlc.v... ) Although I wouldn't mind an array instead so I can use the typescript typechecker.

You get type checking automatically using withStyles, no plugin needed. That plugin is kinda cool with the css preview feature, but I bet using the built-in IDE autocomplete is more reliable. I also find withStyles more readable in general, for ex:

theme: {

  button: {

    primary: {

      color: 'blue',

      padding: '2px',

    },

  },
}

vs. tailwind classes:

Re: Building React and Vue Support for Tailwind UI

#38

Post by 734129837261 »

Tailwind is the weirdest thing I've ever ran across. It's basically inline CSS.

Personally, I write CSS this way:

1. Select based on cascaded semantic HTML elements; 2. Don't repeat yourself; 3. No unnecessary classnames; 4. No style-descriptions in classnames.

Only when you have troubles selecting an element based on its position in your DOM you should choose a classname. It should not be ".text-gray-500" (like Tailwind does) but it should be "p.author-role".

In my case the classname is semantically descriptive whereas Tailwind is not. In my case you just need to update the CSS and in the case of Tailwind you need to change your HTML and then probably also create a new CSS class.

But still, ideally, you'd simply select it like this:

The author name:

    figure.author figcaption h5 { ... }
The author role:

    figure.author figcaption h6 { ... }
And even the .author selector would be optional, depending on whether that figure elements needs custom styling that is exclusive to the author or not.

Re: Building React and Vue Support for Tailwind UI

#39

Post by switz »

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'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.
or
or
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.

Re: Building React and Vue Support for Tailwind UI

#40

Post by jeswin »

franciscop wrote: post #33
CraftThatBlock wrote: post #17

Earlier quoted context omitted.

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

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

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.
Post reply on HN