How to Create a Responsive Form Using TailwindCSSb553d444bcf6be77c9fd390e0d815634on October 23, 2019 at 2:27 pm

The accepted approach to building websites when working with HTML and CSS is to write the structure in the HTML file and implement the styles in a CSS file. But what if you could add the styles using classes right there in your HTML file? As it happens, you can, and that’s what we’re going to do thanks to TailwindCSS.Introducing TailwindCSSAccording to the TailwindCSS documentation:“Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.”With Tailwind CSS, you don’t have to create your own styles. You can make use of the classes it provides, within your markup, to implement the custom designs you want. It also gives you the ability to extend those styles.“In short, Tailwind is a CSS framework, but it’s different from the likes of Bootstrap and Foundation. It provides only the raw basics of what you need to style your own web pages” – Adi Purdila
During this tutorial you’ll learn how to get started with TailwindCSS as we build a responsive form. You can fork the repo on GitHub, or the demo on CodePen:

1. Get Started Using NPM or YarnWe’ll use a couple of workflows to get started; you can pick whichever you prefer. For package manager users start by creating a working directory in your terminal.mkdir tutsplus-tailwindcss-form-demo && $_

## For NPM
npm init -y

## For Yarn
yarn init -yThat creates a directory and navigates into it. Then we initialize either npm or yarn, depending on which you work with, using the default settings (hence the -y flag).With that done we need to install tailwind, and two other packages: autoprefixer and postcss-cli.# Using npm
npm install tailwindcss autoprefixer postcss-cli

# Using Yarn
yarn add tailwindcss autoprefixer postcss-cliNext, create a file in the root directory:touch postcss.config.jsOpen the file and add the following config snippet:module.exports = {
plugins: [
require(‘tailwindcss’),
require(‘autoprefixer’),
]
}Here, we’re adding TailwindCSS and autoprefixer as PostCSS plugins.To initialize Tailwind, we’ll then do:npx tailwind initThis will create a config file called tailwind.config.js at the root directory of the project:module.exports = {
theme: {
extend: {}
},
variants: {},
plugins: []
}Create a folder called css and in it, create a file with the name tailwind.css. We’ll make use of @tailwind directive to inject some styles into our CSS.@tailwind base;
@tailwind components;
@tailwind utilities;Open your package.json and make the script part look like this:”scripts”: {
“build”: “postcss css/tailwind.css -o public/build/tailwind.css”
}With that, we can run npm run build to make use of Tailwind CLI to process our CSS. The processed styles will be outputted in public/build/tailwind.css file. Go ahead and run the command to see!
2. Get Started Using CodePenIf you enjoy using CodePen as a development environment for your projects the setup process is extremely straightforward.Go to CodePen and start a new pen.Under the CSS settings select Autoprefixer, and search for tailwindcss in the external stylesheets:Er, that’s it.
3. Set up the Index FileIf you’re developing this as we described earlier with a package manager you’ll need to add a file called index.html inside the public directory that was created.<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>TutsPlus TailwindCSS Form Demo</title>
<link rel=”stylesheet” href=”/build/tailwind.css”>
</head>
<body>

