</> Michael Burrows

Styling a login form with Tailwind CSS

Last modified on October 22nd 2020 GitHub [Source] CodePen [Demo]

In this tutorial we’ll be styling a login form using Tailwind CSS. Unlike other CSS frameworks Tailwind doesn’t provide predesigned components but rather a set of utility classes for creating bespoke designs.

At the end of the tutorial you’l have created a form like the following:

Tailwind CSS login form

Let’s get started by creating a blank HTML file and loading Tailwind via CDN:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tailwind CSS Login Form</title> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" /> </head> <body> </body> </html>

To get the most out of Tailwind it’s preferable to install via npm but for the purposes of this tutorial the CDN allows us to get up and running quickly.

Next add the following classes to the <body> tag:

<body class="flex h-screen bg-indigo-700">
  • flex h-screen – will allow us to horizontally and vertically center align the login form.
  • bg-indigo-700 – adds the background color.

Colors in Tailwind can have a value from 100 (light) to 900 (dark).

Tailwind CSS colors

We’ll wrap everything in a <div> with the following classes:

<div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5"> <!-- header --> <!-- form --> <!-- footer --> </div>
  • w-full – ensures the <div> spans its full width even.
  • max-w-xs – sets the maximum width of the form to extra small (2rem).
  • m-auto – applies margin:auto all around so the form will be center aligned.
  • rounded – adds the standard rounded border radius, this can be decreased (rounded-sm) or increased (rounded-lg).
  • p-5 – defines even padding all around.

First up inside the wrapper <div> is a <header> which contains a logo image:

<header> <img class="w-20 mx-auto mb-5" src="https://img.icons8.com/fluent/344/year-of-tiger.png" /> </header>
  • w-20 – logo image is 344 pixels wide so this will limit the width to a more reasonable 5rem/80px.
  • mx-auto – set the x-axis margin (left & right) auto so the logo is center aligned.
  • mb-5 – applies a margin to the bottom of the logo only.

Our form containing username input, password input and submit button is a follows:

<form> <div> <label class="block mb-2 text-indigo-500" for="username">Username</label> <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="text" name="username"> </div> <div> <label class="block mb-2 text-indigo-500" for="password">Password</label> <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="password" name="password"> </div> <div> <input class="w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded" type="submit"> </div> </form>
  • block – sets the label to display:block so it appears above the input field.
  • border-b-2 border-indigo-500 – adds a 2px indigo border to the bottom of the text fields.
  • outline-none focus:bg-gray-300 – removes the default input focus instead applying a background color.
  • hover:bg-pink-700 – hover styles in Tailwind are applied by prefacing a class with hover:.

Finally the <footer> which contains a “Forgot Password” and “Create Account” links:

<footer> <a class="text-indigo-700 hover:text-pink-700 text-sm float-left" href="#">Forgot Password?</a> <a class="text-indigo-700 hover:text-pink-700 text-sm float-right" href="#">Create Account</a> </footer>
  • text-sm – reduces the font size slightly from the default base font size.
  • float-left float-right – applies standard CSS floats.