Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

How to Create a Responsive Form Using TailwindCSS

Difficulty:BeginnerLength:MediumLanguages:

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 TailwindCSS

According 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 Yarn

We’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.

That 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.

Next, create a file in the root directory:

Open the file and add the following config snippet:

Here, we’re adding TailwindCSS and autoprefixer as PostCSS plugins.

To initialize Tailwind, we’ll then do:

This will create a config file called tailwind.config.js at the root directory of the project:

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.

Open your package.json and make the script part look like this:

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 CodePen

If 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:

add tailwindcss in codepen

Er, that’s it.

3. Set up the Index File

If 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.

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:

The barebones markup will give you the following:

barebones

4. Style the First 3 Input Fields

That’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.

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:

styled form

Remember: we applied all that styling without writing a single line of CSS! So what did we do exactly?

Styling the 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 Inputs

We’re doing a similar thing to the input field, and the divs.

  • 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 Elements

Adding a few classes to the other elements will make the responsive form turn out even cleaner.

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.

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:


final responsive form

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+

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.