You will find a lot of components on this page. Some of them are just experiments I am conducting in order to learn how to use properly Web Components and Shadow Dom, Alpine.js and TailwindCSS together.
Since it was a bit hard to handle using Shadow Dom with TailwindCSS, it was nice to find the twind library, that gets that abstraction level difficulty from you.
This element is a very simple button component with which we can just render a component with a default text. No interactivity, no dynamic.
In this element we can see that we can render TailwindCSS inside the element. This is the whole component.
This element is a bit cooler than the previous one in the sense that we can pass some attributes. For example, we can pass a text to the button or extra classes from TailwindCSS.
Here you can see the code.
With this element we are able to choose between anchor and button with some params, and add also additional attributes and extra classes if we want.
The details of how to use this will come soon...
This is the element you see here in the title. It is a simple headline in which we have some basic styles and a shadow dom. We can pass the tag we want to use, and the classes we want to add. And the content inside the slot.
With this element we are able create easily input fields.
We can access from inside the web component the global state of the Alpine Store Config.
For example, the current value of the toggle switch is: