In this tutorial we will create simple count app using Apline Js and create simple ui using Tailwind css.

Alpine js is a lightweight library to and interactivity new front-end framework. Alpine js syntax is almost similar to Vue js , so if you know vue , then it is easy to learn this framework.

Tools use

Tailwind CSS 2 CDN

Apline js 2.8 CDN

Tailwind CSS 2 CDN
in this section i use tailwind css, you can use any css Framework

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

Apline js 2.8 CDN

use defer attribute , defer attribute specifies that the script is executed when the page has finished parsing. if you are put script in before close head then use defer .

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Create Simple App count Using Apline js with Tailwind CSS </title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
    </head>

    <body>

    </body>

</html>

Next, create ui using tailwind css

  <div>
          <div class="flex items-center justify-center h-screen bg-gray-200">
                <button class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Increment</button>
                <span class="m-5" x-text="count">0</span>
                <button class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
            </div>
        </div>

Now, you need to put empty div x-data declares a new component scope. It tells the framework to initialize a new component with the data object.

first you define variable {count: 0} and next you need to add click method using x-on:click you also use @:click u and give value ++

operator for Increment and -- for Decrement ,In Last use x-text for show interactive state

You Can also use second Way to do this task

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Create Simple App count Using Apline js with Tailwind CSS </title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js" defer></script>
    </head>

    <body>
        <div x-data="counter()">
            <div class="flex items-center justify-center h-screen bg-gray-200">
                <button x-on:click="increment()"
                    class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Increment</button>
                <span class="m-5" x-text="count">0</span>
                <button x-on:click="decrement()"
                    class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
            </div>
        </div>

        <script>
            function counter() {
                return {
                    count: 0,
                    increment() {
                        this.count++;
                    },
                    decrement() {
                        this.count--;
                    }
                };
            }
        </script>

    </body>

</html>

visit my website larainfo.com

Build Count App Using Apline js with Tailwind CSS

You Can also use second Way to do this task

Read also