17 ms·

Building React and Vue Support for Tailwind UI

286 points by shayac2 5y ago

CapriciousCptl 5y ago
Well this completely deprecates my personal react/tailwindui library starting on tax day. I guess that’s good!
- crad 5y ago
  Same here :)
deleted 5y ago
[deleted]
ssijak 5y ago
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)
- crad 5y ago
  I think you missed the point as an opportunity to pitch your project.
  - ssijak 5y ago
    Not really. I like TailwindCSS, I used it in several smaller projects before. But then I found about Styled System and later ChakraUI and never looked back. I really think ChakraUI is TailwindCSS on steroids for React and recommend everybody who is working with React to at least check it out.
- deergomoo 5y ago
  “If we catered to React developers, we'd be making it harder to use for the 70% of people not using React.” Third paragraph of the article
  - sync 5y ago
    Chakra UI is available for Vue as well: https://vue.chakra-ui.com https://vue.chakra-ui.com
- 5Qn8mNbc2FNCiVV 5y ago
  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 easy overriding, theming is a mess (especially if you want Typescript support again for your custom variants) and it's sometimes buggy with the way DOM events are handled (the checkbox being the biggest offender). At some point the frontend also randomly crashed for me because of the Popover component and it's usage of Popper.js
  - theturtletalks 5y ago
    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.
  - nwienert 5y ago
    Check out SnackUI, which solves most of this with typed components.
- fnordsensei 5y ago
  As someone living in ClojureScript land, I’m really happy that someone is giving me a decomposed/decomplected option for these things. Headless UI is some of the nicest React components I’ve worked with via interop, and to me it’s really valuable that they don’t come with an opinionated way of styling them.
- Vinnl 5y ago
  That would negate some of the reasons for using Tailwind in the first place, like the flexibility to make a design be specific to your use case despite the guard rails of the basic constraints (Styled System provides this on its own) combined with very simple tooling with no runtime overhead.
brundolf 5y ago
> We crawl this document as an AST, and actually transform it into four formats...The key to getting sensible output is really just having total control of the input format. It's still hard work, but when you can encode the intent of each example into a custom input format, converting that to another format turns out so much better than trying to write something that can convert arbitrary jQuery to React or something. One tends to think of parsing/compiling as a fairly esoteric skillset that a relatively small number of programmers ever actually need at their jobs, but it always makes me glad to see examples like this where a little DSL was a genuine boon to productivity in a real product. Once you know how to do it, you start to notice more and more little opportunities where it could be useful.
- de6u99er 5y ago
  That's a great comment. I might use it in the field.
  - brundolf 5y ago
    You always have to check yourself and make sure it'll genuinely be helpful, because it's so tempting to do :) But that said, I had a good usecase of my own a couple months ago where a little s-expression-based DSL was just the ticket to open up some data analysis functionality to internal users without having to prematurely build out a super complex, much more rigid GUI. DSLs are really just small, hyper-flexible user interfaces. Once you frame it that way, there are many applications. (The drawback of course is discoverability/feedback, which GUIs excel at, so you have to balance the two for your usecase)
- Scarbutt 5y ago
  One tends to think of parsing/compiling as a fairly esoteric skillset that a relatively small number of programmers Parsing is the easy/not so interesting part of a compiler.
  - anitil 5y ago
    Someone on here made the comment a little while ago that while that is true for compiler makers, parsing is the much more useful skill for the average programmer. It allows you to approach a new realm of problems that are otherwise off limits. So while looking back it may seem like a gentle incline, to a lot of us looking forward it is a steep cliff.
mike1o1 5y ago
Tailwind and Tailwind UI are really great. Tailwind UI as a series of blueprints is exactly what I'm looking for and I love how often they're updating and adding new blueprints to their list of components. This part from the blog post kind of confused me a bit, though. "The promise of Tailwind UI is that it's just a code snippet" Am I the only one who never looks at the code snippets/tab for Tailwind UI, and instead jumps straight into inspect element? As blueprints the components are great, but I almost always want to make some small tweaks or changes to fit my application. Are there other people out there actually copying/pasting the snippets as they are?
- aidos 5y ago
  I’m not sure I get the difference between looking at the source vs inspecting it? In any case, they’re not expecting you to outright copy them (though you can if you want), they’re saying that the code snippet has everything you need just by copying it.
  - mike1o1 5y ago
    I guess for me I have trouble visualizing all of the elements and classes just by looking at the code snippets. Looking at them in the DOM allows me to see them in context, and I find to be easier to use than looking at the underlying code snippet.