</body>
</html>If you’re continuing with CodePen you won’t need that bit; though you will need to place a <body> tag in the HTML panel.In either scenario we want to start our responsive form with the barebones and style them up, so the starting point will look like this:<div>
<form>
<div>
<div>
<div>
<label for=”company”>
Company Name*
</label>
<input id=”company” type=”text” placeholder=”Tutsplus”>
<div>
<span>
Please fill out this field.
</span>
</div>
</div>
<div>
<label for=”title”>
Title*
</label>
<input id=”title” type=”text” placeholder=”Software Engineer”>
</div>
</div>
<div>
<div>
<label for=”application-link”>
Application Link*
</label>
<input id=”application-link” type=”text” placeholder=”https://….”>
</div>
</div>
<div>
<div>
<label for=”location”>
Location*
</label>
<div>
<select id=”location”>
<option>Abuja</option>
<option>Enugu</option>
<option>Lagos</option>
</select>
</div>
</div>
<div>
<label for=”job-type”>
Job Type*
</label>
<div>
<select id=”job-type”>
<option>Full-Time</option>
<option>Part-Time</option>
<option>Internship</option>
</select>
</div>
</div>
<div>
<label for=”department”>
Department*
</label>
<div>
<select id=”department”>
<option>Engineering</option>
<option>Design</option>
<option>Customer Support</option>
</select>
</div>
</div>
</div>
<div>
<div>
<button>
Button
</button>
</div>
</div>
</div>
</form>
</div>The barebones markup will give you the following:
4. Style the First 3 Input FieldsThat’s not much to look at, so let’s continue by styling the first three input fields to get an idea of how Tailwind CSS works.<div class=”md:w-1/2 px-3 mb-6 md:mb-0″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”company”>
Company Name*
</label>
<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”company” type=”text” placeholder=”Netboard”>
<div>
<span class=”text-red-500 text-xs italic”>
Please fill out this field.
</span>
</div>
</div>
<div class=”md:w-1/2 px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”title”>
Title*
</label>
<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”title” type=”text” placeholder=”Software Engineer”>
</div>
</div>
<div class=”-mx-3 md:flex mb-6″>
<div class=”md:w-full px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”application-link”>
Application Link*
</label>
<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”application-link” type=”text” placeholder=”http://….”>
</div>
</div>That might seem a little overwhelming, because we’ve styled things in several ways, but we’ll go over everything shortly. The result looks like this:Remember: we applied all that styling without writing a single line of CSS! So what did we do exactly?Styling the Label<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”company”>
Company Name*
</label>For this label:we set the text-transform style to uppercase. 

tracking-wide denotes letter spacing of 0.025em while text-black gives the text colour of #000. 

text-xs is the font-size which is equal to .75rem and font-bold is the font-weight of 700. 

mb-2 where mb means margin-bottom, applies a bottom margin of 0.5rem.
Styling the InputsWe’re doing a similar thing to the input field, and the divs.<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”company” type=”text” placeholder=”Tutsplus”>The w denotes width, with the added option specifying the extent of the element’s width. In this case, w-full means a width of 100%. 

bg is used to apply background styles; here we’re applying a background colour of #edf2f7, and we also add a text colour of #000. 
We apply border styling, alongside a border colour #edf2f7. 

py-3 applies a padding-top and padding-bottom of 0.75rem each. 

