Build Count App Using Apline js with Tailwind CSS
Tags: javascript, webdev, alpinejs, tailwindcss
Published: 2021-06-01 06:47:05

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  

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

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

```html
<!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__
```html
  <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
```html
<!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](https://larainfo.com/)
### Read also 
[3 way to install bootstrap 5 in laravel 8](https://larainfo.com/blogs/3-way-to-install-bootstrap-5-in-laravel-8)
[Laravel php artisan inspire command](https://larainfo.com/blogs/laravel-php-artisan-inspire-command-that-can-inspire-you)
[Laravel clear cache without using artisan command](https://larainfo.com/blogs/laravel-clear-cache-without-artisan)