Alpine js hide show Password with Tailwind CSS
Tags: tailwindcss, javascript, webdev, alpinejs
Published: 2021-06-09 12:06:10

In this tutorial we will see hide and show password using Apline Js .in this section we will use tailwind css for ui you can use any css framework if you want.

Why we use Alpine js for this because Alpine js is a lightweight library it bundle size is just 6.4 kb it download time is better thane jquery 

[See Demo](https://larainfo.com/blogs/alpine-js-hide-show-password-with-tailwind-css-example)

####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

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

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

Next, you need to create ui

```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> Alpine js hide show Password  Example </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 class="flex flex-col items-center justify-center bg-gray-300 h-screen">
        <div class="flex flex-col bg-white px-4 py-8 l w-full max-w-md ">
            <div class="mt-10">
                <form method="POST" action="">
                    <div class="relative w-full mb-3">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Email" /> </div>
                    <div class="relative w-full mb-3">
                        <label for="password">Password</label>
                        <input type="password" name="password" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Password" />
                        <div class=" absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ">
                            <p class=" mt-5">Show</p>
                        </div>
                    </div>
                    <div class=" text-center mt-6 ">
                        <button type="submit" class="p-3 rounded-lg bg-purple-600 outline-none text-white shadow w-32 justify-center
                                focus:bg-purple-700 hover:bg-purple-500 ">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
  
  </html>
```


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

define x-data="{ show: true }"  next, you need to bind input type using x-bind or : (:type="show ? 'password' : 'text'") then create 

click event @click="show=! show"  and  bind text using  x-text=" show ? 'Show' : 'Hide' "

```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> Alpine js hide show Password  Example </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 class="flex flex-col items-center justify-center bg-gray-300 h-screen">
        <div class="flex flex-col bg-white px-4 py-8 l w-full max-w-md ">
            <div class="mt-10">
                <form method="POST" action="">
                    <div class="relative w-full mb-3">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Email" /> </div>
                    <div class="relative w-full mb-3" x-data="{ show: true }">
                        <label for="password">Password</label>
                        <input :type="show ? 'password' : 'text'" name="password" class="border-0 p-4 placeholder-gray-400 text-gray-700 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full" placeholder="Password" />
                        <div class=" absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5 ">
                            <p class=" mt-5" @click="show=! show" x-text=" show ? 'Show' : 'Hide' "></p>
                        </div>
                    </div>
                    <div class=" text-center mt-6 ">
                        <button type=" submit " class=" p-3 rounded-lg bg-purple-600 outline-none text-white shadow w-32 justify-center
                                focus:bg-purple-700 hover:bg-purple-500 ">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</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)