- PaulWaldman 5y ago
  Agreed. One reason I find is that I generally use the componentized examples and when put together they lack consistency. Maybe if you lean toward the full page examples it could be used "as is".
- davidwparker 5y ago
  I almost always copy + paste them, but then start tweaking them in my app. It's easier to just start fresh then change after in my app than trying to do things in the console.
- tshaddox 5y ago
  I’m the same way, but that’s because I don’t use Tailwind (the CSS library) and have no plans to use it. I just like the clean design work and some useful CSS techniques and tricks in Tailwind UI!
franciscop 5y ago
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
- CraftThatBlock 5y ago
  A big issue I see with this is that having custom classes (the whole extensibility point), at least in TypeScript (without re-declaring them).
  - franciscop 5y ago
    If typescript is an issue don't use it ;)
    - jeswin 5y ago
      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 5y ago
    I investigated figuring this part out. Theoretically you could build a postcss plugin that generates the proper typescript types. It would be difficult.
- natural219 5y ago
  Blurring the line between attributes/react props and CSS classes seems abhorrent to me, but just my two cents
  - mgerullis 5y ago
welder 5y ago
This is so ugly and error prone: <Button className="bg-gray-100 rounded-full flex" ... 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 https://github.com/airbnb/react-with-styles [2] https://reactjs.org/docs/react-api.html#reactpurecomponent https://reactjs.org/docs/react-api.html#reactpurecomponent
- nailer 5y ago
  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)`.
  - lights0123 5y ago
    So make it. Add it to your tailwind.config.js: https://github.com/lights0123/lights0123.github.io/blob/7df721f715acb333eeb40b1f2361c934f08abc88/tailwind.config.js#L36-L43 https://github.com/lights0123/lights0123.github.io/blob/7df7..., then use some CSS variables: https://github.com/lights0123/lights0123.github.io/blob/7df721f715acb333eeb40b1f2361c934f08abc88/src/assets/main.scss#L23-L50 https://github.com/lights0123/lights0123.github.io/blob/7df7...
    - 5y ago
734129837261 5y ago
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.
- mike1o1 5y ago
  This comes up almost every time, but it's not "basically inline CSS". The best thing about Tailwind (and utility classes in general) is that it forces you to use consistent measurements across your app. "Shoot, was this 13px padding or 14px padding on the other page?" Don't worry about it, just use "p-4, p-6, etc.". Thinking in these terms becomes really powerful. Another great thing as that you just simply don't have to think about what to name things! I find that so liberating, to be honest, and I don't have to keep switching back and forth between my markup and my css. I don't have to worry about coming up with semantically descriptive names. I just use "text-gray-500". Was this .authorrole? Or was it .authoremail? Hmm, now I want to display an author nickname. Do I just repeat "authorname" class? I find it so freeing to basically not have to worry about this stuff at all.
  - welder 5y ago
    There's a better way to get consistent measurements without having to remember class names: Use withStyles[1] and have a spacings namespace in your theme. Use the spacing in your component like spacing.button, which applies an Object containing the correct CSS padding, or spacing.padding.medium for the raw number. [1] https://github.com/airbnb/react-with-styles https://github.com/airbnb/react-with-styles
pansa2 5y ago
I'm currently using Tailwind CSS to style a fairly simple static website that's being generated using Hugo. I've been considering using some Tailwind UI components, e.g. modals (in particular, lightboxes to show zoomed-in versions of images). I assumed that I would use Tailwind UI's HTML for these and write vanilla JS for interactivity, but now I am rethinking, especially having read this quote in the article: "If we tried to write it in custom vanilla JS, well we'd be making it harder for literally everyone". So given this announcement, in my situation would you recommend against vanilla JS, and instead to adopt one of React or Vue?
- JohnCurran 5y ago
  Look in to alpine.js - pairs very nicely with Tailwind
  - pansa2 5y ago
    Thanks - Alpine.js looks like an appropriate choice in general, but unfortunately it’s not supported by these particular components. However, the announcement does say “we're looking forward to exploring other frameworks in the future (Alpine.js is next on our list)”. I’d be interested to know whether Alpine.js support is “coming soon” or “maybe eventually”.
    - iudqnolq 5y ago
      They're already generating hacky alpine to power their interactive examples, so I'd guess soonish.
willhoyle 5y ago
This is great work, congrats on shipping a great product. I use TailwindCSS on my personal website. I often wonder whether we need yet another UI framework implementation? I touched on this in my post a couple days ago: https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-frameworks https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-framew... To summarize: We have 20+ UI frameworks written in Vue. Surely there's enough common ground/code to combine the implementation details for all these common components. For example, OP mentioned the complexities of implementing a modal with some corner cases for 'ESC' behaviour. This is a universal concept whether you're using WidgetUI or TailwindUI. How many times are we going to re-implement a modal/button/dialog/menu? We have to learn another set of APIs, props, component names, etc... Of course, no one is forcing us to use this. But it seems like we're going in circles re-implementing the same UI patterns over and over again. I wish we could standardize on a library. Imagine just pulling in GenericUI and sprinkling in your CSS of choice (e.g. tailwindCSS, Bulma, Material, etc...). I'm a Vue guy, but I think my argument still stands for the React ecosystem.
- tasogare 5y ago
  > I often wonder whether we need yet another UI framework implementation? Because the web wasn’t designed for applications UI interfaces (hence the CSS grid which landed only in 2017), so it lacks basic primitives and behaviors that are then re-implemented slightly differently by different people. On the contrary, a UI framework designed for this such as the Windows Forms on Windows desktop is still very usable (and used) to make applications, 20 years after its release; and is only concurrenced by a single newer framework (WPF) which actually brings a lot of improvements on the table. Actually the web does it half-way: there are a set of common elements (input text, button, etc.) but some useful components are missing, and some of the existing one are hard to style. This support should be added in browsers, then custom code wouldn’t be needed anymore.
  - pbowyer 5y ago
    There is an ongoing effort at https://open-ui.org/ https://open-ui.org/ to add these basic primatives. I'm throwing my effort behind the <select> replacement and we welcome input from everyone. If I can avoid writing another autocomplete and solving the Esc corner cases, the effort will have been worthwhile...
AlchemistCamp 5y ago
It would be great to see AlpineJS as a first class option here, especially since it's already there in the source for the examples.
ablekh 5y ago
Could someone clarify why / when would it make sense to use Tailwind UI with upcoming Vue support versus just using one of also very popular Vue component libraries, such as PrimeVue or Quasar?
sudhirj 5y ago
I thought I’d be getting a couple of examples of nicely designed components, but this an excellent example of getting my money’s worth and more.
rwieruch 5y ago
Super interesting to read this. Especially how you eventually bridged HTML to React/Vue. Thanks for sharing! One year ago I had to do something similar and used Web Components (https://www.robinwieruch.de/react-web-components https://www.robinwieruch.de/react-web-components). Did you consider using Web Components or a Web Components library such as lit-html in the first place?
sbacic 5y ago
Honestly, the only two things missing in Tailwind for me are: 1. @apply as a JS function that I can use in CSS in JS. 2. Some way to override existing Tailwind classes with new ones (ex: Generic Button => Specialized Button => Unique Button).
- ereveles 5y ago
  Not sure if this would work for you for 1, but I love using Tailwind with https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro
brianzelip 5y ago
What an effing great article. Not only for the clarity and care behind the writing, but also for useful links like [0]. Adam's (author) podcast Full Stack Radio is useful like this too [1]. [0] https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html https://www.w3.org/TR/wai-aria-practices/examples/menu-butto... [1] https://fullstackradio.com/ https://fullstackradio.com/
- janjones 5y ago
  Indexing your references from zero. Cool, haven't seen that before :D
deleted 5y ago
[deleted]
connorlay 5y ago
I'm using Tailwind right now on a Phoenix Live View project and I am happy to report the two work quite well together.

286 points by shayac2 5y ago

CapriciousCptl 5y ago

Well this completely deprecates my personal react/tailwindui library starting on tax day. I guess that’s good!

crad 5y ago
Same here :)

deleted 5y ago

[deleted]

ssijak 5y ago

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)

crad 5y ago
I think you missed the point as an opportunity to pitch your project.
- ssijak 5y ago
  Not really. I like TailwindCSS, I used it in several smaller projects before. But then I found about Styled System and later ChakraUI and never looked back. I really think ChakraUI is TailwindCSS on steroids for React and recommend everybody who is working with React to at least check it out.
deergomoo 5y ago
“If we catered to React developers, we'd be making it harder to use for the 70% of people not using React.” Third paragraph of the article
- sync 5y ago
  Chakra UI is available for Vue as well: https://vue.chakra-ui.com https://vue.chakra-ui.com
5Qn8mNbc2FNCiVV 5y ago
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 easy overriding, theming is a mess (especially if you want Typescript support again for your custom variants) and it's sometimes buggy with the way DOM events are handled (the checkbox being the biggest offender). At some point the frontend also randomly crashed for me because of the Popover component and it's usage of Popper.js
- theturtletalks 5y ago
  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.
- nwienert 5y ago
  Check out SnackUI, which solves most of this with typed components.
fnordsensei 5y ago
As someone living in ClojureScript land, I’m really happy that someone is giving me a decomposed/decomplected option for these things. Headless UI is some of the nicest React components I’ve worked with via interop, and to me it’s really valuable that they don’t come with an opinionated way of styling them.
Vinnl 5y ago
That would negate some of the reasons for using Tailwind in the first place, like the flexibility to make a design be specific to your use case despite the guard rails of the basic constraints (Styled System provides this on its own) combined with very simple tooling with no runtime overhead.

brundolf 5y ago

> We crawl this document as an AST, and actually transform it into four formats...The key to getting sensible output is really just having total control of the input format. It's still hard work, but when you can encode the intent of each example into a custom input format, converting that to another format turns out so much better than trying to write something that can convert arbitrary jQuery to React or something. One tends to think of parsing/compiling as a fairly esoteric skillset that a relatively small number of programmers ever actually need at their jobs, but it always makes me glad to see examples like this where a little DSL was a genuine boon to productivity in a real product. Once you know how to do it, you start to notice more and more little opportunities where it could be useful.

de6u99er 5y ago
That's a great comment. I might use it in the field.
- brundolf 5y ago
  You always have to check yourself and make sure it'll genuinely be helpful, because it's so tempting to do :) But that said, I had a good usecase of my own a couple months ago where a little s-expression-based DSL was just the ticket to open up some data analysis functionality to internal users without having to prematurely build out a super complex, much more rigid GUI. DSLs are really just small, hyper-flexible user interfaces. Once you frame it that way, there are many applications. (The drawback of course is discoverability/feedback, which GUIs excel at, so you have to balance the two for your usecase)
Scarbutt 5y ago
One tends to think of parsing/compiling as a fairly esoteric skillset that a relatively small number of programmers Parsing is the easy/not so interesting part of a compiler.
- anitil 5y ago
  Someone on here made the comment a little while ago that while that is true for compiler makers, parsing is the much more useful skill for the average programmer. It allows you to approach a new realm of problems that are otherwise off limits. So while looking back it may seem like a gentle incline, to a lot of us looking forward it is a steep cliff.

mike1o1 5y ago

Tailwind and Tailwind UI are really great. Tailwind UI as a series of blueprints is exactly what I'm looking for and I love how often they're updating and adding new blueprints to their list of components. This part from the blog post kind of confused me a bit, though. "The promise of Tailwind UI is that it's just a code snippet" Am I the only one who never looks at the code snippets/tab for Tailwind UI, and instead jumps straight into inspect element? As blueprints the components are great, but I almost always want to make some small tweaks or changes to fit my application. Are there other people out there actually copying/pasting the snippets as they are?

aidos 5y ago
I’m not sure I get the difference between looking at the source vs inspecting it? In any case, they’re not expecting you to outright copy them (though you can if you want), they’re saying that the code snippet has everything you need just by copying it.
- mike1o1 5y ago
  I guess for me I have trouble visualizing all of the elements and classes just by looking at the code snippets. Looking at them in the DOM allows me to see them in context, and I find to be easier to use than looking at the underlying code snippet.
PaulWaldman 5y ago
Agreed. One reason I find is that I generally use the componentized examples and when put together they lack consistency. Maybe if you lean toward the full page examples it could be used "as is".
davidwparker 5y ago
I almost always copy + paste them, but then start tweaking them in my app. It's easier to just start fresh then change after in my app than trying to do things in the console.
tshaddox 5y ago
I’m the same way, but that’s because I don’t use Tailwind (the CSS library) and have no plans to use it. I just like the clean design work and some useful CSS techniques and tricks in Tailwind UI!

franciscop 5y ago

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

CraftThatBlock 5y ago
A big issue I see with this is that having custom classes (the whole extensibility point), at least in TypeScript (without re-declaring them).
- franciscop 5y ago
  If typescript is an issue don't use it ;)
  - jeswin 5y ago
    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 5y ago
  I investigated figuring this part out. Theoretically you could build a postcss plugin that generates the proper typescript types. It would be difficult.
natural219 5y ago
Blurring the line between attributes/react props and CSS classes seems abhorrent to me, but just my two cents
- mgerullis 5y ago

welder 5y ago

This is so ugly and error prone: <Button className="bg-gray-100 rounded-full flex" ... 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 https://github.com/airbnb/react-with-styles [2] https://reactjs.org/docs/react-api.html#reactpurecomponent https://reactjs.org/docs/react-api.html#reactpurecomponent

nailer 5y ago
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)`.
- lights0123 5y ago
  So make it. Add it to your tailwind.config.js: https://github.com/lights0123/lights0123.github.io/blob/7df721f715acb333eeb40b1f2361c934f08abc88/tailwind.config.js#L36-L43 https://github.com/lights0123/lights0123.github.io/blob/7df7..., then use some CSS variables: https://github.com/lights0123/lights0123.github.io/blob/7df721f715acb333eeb40b1f2361c934f08abc88/src/assets/main.scss#L23-L50 https://github.com/lights0123/lights0123.github.io/blob/7df7...
  - 5y ago

