Examples of AlpineJS with tailwind thrown in

This is some example code from the tutorials on laracasts by the Excellent Jeffery Way

Learn about AlpineJS on Laracasts! Get started with AlpineJS Get started with Tailwind CSS

Test binding objects

This is a test binding of objects using Apline JS. Notice how the text updates based on the inputs and the buttons.

#Alpine JS #tailwind #first

Simple Calculator

We take number 1 and it it to number 2. What happens if we play with the x-model classes though?

+ =

#Alpine JS #tailwind #second #calculator

Simple show and Hide switch

<div x-data=" { show: false } ">
    <h1 x-show="show">Simple show and Hide switch</h1>
    <button @click="show= ! show" x-text=" show ? 'Hide' : 'Show'">toggle</button>
</div>

Switching Tabs example

This shows off the simple nature of

First Tab

Lorem ipsum delor sit amet.

Second Tab

Lorem ipsum delor sit amet.

Third Tab

Lorem ipsum delor sit amet.