9 ms·

Vanilla JavaScript support for Tailwind Plus

304 points by ulrischa 1y ago

paranoidxprod 1y ago
Would love to know how they went about implementing these. I always find custom elements interesting. I know the guys over at data-star.dev used one to implement their inspector element, but unfortunately that is also behind pro. I know Lit is used a lot but I’m always looking for new approaches.
- gavinray 1y ago
  It's explained in the post.
  - paranoidxprod 1y ago
    I mean they mention the built in browser features they use, but make no mention of the actual authoring of the components unless I’m missing something. I’m curious if they’re leaning on existing frameworks for authoring web components or if they’re implementing them from scratch.
  - cluckindan 1y ago
    They don’t mention whether the custom elements are using shadow root and whether it’s open or closed mode. That has implications for event handling and style encapsulation.
    - owebmaster 1y ago
      it is easy to check using inspect. They are not using shadowDOM which is great.
- WorldMaker 1y ago
  Since you are asking about other approaches, I've been doing some interesting and simple custom elements with my Knockout-inspired view engine [0]. I built an open source MPA application with a bunch of them [1]. I even gave a brief presentation on it [2] (each PR starting with #2 is a "slide"; I presented it in a "Presentation" profile for VS Code opening the numbered files in order, with the Live Preview extension side-by-side with a simple git alias to jump to "slide" merge commit based on PR number; I thought it went well to show off Developer Experience). My biggest advice appears to be: remember that the Shadow DOM is optional. [0] https://worldmaker.net/butterfloat/guides/web-components/ https://worldmaker.net/butterfloat/guides/web-components/ [1] https://github.com/WorldMaker/jocobookclub/tree/main/src/bf https://github.com/WorldMaker/jocobookclub/tree/main/src/bf [2] https://github.com/WorldMaker/butterfloat-presentation/pulls?q=is%3Apr+is%3Aclosed https://github.com/WorldMaker/butterfloat-presentation/pulls...
nodesocket 1y ago
I use DaisyUI in combination with Tailwind but it certainly has some JS backing.
rafram 1y ago
> You can even build something as sophisticated as a custom command palette with Elements Well, yeah, because they added an `<el-command-palette>` that specifically does that.
vFunct 1y ago
Would this work with DaisyUI components?
- nop_slide 1y ago
  I don't see why not. I imagine the css classes in the examples are simply for styling, as long as you nest and structure the custom elements themselves correctly I imagine you should be able to style them as you wish. I have a daisyui project too, so I might try this later.