734129837261 5y ago

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.

mike1o1 5y ago
This comes up almost every time, but it's not "basically inline CSS". The best thing about Tailwind (and utility classes in general) is that it forces you to use consistent measurements across your app. "Shoot, was this 13px padding or 14px padding on the other page?" Don't worry about it, just use "p-4, p-6, etc.". Thinking in these terms becomes really powerful. Another great thing as that you just simply don't have to think about what to name things! I find that so liberating, to be honest, and I don't have to keep switching back and forth between my markup and my css. I don't have to worry about coming up with semantically descriptive names. I just use "text-gray-500". Was this .authorrole? Or was it .authoremail? Hmm, now I want to display an author nickname. Do I just repeat "authorname" class? I find it so freeing to basically not have to worry about this stuff at all.
- welder 5y ago
  There's a better way to get consistent measurements without having to remember class names: Use withStyles[1] and have a spacings namespace in your theme. Use the spacing in your component like spacing.button, which applies an Object containing the correct CSS padding, or spacing.padding.medium for the raw number. [1] https://github.com/airbnb/react-with-styles https://github.com/airbnb/react-with-styles

pansa2 5y ago

I'm currently using Tailwind CSS to style a fairly simple static website that's being generated using Hugo. I've been considering using some Tailwind UI components, e.g. modals (in particular, lightboxes to show zoomed-in versions of images). I assumed that I would use Tailwind UI's HTML for these and write vanilla JS for interactivity, but now I am rethinking, especially having read this quote in the article: "If we tried to write it in custom vanilla JS, well we'd be making it harder for literally everyone". So given this announcement, in my situation would you recommend against vanilla JS, and instead to adopt one of React or Vue?

