> 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.<p>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.
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.<p>This part from the blog post kind of confused me a bit, though.<p>"The promise of Tailwind UI is that it's just a code snippet"<p>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?
This is so ugly and error prone:<p><Button className="bg-gray-100 rounded-full flex" ...<p>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:<p>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.<p>[1] <a href="https://github.com/airbnb/react-with-styles" rel="nofollow">https://github.com/airbnb/react-with-styles</a><p>[2] <a href="https://reactjs.org/docs/react-api.html#reactpurecomponent" rel="nofollow">https://reactjs.org/docs/react-api.html#reactpurecomponent</a>
This is great work, congrats on shipping a great product. I use TailwindCSS on my personal website.<p>I often wonder whether we need yet another UI framework implementation? I touched on this in my post a couple days ago: <a href="https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-frameworks" rel="nofollow">https://williamhoyle.ca/blog/2021/vue-has-too-many-ui-framew...</a><p>To summarize:<p>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?<p>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.<p>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...).<p>I'm a Vue guy, but I think my argument still stands for the React ecosystem.
What an effing great article. Not only for the clarity and care behind the writing, but also for useful links like [0].<p>Adam's (author) podcast Full Stack Radio is useful like this too [1].<p>[0] <a href="https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-links.html" rel="nofollow">https://www.w3.org/TR/wai-aria-practices/examples/menu-butto...</a><p>[1] <a href="https://fullstackradio.com/" rel="nofollow">https://fullstackradio.com/</a>
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.<p>I even built something like Tailwind UI but for Chakra (link is in my bio if you want to check it out)
Super interesting to read this. Especially how you eventually bridged HTML to React/Vue. Thanks for sharing!<p>One year ago I had to do something similar and used Web Components (<a href="https://www.robinwieruch.de/react-web-components" rel="nofollow">https://www.robinwieruch.de/react-web-components</a>). Did you consider using Web Components or a Web Components library such as lit-html in the first place?
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).<p>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".<p>So given this announcement, in my situation would you recommend against vanilla JS, and instead to adopt one of React or Vue?
Ah I'm not a huge fan of this:<p><pre><code> <Menu.Items className="absolute mt-1 right-0">
</code></pre>
I'd prefer it to be like this:<p><pre><code> <Menu.Items absolute mt-1 right-0>
</code></pre>
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
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?
Tailwind is the weirdest thing I've ever ran across. It's basically inline CSS.<p>Personally, I write CSS this way:<p>1. Select based on cascaded semantic HTML elements;
2. Don't repeat yourself;
3. No unnecessary classnames;
4. No style-descriptions in classnames.<p>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".<p>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.<p>But still, ideally, you'd simply select it like this:<p>The author name:<p><pre><code> figure.author figcaption h5 { ... }
</code></pre>
The author role:<p><pre><code> figure.author figcaption h6 { ... }
</code></pre>
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.
Honestly, the only two things missing in Tailwind for me are:<p>1. @apply as a JS function that I can use in CSS in JS.<p>2. Some way to override existing Tailwind classes with new ones (ex: Generic Button => Specialized Button => Unique Button).