[HN Gopher] Vanilla JavaScript support for Tailwind Plus
___________________________________________________________________
Vanilla JavaScript support for Tailwind Plus
Author : ulrischa
Score : 176 points
Date : 2025-07-25 18:11 UTC (4 hours ago)
(HTM) web link (tailwindcss.com)
(TXT) w3m dump (tailwindcss.com)
| paranoidxprod wrote:
| 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 wrote:
| It's explained in the post.
| paranoidxprod wrote:
| 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 wrote:
| 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 wrote:
| it is easy to check using inspect. They are not using
| shadowDOM which is great.
| WorldMaker wrote:
| 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/
|
| [1] https://github.com/WorldMaker/jocobookclub/tree/main/src/bf
|
| [2] https://github.com/WorldMaker/butterfloat-
| presentation/pulls...
| nodesocket wrote:
| I use DaisyUI in combination with Tailwind but it certainly has
| some JS backing.
| rafram wrote:
| > 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 wrote:
| Would this work with DaisyUI components?
| nop_slide wrote:
| 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 wrote:
| 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) Intuitively, I'd expect
| the custom elements to be free and the framework integrations to
| cost money.
| gavinray wrote:
| 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 wrote:
| The title of the blog post mentions Tailwind Plus so I'm
| assuming it's a paid feature. The ambiguity is probably
| intentional.
| Alupis wrote:
| 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
| bikeshaving wrote:
| 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?
| monkey_monkey wrote:
| The entire component library is behind a paywall...are
| you saying they should be giving away the vanilla JS
| version?
| yieldcrv wrote:
| You can use vanilla tailwind with vanilla JavaScript
| whatever1 wrote:
| ChatGPT can just steal it for me!
| cschmatzler wrote:
| Yeah I strongly emphasise with them getting their money -
| the only problem with headless components being behind a
| paid license is that you cannot build a design system on
| top of them and open source it.
| conradfr wrote:
| Bootstrap has javascript components.
| hbn wrote:
| Yeah this seems like an odd thing to paywall. In the web dev
| world where everything is free, it's a pretty crazy ask to ask
| people to tie themselves to a UI framework where I guess you're
| forever paying a subscription just to continue using the
| framework?
|
| It's like putting if postgres expected you to pay them a
| monthly fee.
|
| edit: I see now their pricing is one-time perpetual access.
| Still, I'm genuinely curious how well this model works.
| abtinf wrote:
| > I guess you're forever paying a subscription just to
| continue using the framework
|
| It's a one-time fee for unlimited use and lifetime updates,
| not a subscription.
| benatkin wrote:
| Another hilariously paid feature is https://sso.tax/
|
| It's funny because they're unintuitive to their end users.
| However, that is deliberate - they are looking for a decision
| point that comes after, but not too long after, devs have
| heavily invested in the product.
| gedy wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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_compone...
| cchance wrote:
| 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
| shortrounddev2 wrote:
| 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 wrote:
| 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.
| hyperbolablabla wrote:
| I remember toying with Polymer circa 2014, for some reason the
| word "transclusion" jumps into my mind, I remember being
| excited about it at the time. I barely remember what it means
| today though.
| julik wrote:
| I believe "transclusion" was the Angular 1.x vernacular for
| "slots", but don't quote me on that ;-)
| abtinf wrote:
| 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 wrote:
| 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 wrote:
| 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.
| brailsafe wrote:
| > There are so many lost opportunities for deep integration
| with other projects.
|
| What kind of integrations are you thinking of?
| abxyz wrote:
| Worried about money? They are already rich beyond their wildest
| dreams. They are, reasonably, excited about growing and
| expanding and building a company that does much more, but that
| is not driven by a need for money, it is driven by their
| ambition.
|
| edit: I can't speak for Adam etc., this is just my impression.
| My impression is that they want to build a business of which
| tailwind (the open source project) is one part. I think that
| regardless of money in the bank they would want to have revenue
| generating projects. Laravel is a good comparable.
| _betty_ wrote:
| interesting, i had just watched Primeagens Standup with Adam
| and got the impression they don't do well for money, but a
| quick google came up with a bunch of posts from Adam himself
| disclosing some fairly impressive numbers.
|
| No idea if he still does ok from it, but he certainly did at
| one stage.
| agloe_dreams wrote:
| > Kind of like how Jeff Bezos threw a bunch of money at
| 37signals
|
| Honestly, I kinda feel like 37Signals would have been better
| off with the founders having someone to report to...
| moooo99 wrote:
| How so? As an outsider, they appear to be a healthy business
| ans a good employer to work for?
| richardlblair wrote:
| Didn't see today's DHH rant about talk therapy?
| trevorhinesley wrote:
| Where he encouraged people to lean into intentionality
| and finding purpose rather than using therapy as a
| replacement?
|
| I have a diagnosed anxiety disorder and I've benefited
| GREATLY from talk therapy in numerous ways. I'm an
| advocate for therapy. I simultaneously stand behind his
| post as a healthy nudge for many.
| bluetidepro wrote:
| I think you are confused? Tailwind is already free and open
| source? These are just components they sale that are pre-made
| to save you time. It doesn't take away much at all from the
| full experience?
| devmor wrote:
| From the linked article:
|
| > To pull this off, we built @tailwindplus/elements -- a
| library we're releasing exclusively for Tailwind Plus
| customers.
|
| This means if you want to use the Tailwind UI components
| without a Javascript framework, you have to build them all
| yourself, or pay.
| subarctic wrote:
| Fwiw I feel like their components are something I'd be less
| likely to want to pay for now that you can generate tailwind
| components so easily with ai. I guess now that I think of it I
| actually paid for them back when it was called Tailwind UI, but
| instead of using them I'm just telling claude to generate a UI
| for me, which has the advantage that there's no licensing
| issues. It'll be interesting to see how their business does
| going forward
| nikkwong wrote:
| How has shipping high quality products using AI generated
| tailwind components actually been working for you? I think
| the problem that I and many others have/had, is that it can
| certainly build a few components that look good in isolation,
| but it doesn't do a good job at maintaining a cohesive
| theme/idea across many different page sections/components
| etc. I built blendful [0] to solve this, and sort of lost
| interest when LLMs became increasingly capable. However,
| seeing them not making any gains, really, on visual cohesion
| between sections and components provoked enough excitement to
| continue working on it this year.
|
| We will see how long it takes for LLMs to make headway in
| this area specifically.
|
| [0]: https://www.blendful.com
| piyiotisk wrote:
| I would like to know how they find it in comparison to a
| framework like react
| Imustaskforhelp wrote:
| 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 wrote:
| 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 wrote:
| They also had a figma design library that went away. Kinda
| silly if you want to get designers on the same page.
| GenerWork wrote:
| 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 wrote:
| It's tailwindcss for a reason
| spankalee wrote:
| 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 wrote:
| 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 wrote:
| That's not really the point. Tailwind UI depends on Headless
| UI. Headless UI had both Vue and React packages. The Vue
| package was abandoned. Many are in the process of finding
| workarounds for the issues or moving to another library. This
| new shiny thing can be used in Vue, sure. I know better now
| to not build anything on top of it though.
| bitbasher wrote:
| 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:
|
| <!-- Include this script tag or install `@tailwindplus/elements`
| via npm: -->
|
| <!-- <script
| src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1"
| type="module"></script> -->
|
| This sucks because I have been using alpine and now I can't copy
| paste the examples ~_~
| victorbjorklund wrote:
| Finally!
| felipemesquita wrote:
| A love letter their rails users indeed. Congratulations to the
| tailwind team for shipping this! Disclosure
| megaman821 wrote:
| 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.
| ricardobeat wrote:
| <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 wrote:
| 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.
| skydhash wrote:
| Why not use the web inspector? That's usually the quickest
| way to see which style is applied to an element.
| Marciplan wrote:
| kinda feels like jQuery, I like
___________________________________________________________________
(page generated 2025-07-25 23:00 UTC)