JohnCurran 5y ago
Look in to alpine.js - pairs very nicely with Tailwind
- pansa2 5y ago
  Thanks - Alpine.js looks like an appropriate choice in general, but unfortunately it’s not supported by these particular components. However, the announcement does say “we're looking forward to exploring other frameworks in the future (Alpine.js is next on our list)”. I’d be interested to know whether Alpine.js support is “coming soon” or “maybe eventually”.
  - iudqnolq 5y ago
    They're already generating hacky alpine to power their interactive examples, so I'd guess soonish.

willhoyle 5y ago

This is great work, congrats on shipping a great product. I use TailwindCSS on my personal website. I often wonder whether we need yet another UI framework implementation? I touched on this in my post a couple days ago: https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-frameworks https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-framew... To summarize: We have 20+ UI frameworks written in Vue. Surely there's enough common ground/code to combine the implementation details for all these common components. For example, OP mentioned the complexities of implementing a modal with some corner cases for 'ESC' behaviour. This is a universal concept whether you're using WidgetUI or TailwindUI. How many times are we going to re-implement a modal/button/dialog/menu? We have to learn another set of APIs, props, component names, etc... Of course, no one is forcing us to use this. But it seems like we're going in circles re-implementing the same UI patterns over and over again. I wish we could standardize on a library. Imagine just pulling in GenericUI and sprinkling in your CSS of choice (e.g. tailwindCSS, Bulma, Material, etc...). I'm a Vue guy, but I think my argument still stands for the React ecosystem.

