build simple count app  using alpine js with tailwind css

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 </head> then use defer .

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/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/[email protected]/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>
alpinejs increment v1

alpinejs increment v1


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

<div x-data="{count:0}">
            <div class="flex items-center justify-center h-screen bg-gray-200">
                <button x-on:click="count++"
                    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="count--"
                    class="text-white bg-indigo-500 px-4 py-2 rounded hover:bg-indigo-900">Decrement</button>
            </div>
        </div>

output:

alpinejs increment v2

alpinejs increment v2


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/[email protected]/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>