px-4 then applies a padding-right and padding-left of 1rem each.
Browsing the documentation, you can see how each of the classes fits in.
5. Style the Remaining ElementsAdding a few classes to the other elements will make the responsive form turn out even cleaner.<div class=”-mx-3 md:flex mb-2″>
<div class=”md:w-1/2 px-3 mb-6 md:mb-0″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”location”>
Location*
</label>
<div>
<select class=”w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded” id=”location”>
<option>Abuja</option>
<option>Enugu</option>
<option>Lagos</option>
</select>
</div>
</div>
<div class=”md:w-1/2 px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”job-type”>
Job Type*
</label>
<div>
<select class=”w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded” id=”job-type”>
<option>Full-Time</option>
<option>Part-Time</option>
<option>Internship</option>
</select>
</div>
</div>
<div class=”md:w-1/2 px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”department”>
Department*
</label>
<div>
<select class=”w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded” id=”department”>
<option>Engineering</option>
<option>Design</option>
<option>Customer Support</option>
</select>
</div>
</div>
</div>
<div class=”-mx-3 md:flex mt-2″>
<div class=”md:w-full px-3″>
<button class=”md:w-full bg-gray-900 text-white font-bold py-2 px-4 border-b-4 hover:border-b-2 border-gray-500 hover:border-gray-100 rounded-full”>
Button
</button>
</div>
</div>The form spreads to cover the browser. We’ll constrain the containing div and also make use of an SVG file to style the background to add a little visual flair.To do this, inside the public directory, you need to create a folder called assets, and in it, another called svg. Then create a file called architect.svg and paste this in it.<svg xmlns=”http://www.w3.org/2000/svg” width=”100″ height=”199″ viewBox=”0 0 100 199″><g fill=”#000″><path d=”M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z”></path></g></svg>The extra thing we need to do, as I mentioned above is to add background styles, padding and flex to the containing div elements and body tag. So in the end, here is how the body of our HTML will look:<body class=”bg-gray-100 flex bg-local” style=”background: url(‘./assets/svg/architect.svg’)”>
<div class=”bg-gray-100 mx-auto max-w-6xl bg-white py-20 px-12 lg:px-24 shadow-xl mb-24″>
<form>
<div class=”bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col”>
<div class=”-mx-3 md:flex mb-6″>
<div class=”md:w-1/2 px-3 mb-6 md:mb-0″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”company”>
Company Name*
</label>
<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”company” type=”text” placeholder=”Netboard”>
<div>
<span class=”text-red-500 text-xs italic”>
Please fill out this field.
</span>
</div>
</div>
<div class=”md:w-1/2 px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”title”>
Title*
</label>
<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”title” type=”text” placeholder=”Software Engineer”>
</div>
</div>
<div class=”-mx-3 md:flex mb-6″>
<div class=”md:w-full px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”application-link”>
Application Link*
</label>
<input class=”w-full bg-gray-200 text-black border border-gray-200 rounded py-3 px-4 mb-3″ id=”application-link” type=”text” placeholder=”http://….”>
</div>
</div>
<div class=”-mx-3 md:flex mb-2″>
<div class=”md:w-1/2 px-3 mb-6 md:mb-0″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”location”>
Location*
</label>
<div>
<select class=”w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded” id=”location”>
<option>Abuja</option>
<option>Enugu</option>
<option>Lagos</option>
</select>
</div>
</div>
<div class=”md:w-1/2 px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”job-type”>
Job Type*
</label>
<div>
<select class=”w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded” id=”job-type”>
<option>Full-Time</option>
<option>Part-Time</option>
<option>Internship</option>
</select>
</div>
</div>
<div class=”md:w-1/2 px-3″>
<label class=”uppercase tracking-wide text-black text-xs font-bold mb-2″ for=”department”>
Department*
</label>
<div>
<select class=”w-full bg-gray-200 border border-gray-200 text-black text-xs py-3 px-4 pr-8 mb-3 rounded” id=”department”>
<option>Engineering</option>
<option>Design</option>
<option>Customer Support</option>
</select>
</div>
</div>
</div>
<div class=”-mx-3 md:flex mt-2″>
<div class=”md:w-full px-3″>
<button class=”md:w-full bg-gray-900 text-white font-bold py-2 px-4 border-b-4 hover:border-b-2 border-gray-500 hover:border-gray-100 rounded-full”>
Button
</button>
</div>
</div>
</div>
</form>
</div>
</body>With all that done, you should end up with this result!What’s Next?During this tutorial you learned about the capabilities of TailwindCSS when creating responsive forms. I hope it’s helped you understand the power of using styling classes in this way. TailwindCSS is actively maintained by Adam Wathan and a handful of others. I implore you to follow the documentation closely, as it’s your number one resource for buulding with TailwindCSS. I must add that Adam is working on Tailwind components which will be awesome to use, make sure you subscribe.If you have built anything interesting with TailwindCSS, or have anything you’d like to share, I’d love to read about them in the comments section.Learn More About TailwindCSS with Tuts+CSS
Introduction to Tailwind CSS: A Utility-First CSS Framework
Adi Purdila
Front-End
Style Your Apps With the Tailwind CSS Framework
Jeremy McPeakRead More

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Hey Twin Tiers! Would you like a...

free website, free email, free SEO, & free EVERYTHING for a full YEAR?!?!?

Click below and be entered to win FREE digital media for a year!

A custom-built website, email addresses, SEO, and so much more… all for free… all for a full year!

Why? … Well, we’re new here and we’d like to get known. But HURRY… this definitely wont last!!!

We swear there is no catch… so what do you have to lose?