tasogare 5y ago
> I often wonder whether we need yet another UI framework implementation? Because the web wasn’t designed for applications UI interfaces (hence the CSS grid which landed only in 2017), so it lacks basic primitives and behaviors that are then re-implemented slightly differently by different people. On the contrary, a UI framework designed for this such as the Windows Forms on Windows desktop is still very usable (and used) to make applications, 20 years after its release; and is only concurrenced by a single newer framework (WPF) which actually brings a lot of improvements on the table. Actually the web does it half-way: there are a set of common elements (input text, button, etc.) but some useful components are missing, and some of the existing one are hard to style. This support should be added in browsers, then custom code wouldn’t be needed anymore.
- pbowyer 5y ago
  There is an ongoing effort at https://open-ui.org/ https://open-ui.org/ to add these basic primatives. I'm throwing my effort behind the <select> replacement and we welcome input from everyone. If I can avoid writing another autocomplete and solving the Esc corner cases, the effort will have been worthwhile...

AlchemistCamp 5y ago

It would be great to see AlpineJS as a first class option here, especially since it's already there in the source for the examples.

ablekh 5y ago

Could someone clarify why / when would it make sense to use Tailwind UI with upcoming Vue support versus just using one of also very popular Vue component libraries, such as PrimeVue or Quasar?

