Vanilla JavaScript support for Tailwind Plus

#1

Post by ulrischa » Fri, Jul 25, 2025, 6:11 PM UTC

Vanilla JavaScript support for Tailwind Plus
tailwindcss.com

Re: Vanilla JavaScript support for Tailwind Plus

#2

Post by paranoidxprod » Fri, Jul 25, 2025, 6:43 PM UTC

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.

Re: Vanilla JavaScript support for Tailwind Plus

#3

Post by nodesocket » Fri, Jul 25, 2025, 6:49 PM UTC

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

Re: Vanilla JavaScript support for Tailwind Plus

#4

Post by rafram » Fri, Jul 25, 2025, 6:59 PM UTC

> You can even build something as sophisticated as a custom command palette with Elements

Well, yeah, because they added an `` that specifically does that.

Re: Vanilla JavaScript support for Tailwind Plus

#5

Post by vFunct » Fri, Jul 25, 2025, 7:01 PM UTC

Would this work with DaisyUI components?

Re: Vanilla JavaScript support for Tailwind Plus

#6

Post by bikeshaving » Fri, Jul 25, 2025, 7:02 PM UTC

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.

Re: Vanilla JavaScript support for Tailwind Plus

#7

Post by gavinray » Fri, Jul 25, 2025, 7:03 PM UTC

bikeshaving wrote: post #6

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.

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

Re: Vanilla JavaScript support for Tailwind Plus

#8

Post by gavinray » Fri, Jul 25, 2025, 7:04 PM UTC

paranoidxprod wrote: post #2

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.

It's explained in the post.

Re: Vanilla JavaScript support for Tailwind Plus

#9

Post by bikeshaving » Fri, Jul 25, 2025, 7:05 PM UTC

gavinray wrote: post #7

bikeshaving wrote: post #6

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.

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

The title of the blog post mentions Tailwind Plus so I’m assuming it’s a paid feature. The ambiguity is probably intentional.

Re: Vanilla JavaScript support for Tailwind Plus

#10

Post by gedy » Fri, Jul 25, 2025, 7:07 PM UTC

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:

Bootstrap:

    
      
        Dropdown button
      
      
        ...

(I realize you have full control over looks with TW, but Bootstrap and others have utility classes too for the common stuff.)