DEV Community

Cover image for Build Count App Using Apline js with Tailwind CSS
saim
saim

Posted on • Originally published at larainfo.com

Build Count App Using Apline 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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

like

<!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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

visit my website larainfo.com

Read also

3 way to install bootstrap 5 in laravel 8
Laravel php artisan inspire command
Laravel clear cache without using artisan command

Top comments (0)