sudhirj 5y ago

I thought I’d be getting a couple of examples of nicely designed components, but this an excellent example of getting my money’s worth and more.

rwieruch 5y ago

Super interesting to read this. Especially how you eventually bridged HTML to React/Vue. Thanks for sharing! One year ago I had to do something similar and used Web Components (https://www.robinwieruch.de/react-web-components https://www.robinwieruch.de/react-web-components). Did you consider using Web Components or a Web Components library such as lit-html in the first place?

sbacic 5y ago

Honestly, the only two things missing in Tailwind for me are: 1. @apply as a JS function that I can use in CSS in JS. 2. Some way to override existing Tailwind classes with new ones (ex: Generic Button => Specialized Button => Unique Button).

ereveles 5y ago
Not sure if this would work for you for 1, but I love using Tailwind with https://github.com/ben-rogerson/twin.macro https://github.com/ben-rogerson/twin.macro

brianzelip 5y ago

What an effing great article. Not only for the clarity and care behind the writing, but also for useful links like [0]. Adam's (author) podcast Full Stack Radio is useful like this too [1]. [0] https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html https://www.w3.org/TR/wai-aria-practices/examples/menu-butto... [1] https://fullstackradio.com/ https://fullstackradio.com/

janjones 5y ago
Indexing your references from zero. Cool, haven't seen that before :D

deleted 5y ago

[deleted]

connorlay 5y ago

I'm using Tailwind right now on a Phoenix Live View project and I am happy to report the two work quite well together.