bikeshaving 1y ago
This is a exciting use-case for custom elements, and probably how tailwind should have been implemented from the start, but it’s hilariously a paid feature?! (https://tailwindcss.com/plus#pricing https://tailwindcss.com/plus#pricing) Intuitively, I’d expect the custom elements to be free and the framework integrations to cost money.
- gavinray 1y ago
  Tailwind Plus is a paid collection of UI components and templates. TailwindCSS itself is meant to be nothing more than a styling tool, like Bootstrap...
  - bikeshaving 1y ago
    The title of the blog post mentions Tailwind Plus so I’m assuming it’s a paid feature. The ambiguity is probably intentional.
    - Alupis 1y ago
      It's not very expensive, all things considered. $299 for a single-user perpetual license (includes all future updates too) or about $1k for a team license[1]. If it saves you a bunch of time writing and maintaining the sort of components they are showing off, probably worth it? [1] https://tailwindcss.com/plus#pricing https://tailwindcss.com/plus#pricing
      - bikeshaving 1y ago
        Listen, I’m not against the Tailwind team getting their bag – they worked hard and created an amazing open source library. I just don’t think it’s in the interest of either users or maintainers to put vanilla JavaScript support behind a paywall. Edit: apparently all framework integrations and the whole library and functionality is behind the same paywall? And regular tailwind is just the css classes/build process that I used to know? Do people not understand how casual readers might be confused about all this?
gedy 1y ago
Tailwind is fine, but I do find it humorous that they discourage wrapping up tw classes into a component class ala Bootstrap, but they wrap html up like this: <el-dropdown class="relative inline-block text-left"> <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm ..."> Options </button> <el-menu anchor="bottom end" popover class="w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete ..."> ... </el-menu> </el-dropdown> Bootstrap: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button"> Dropdown button </button> <ul class="dropdown-menu"> ... </ul> </div> (I realize you have full control over looks with TW, but Bootstrap and others have utility classes too for the common stuff.)
- nettlin 1y ago
  When using Tailwind you’re likely to use something like React components, so your actual code is more likely to look like: <Menu> <MenuButton>Dropdown button</MenuItems> <MenuItems>…</MenuItems> </Menu> which is even better than what Bootstrap provides since you get type safety for component props (and more opportunities for customization than what Bootstrap allows)
  - notpushkin 1y ago
    Type safety is good, but the class soup inside the components is just abysmal. And honestly, more often than not I see it spilling out of the components and onto the page layouts. Design tokens are the one Tailwind feature I genuinely like. Everything else – kill it with fire. Just use whatever scoped CSS your stack does (<style> in Svelte/Vue, Emotion in React?).
    - bernawil 1y ago
      class soup is what tailwind is. It's terrible because is just abbreviations of css attributes which you still need to know because you'll inevitably fiddle around devtools trying things out. The only "smart" thing about it is leaning strongly on using rem. how can it spill out onto the page? it's inline css. The (rare) inline selectors target only descendants. Truth is that it's winning over because it works best with LLMs. Inline soup works better than looking for styling on different files in the context of the project, so here we are.
judah 1y ago
Looks like it's done using standards-based web components[0]. The page says these components don't require any existing JavaScript framework; because web component support is built-in to the browser. Nice to see devs picking up web components. [0]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...
- cchance 1y ago
  This has been soooooooo long in the making, i remember playing with webcomponents for personal stuff years ago when i didn't care about compat. Good to see mainstream libraries finally picking it up
  - oaxacaoaxaca 1y ago
    https://webawesome.com https://webawesome.com is now in beta and I couldn't be happier.
- shortrounddev2 1y ago
  We use web components at the hook for my company's advertising code but I've found them pretty thoroughly disappointing, personally. They make it simple to trigger code execution but their API isn't really that good
  - spankalee 1y ago
    The whole point is to make it simple to trigger code and to be interoperable. Then you write whatever code you want to implement the component. Web components are not analogous to frameworks because frameworks tightly couple the component interface and lifecycle hooks with the component implementations. Those are properly decoupled in web components and you bring whatever rendering layer you prefer.
    - shortrounddev2 1y ago
      Yes but their choice to abandon constructors as a primary part of the lifecycle means that adding some kind of member field to the class will leave it inherently uninitialized in the `connectedCallback`. All fields basically have to be declared as `| undefined` if you're using typescript, which leads to reall ugly code: class MyComponent extends HTMLElement { private width: number | undefined; // must be | undefined or // you'll get a typescript error constructor() { // useless, unpredictable } connectedCallback() { this.initAttributes(); // using this.width will still require an undefined check at some point } initAttributes() { this.width = Number(this.getAttribute('width')); } } If you could reliably load attributes in the constructor instead of being forced to do everything in connectedCallback (or even better, load them automatically with decorators), it would make typescript implementations much cleaner. Just some way to validate attributes before connectedCallback, or work with typescript guarantees would make this much more attractive
abtinf 1y ago
The world would be a significantly better place if someone could throw a small mountain of money at the Tailwind folks so that they can stop worrying about money and simply make the full tailwind experience freely available. There are so many lost opportunities for deep integration with other projects. Kind of like how Jeff Bezos threw a bunch of money at 37signals at some insane valuation, which helped them completely avoid the VC trap.
- jw1224 1y ago
  The “full Tailwind experience” is already freely available. What “lost opportunities for deep integration” is a frontend CSS framework missing? Tailwind Plus (the commercial product) is like buying an off-the-shelf template. It’s just a collection of themes and pre-built components — useful for devs who want to get started quickly on a project, but it’s cookie-cutter and can easily be replicated by anyone with Tailwind itself.
  - vinnymac 1y ago
    There are devs who think the currently available HTML elements are all we needed. But there are many more that believe we are missing primitives that Tailwind (and others) is attempting to solve for. > It’s just a collection of themes and pre-built components All reusable web components could be described as an optionally themed pre-built component. That's kind of the point.
  - kyriakos 1y ago
    I no longer see value in prebuilt templates since LLMs can put things together sufficiently well for prototyping. Even when using templates before you still needed to customise them. Feels like we are going through a transition period.
- brailsafe 1y ago
  > There are so many lost opportunities for deep integration with other projects. What kind of integrations are you thinking of?
- abxyz 1y ago
piyiotisk 1y ago
I would like to know how they find it in comparison to a framework like react
Imustaskforhelp 1y ago
This is the only feature I genuinely want available for tailwind free users too. Sounds really interesting and I can't even try this? That's a shame. But I understand that funding open source is never easy & I still appreciate tailwind from the bottom of my heart simply because some might hate it for what it is, but I appreciate that I have options to being with (daisy,tailwind etc.) If anyone who has ever contributed to open source is reading this. Thanks. I am a real frugal person but one day, I want to earn enough money that I can donate to you guys without hesitation and be an open source contributor too.
ayhanfuat 1y ago
I wouldn’t get too excited about it to be honest. At one time they were also supporting Vue but it is now basically abandoned.
- dawnerd 1y ago
  They also had a figma design library that went away. Kinda silly if you want to get designers on the same page.
  - GenerWork 1y ago
    At this point, the new crop of AI enhanced design tools are basically skipping vector based design and jumping right to code. A lot of them are using ShadCN/UI which is styled using Tailwind, so it's more like designers are somewhat unknowingly getting onto the same page as Tailwind.
- croes 1y ago
  It’s tailwindcss for a reason
- spankalee 1y ago
  This is Vue support. With so many frameworks out there it's infeasible to build custom wrappers for them all. With web components they can build once, and work everywhere. It's only up to the frameworks to make sure they have great web components support (which just means great HTML support).
- skrebbel 1y ago
  Vue has great web component support. Even React 19 (finally!) does. Web components are a mess but this is a great application of them: shipping reusable components that work in all frameworks. It's the one and only killer application of web components. Frankly I'm surprised they're marketing this as "for vanilla javascript" and not as a "now supports all frameworks" type positioning.
  - ayhanfuat 1y ago
deleted 1y ago
[deleted]
deleted 1y ago
[deleted]
bitbasher 1y ago
Seems like this is a move to remove alpinejs from the custom block elements in tailwindcss plus? I don't see alpinejs in the code snippets anymore. edit: Confirmed, they removed alpine from their copy/pastable code. Now you see:   This sucks because I have been using alpine and now I can't copy paste the examples ~_~
victorbjorklund 1y ago
Finally!
felipemesquita 1y ago
A love letter their rails users indeed. Congratulations to the tailwind team for shipping this! Disclosure
megaman821 1y ago
I am not a Tailwind user but I am a big fan of these "headless" web components. I have been using home-grown web components for tabs, modals, drawers, dropdown, tooltips, toasts and selects they implement functionality and accessibility with minimal styling. I use them across different projects and different solutions (Django templates, Vue, React, vanilla HTML) without any problems.
deleted 1y ago
[deleted]
ricardobeat 1y ago
<el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/dialog:scale-95 group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in"> Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.
- monkey_monkey 1y ago
  Yes I agree - it's nice to be able to see exactly what's happening without needing to dive into a rats nest of fragile CSS cascades.
  - deleted 1y ago
    [deleted]
  - skydhash 1y ago
    Why not use the web inspector? That’s usually the quickest way to see which style is applied to an element.
    - paradox460 1y ago
      People would rather have to parse out a big dumb list of classes than look at the actual list of what properties affect something, with a clear ability to drill down into them. Its madness, akin to carpenters giving up hammers, preferring to use glue, because they hit their thumb a few times by accident
      - skydhash 1y ago
        Based on the code I've seen, including written by old me, it seems more like designing the architecture of the CSS styles (and sticking to it) is something people don't like to do. Tailwind is just a tool that is nicer than using the style attribute on the element. I strongly prefer "button is-primary is-fullwidth" over the long list of tailwind classes.
patum 1y ago
[dead]
combyn8tor 1y ago
This is great. Last time I looked into this UI component world I was surprised the popular UI libraries weren't all 'headless' at their base. Web components have been around a long time now. What was stopping this approach? There are so many framework specific libraries like shadcn, and the community set about building half finished conversions for different frameworks like Vue, which are always several iterations behind and don't really work properly. They have their own version of the docs and it all relies on a specific version of Vue and a specific version of Tailwind and whatever else. It's an abomination. Start with headless UI as a base and then build wrappers for specific frameworks if you really feel the need. But the wrappers should be syntax sugar only and linked directly to the base library. I'm sure it's all more complicated than that but a man can dream.
- chrismorgan 1y ago
  Put simply: if you’re using something like React, Vue, Svelte, whatever, then Web Components are strict overhead in terms of bundle size and runtime overhead. And when there’s impedance mismatch between the two worlds, which I hear is particularly common in React (can’t attest it personally, I don’t use React), you have to compromise on functionality or ergonomics, or else do fancier bindings, at which point why even bother with Web Components? It will also commonly not play nicely with some more advanced aspects of the frameworks, like server-side rendering will probably suffer (depending on how exactly things are done). In a world where React is dominant and you’re wanting to use React yourself, targeting Web Components just doesn’t make sense. Then “headless” makes it worse. The more comprehensive implementations have a lot of overhead.
  - combyn8tor 1y ago
    Here's my put simply: We've got some UI components built with html, CSS and JavaScript. They use web standards. We want to add them into web frameworks that are built in JavaScript. They are built for html, CSS and JavaScript. No need to overcomplicate things. And for a universal component library I'll happily accept 7kb extra overhead in my 4mb React slop website
jlukic 1y ago
Working on a new version of semantic ui for authoring ui with web components and signals based reactivity without a compilation step. https://next.semantic-ui.com/ https://next.semantic-ui.com/ Has Tailwind support out of the box, just had to mod oxide to get non threaded wasm support in the browser https://next.semantic-ui.com/examples/tailwind https://next.semantic-ui.com/examples/tailwind
- owebmaster 1y ago
  This is the future of web development! > Has Tailwind support out of the box, just had to mod oxide to get non threaded wasm support in the browser have you checked unocss? might be more efficient.
mmcclure 1y ago
I love seeing a mainstream/popular project embracing web components. We've been working on a web components project for media players[1] for a while for the same reasons: Instead of being coupled to a specific JavaScript framework, these custom elements work anywhere you can use a <script> tag But...React is still the elephant in the room here. Maybe TW is just in a different world if they're truly just anticipating folks using this via a `<script>` tag, but if not, very curious how they're going to deal with some of the web component (WC) stuff we've dealt with, like: - Despite signals/promises, React 19 didn't add full support for WC. React uses a diff algorithm for reconciliation. There are some rough edges for any "complex value" cases in the incomplete solution for 19's WC support with client vs server side rendering. This results in us being required to use 'use client' for parts of our component architectures, meaning WC providers aren't able to take full advantage of SSR. - WCs are async loading, which in combination with React can have a negative impact on performance for things like core web vitals (and the dreaded cumulative layout shift). - WCs are just different from React patterns. Each WC creates a DOM element, but React components don't have to, which just inherently means different shapes of code. - React focus management libraries don't play nice with WCs. We've talked to multiple devs/companies that were excited about/using WCs that backed out because of cross-ecosystem complexities like this. - React Native is, uh....a whole thing. On a somewhat separate note...one of my complaints about TW historically has been that it feels like "just classes" (great!), yet requires a build step (oh...). I'm a little confused to see them leaning into `<script>` tags given that, so am I just missing something? [1] https://github.com/muxinc/media-chrome https://github.com/muxinc/media-chrome
jaesonaras 1y ago
I still can't justify using Tailwind. It's not that I don't like it, but I find CSS does everything I need and more, and I do some pretty complex styling and animations in CSS. I just find that at some point, Tailwind gets in the way and I revert back to plain CSS. TW invariably then just becomes another style src in the HTML.
gnarbarian 1y ago
when a front end developer encounters a minor inconvenience he can't wait to avoid it by creating a series of larger ones.
joduplessis 1y ago
I've been working with TW more lately and I must admit - there is a convenience factor there that is really nice - and it abstracts a lot of the finicky design system thinking. But, if you're building any long-term product, investing in your own design system + component library will put many many more miles on the board in terms of DX, flexibility, aesthethic language, dependency footprint, etc.
pzo 1y ago
Wish there was something like that for React Native or even Lynx. Then I would happily pay for plus bundle.
dandano 1y ago
Tailwind plus has saved me 100s of hours for my rails based development. JS was the only thing missing for me, so stoked for this.
mediumsmart 1y ago
Vanilla HTML support is in the pipeline, hang in there.
bigtex 1y ago
Make bootstrap great again.

304 points by ulrischa 1y ago

Would love to know how they went about implementing these. I always find custom elements interesting. I know the guys over at data-star.dev used one to implement their inspector element, but unfortunately that is also behind pro. I know Lit is used a lot but I’m always looking for new approaches.

gavinray 1y ago
It's explained in the post.
- paranoidxprod 1y ago
  I mean they mention the built in browser features they use, but make no mention of the actual authoring of the components unless I’m missing something. I’m curious if they’re leaning on existing frameworks for authoring web components or if they’re implementing them from scratch.
- cluckindan 1y ago
  They don’t mention whether the custom elements are using shadow root and whether it’s open or closed mode. That has implications for event handling and style encapsulation.
  - owebmaster 1y ago
    it is easy to check using inspect. They are not using shadowDOM which is great.
WorldMaker 1y ago
Since you are asking about other approaches, I've been doing some interesting and simple custom elements with my Knockout-inspired view engine [0]. I built an open source MPA application with a bunch of them [1]. I even gave a brief presentation on it [2] (each PR starting with #2 is a "slide"; I presented it in a "Presentation" profile for VS Code opening the numbered files in order, with the Live Preview extension side-by-side with a simple git alias to jump to "slide" merge commit based on PR number; I thought it went well to show off Developer Experience). My biggest advice appears to be: remember that the Shadow DOM is optional. [0] https://worldmaker.net/butterfloat/guides/web-components/ https://worldmaker.net/butterfloat/guides/web-components/ [1] https://github.com/WorldMaker/jocobookclub/tree/main/src/bf https://github.com/WorldMaker/jocobookclub/tree/main/src/bf [2] https://github.com/WorldMaker/butterfloat-presentation/pulls?q=is%3Apr+is%3Aclosed https://github.com/WorldMaker/butterfloat-presentation/pulls...

nodesocket 1y ago

I use DaisyUI in combination with Tailwind but it certainly has some JS backing.

rafram 1y ago

> You can even build something as sophisticated as a custom command palette with Elements Well, yeah, because they added an `<el-command-palette>` that specifically does that.

vFunct 1y ago

Would this work with DaisyUI components?

nop_slide 1y ago
I don't see why not. I imagine the css classes in the examples are simply for styling, as long as you nest and structure the custom elements themselves correctly I imagine you should be able to style them as you wish. I have a daisyui project too, so I might try this later.

bikeshaving 1y ago

This is a exciting use-case for custom elements, and probably how tailwind should have been implemented from the start, but it’s hilariously a paid feature?! (https://tailwindcss.com/plus#pricing https://tailwindcss.com/plus#pricing) Intuitively, I’d expect the custom elements to be free and the framework integrations to cost money.

gavinray 1y ago
Tailwind Plus is a paid collection of UI components and templates. TailwindCSS itself is meant to be nothing more than a styling tool, like Bootstrap...
- bikeshaving 1y ago
  The title of the blog post mentions Tailwind Plus so I’m assuming it’s a paid feature. The ambiguity is probably intentional.
  - Alupis 1y ago
    It's not very expensive, all things considered. $299 for a single-user perpetual license (includes all future updates too) or about $1k for a team license[1]. If it saves you a bunch of time writing and maintaining the sort of components they are showing off, probably worth it? [1] https://tailwindcss.com/plus#pricing https://tailwindcss.com/plus#pricing
    - bikeshaving 1y ago
      Listen, I’m not against the Tailwind team getting their bag – they worked hard and created an amazing open source library. I just don’t think it’s in the interest of either users or maintainers to put vanilla JavaScript support behind a paywall. Edit: apparently all framework integrations and the whole library and functionality is behind the same paywall? And regular tailwind is just the css classes/build process that I used to know? Do people not understand how casual readers might be confused about all this?

gedy 1y ago

Tailwind is fine, but I do find it humorous that they discourage wrapping up tw classes into a component class ala Bootstrap, but they wrap html up like this: <el-dropdown class="relative inline-block text-left"> <button class="inline-flex w-full justify-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm ..."> Options </button> <el-menu anchor="bottom end" popover class="w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black/5 transition transition-discrete ..."> ... </el-menu> </el-dropdown> Bootstrap: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button"> Dropdown button </button> <ul class="dropdown-menu"> ... </ul> </div> (I realize you have full control over looks with TW, but Bootstrap and others have utility classes too for the common stuff.)

nettlin 1y ago
When using Tailwind you’re likely to use something like React components, so your actual code is more likely to look like: <Menu> <MenuButton>Dropdown button</MenuItems> <MenuItems>…</MenuItems> </Menu> which is even better than what Bootstrap provides since you get type safety for component props (and more opportunities for customization than what Bootstrap allows)
- notpushkin 1y ago
  Type safety is good, but the class soup inside the components is just abysmal. And honestly, more often than not I see it spilling out of the components and onto the page layouts. Design tokens are the one Tailwind feature I genuinely like. Everything else – kill it with fire. Just use whatever scoped CSS your stack does (<style> in Svelte/Vue, Emotion in React?).
  - bernawil 1y ago
    class soup is what tailwind is. It's terrible because is just abbreviations of css attributes which you still need to know because you'll inevitably fiddle around devtools trying things out. The only "smart" thing about it is leaning strongly on using rem. how can it spill out onto the page? it's inline css. The (rare) inline selectors target only descendants. Truth is that it's winning over because it works best with LLMs. Inline soup works better than looking for styling on different files in the context of the project, so here we are.

judah 1y ago

Looks like it's done using standards-based web components[0]. The page says these components don't require any existing JavaScript framework; because web component support is built-in to the browser. Nice to see devs picking up web components. [0]: https://developer.mozilla.org/en-US/docs/Web/API/Web_components https://developer.mozilla.org/en-US/docs/Web/API/Web_compone...

cchance 1y ago
This has been soooooooo long in the making, i remember playing with webcomponents for personal stuff years ago when i didn't care about compat. Good to see mainstream libraries finally picking it up
- oaxacaoaxaca 1y ago
  https://webawesome.com https://webawesome.com is now in beta and I couldn't be happier.
shortrounddev2 1y ago
We use web components at the hook for my company's advertising code but I've found them pretty thoroughly disappointing, personally. They make it simple to trigger code execution but their API isn't really that good
- spankalee 1y ago
  The whole point is to make it simple to trigger code and to be interoperable. Then you write whatever code you want to implement the component. Web components are not analogous to frameworks because frameworks tightly couple the component interface and lifecycle hooks with the component implementations. Those are properly decoupled in web components and you bring whatever rendering layer you prefer.
  - shortrounddev2 1y ago
    Yes but their choice to abandon constructors as a primary part of the lifecycle means that adding some kind of member field to the class will leave it inherently uninitialized in the `connectedCallback`. All fields basically have to be declared as `| undefined` if you're using typescript, which leads to reall ugly code: class MyComponent extends HTMLElement { private width: number | undefined; // must be | undefined or // you'll get a typescript error constructor() { // useless, unpredictable } connectedCallback() { this.initAttributes(); // using this.width will still require an undefined check at some point } initAttributes() { this.width = Number(this.getAttribute('width')); } } If you could reliably load attributes in the constructor instead of being forced to do everything in connectedCallback (or even better, load them automatically with decorators), it would make typescript implementations much cleaner. Just some way to validate attributes before connectedCallback, or work with typescript guarantees would make this much more attractive

abtinf 1y ago

The world would be a significantly better place if someone could throw a small mountain of money at the Tailwind folks so that they can stop worrying about money and simply make the full tailwind experience freely available. There are so many lost opportunities for deep integration with other projects. Kind of like how Jeff Bezos threw a bunch of money at 37signals at some insane valuation, which helped them completely avoid the VC trap.

jw1224 1y ago
The “full Tailwind experience” is already freely available. What “lost opportunities for deep integration” is a frontend CSS framework missing? Tailwind Plus (the commercial product) is like buying an off-the-shelf template. It’s just a collection of themes and pre-built components — useful for devs who want to get started quickly on a project, but it’s cookie-cutter and can easily be replicated by anyone with Tailwind itself.
- vinnymac 1y ago
  There are devs who think the currently available HTML elements are all we needed. But there are many more that believe we are missing primitives that Tailwind (and others) is attempting to solve for. > It’s just a collection of themes and pre-built components All reusable web components could be described as an optionally themed pre-built component. That's kind of the point.
- kyriakos 1y ago
  I no longer see value in prebuilt templates since LLMs can put things together sufficiently well for prototyping. Even when using templates before you still needed to customise them. Feels like we are going through a transition period.
brailsafe 1y ago
> There are so many lost opportunities for deep integration with other projects. What kind of integrations are you thinking of?
abxyz 1y ago

piyiotisk 1y ago

I would like to know how they find it in comparison to a framework like react

Imustaskforhelp 1y ago

This is the only feature I genuinely want available for tailwind free users too. Sounds really interesting and I can't even try this? That's a shame. But I understand that funding open source is never easy & I still appreciate tailwind from the bottom of my heart simply because some might hate it for what it is, but I appreciate that I have options to being with (daisy,tailwind etc.) If anyone who has ever contributed to open source is reading this. Thanks. I am a real frugal person but one day, I want to earn enough money that I can donate to you guys without hesitation and be an open source contributor too.

ayhanfuat 1y ago

I wouldn’t get too excited about it to be honest. At one time they were also supporting Vue but it is now basically abandoned.

dawnerd 1y ago
They also had a figma design library that went away. Kinda silly if you want to get designers on the same page.
- GenerWork 1y ago
  At this point, the new crop of AI enhanced design tools are basically skipping vector based design and jumping right to code. A lot of them are using ShadCN/UI which is styled using Tailwind, so it's more like designers are somewhat unknowingly getting onto the same page as Tailwind.
croes 1y ago
It’s tailwindcss for a reason
spankalee 1y ago
This is Vue support. With so many frameworks out there it's infeasible to build custom wrappers for them all. With web components they can build once, and work everywhere. It's only up to the frameworks to make sure they have great web components support (which just means great HTML support).
skrebbel 1y ago
Vue has great web component support. Even React 19 (finally!) does. Web components are a mess but this is a great application of them: shipping reusable components that work in all frameworks. It's the one and only killer application of web components. Frankly I'm surprised they're marketing this as "for vanilla javascript" and not as a "now supports all frameworks" type positioning.
- ayhanfuat 1y ago

deleted 1y ago

[deleted]

deleted 1y ago

[deleted]

bitbasher 1y ago

Seems like this is a move to remove alpinejs from the custom block elements in tailwindcss plus? I don't see alpinejs in the code snippets anymore. edit: Confirmed, they removed alpine from their copy/pastable code. Now you see:   This sucks because I have been using alpine and now I can't copy paste the examples ~_~

victorbjorklund 1y ago

Finally!

felipemesquita 1y ago

A love letter their rails users indeed. Congratulations to the tailwind team for shipping this! Disclosure

megaman821 1y ago

I am not a Tailwind user but I am a big fan of these "headless" web components. I have been using home-grown web components for tabs, modals, drawers, dropdown, tooltips, toasts and selects they implement functionality and accessibility with minimal styling. I use them across different projects and different solutions (Django templates, Vue, React, vanilla HTML) without any problems.

deleted 1y ago

[deleted]

ricardobeat 1y ago

<el-dialog-panel class="mx-auto block max-w-3xl transform overflow-hidden rounded-xl bg-white shadow-2xl ring-1 ring-black/5 transition-all group-data-closed/dialog:scale-95 group-data-closed/dialog:opacity-0 group-data-enter/dialog:duration-300 group-data-enter/dialog:ease-out group-data-leave/dialog:duration-200 group-data-leave/dialog:ease-in"> Lovely. Verbosity aside, now on top of knowing CSS you need to learn another hierarchical system within class names.

monkey_monkey 1y ago
Yes I agree - it's nice to be able to see exactly what's happening without needing to dive into a rats nest of fragile CSS cascades.
- deleted 1y ago
  [deleted]
- skydhash 1y ago
  Why not use the web inspector? That’s usually the quickest way to see which style is applied to an element.
  - paradox460 1y ago
    People would rather have to parse out a big dumb list of classes than look at the actual list of what properties affect something, with a clear ability to drill down into them. Its madness, akin to carpenters giving up hammers, preferring to use glue, because they hit their thumb a few times by accident
    - skydhash 1y ago
      Based on the code I've seen, including written by old me, it seems more like designing the architecture of the CSS styles (and sticking to it) is something people don't like to do. Tailwind is just a tool that is nicer than using the style attribute on the element. I strongly prefer "button is-primary is-fullwidth" over the long list of tailwind classes.

patum 1y ago

[dead]

combyn8tor 1y ago

This is great. Last time I looked into this UI component world I was surprised the popular UI libraries weren't all 'headless' at their base. Web components have been around a long time now. What was stopping this approach? There are so many framework specific libraries like shadcn, and the community set about building half finished conversions for different frameworks like Vue, which are always several iterations behind and don't really work properly. They have their own version of the docs and it all relies on a specific version of Vue and a specific version of Tailwind and whatever else. It's an abomination. Start with headless UI as a base and then build wrappers for specific frameworks if you really feel the need. But the wrappers should be syntax sugar only and linked directly to the base library. I'm sure it's all more complicated than that but a man can dream.

chrismorgan 1y ago
Put simply: if you’re using something like React, Vue, Svelte, whatever, then Web Components are strict overhead in terms of bundle size and runtime overhead. And when there’s impedance mismatch between the two worlds, which I hear is particularly common in React (can’t attest it personally, I don’t use React), you have to compromise on functionality or ergonomics, or else do fancier bindings, at which point why even bother with Web Components? It will also commonly not play nicely with some more advanced aspects of the frameworks, like server-side rendering will probably suffer (depending on how exactly things are done). In a world where React is dominant and you’re wanting to use React yourself, targeting Web Components just doesn’t make sense. Then “headless” makes it worse. The more comprehensive implementations have a lot of overhead.
- combyn8tor 1y ago
  Here's my put simply: We've got some UI components built with html, CSS and JavaScript. They use web standards. We want to add them into web frameworks that are built in JavaScript. They are built for html, CSS and JavaScript. No need to overcomplicate things. And for a universal component library I'll happily accept 7kb extra overhead in my 4mb React slop website

jlukic 1y ago

Working on a new version of semantic ui for authoring ui with web components and signals based reactivity without a compilation step. https://next.semantic-ui.com/ https://next.semantic-ui.com/ Has Tailwind support out of the box, just had to mod oxide to get non threaded wasm support in the browser https://next.semantic-ui.com/examples/tailwind https://next.semantic-ui.com/examples/tailwind

owebmaster 1y ago
This is the future of web development! > Has Tailwind support out of the box, just had to mod oxide to get non threaded wasm support in the browser have you checked unocss? might be more efficient.

mmcclure 1y ago

I love seeing a mainstream/popular project embracing web components. We've been working on a web components project for media players[1] for a while for the same reasons: Instead of being coupled to a specific JavaScript framework, these custom elements work anywhere you can use a <script> tag But...React is still the elephant in the room here. Maybe TW is just in a different world if they're truly just anticipating folks using this via a `<script>` tag, but if not, very curious how they're going to deal with some of the web component (WC) stuff we've dealt with, like: - Despite signals/promises, React 19 didn't add full support for WC. React uses a diff algorithm for reconciliation. There are some rough edges for any "complex value" cases in the incomplete solution for 19's WC support with client vs server side rendering. This results in us being required to use 'use client' for parts of our component architectures, meaning WC providers aren't able to take full advantage of SSR. - WCs are async loading, which in combination with React can have a negative impact on performance for things like core web vitals (and the dreaded cumulative layout shift). - WCs are just different from React patterns. Each WC creates a DOM element, but React components don't have to, which just inherently means different shapes of code. - React focus management libraries don't play nice with WCs. We've talked to multiple devs/companies that were excited about/using WCs that backed out because of cross-ecosystem complexities like this. - React Native is, uh....a whole thing. On a somewhat separate note...one of my complaints about TW historically has been that it feels like "just classes" (great!), yet requires a build step (oh...). I'm a little confused to see them leaning into `<script>` tags given that, so am I just missing something? [1] https://github.com/muxinc/media-chrome https://github.com/muxinc/media-chrome

jaesonaras 1y ago

I still can't justify using Tailwind. It's not that I don't like it, but I find CSS does everything I need and more, and I do some pretty complex styling and animations in CSS. I just find that at some point, Tailwind gets in the way and I revert back to plain CSS. TW invariably then just becomes another style src in the HTML.

gnarbarian 1y ago

when a front end developer encounters a minor inconvenience he can't wait to avoid it by creating a series of larger ones.

joduplessis 1y ago

I've been working with TW more lately and I must admit - there is a convenience factor there that is really nice - and it abstracts a lot of the finicky design system thinking. But, if you're building any long-term product, investing in your own design system + component library will put many many more miles on the board in terms of DX, flexibility, aesthethic language, dependency footprint, etc.

pzo 1y ago

Wish there was something like that for React Native or even Lynx. Then I would happily pay for plus bundle.

dandano 1y ago

Tailwind plus has saved me 100s of hours for my rails based development. JS was the only thing missing for me, so stoked for this.

mediumsmart 1y ago

Vanilla HTML support is in the pipeline, hang in there.

bigtex 1y ago

Make bootstrap great again.