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.
mkdir tutsplus-tailwindcss-form-demo && $_ ## For NPM npm init -y ## For Yarn yarn init -y
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.
# Using npm npm install tailwindcss autoprefixer postcss-cli # Using Yarn yarn add tailwindcss autoprefixer postcss-cli
Next, create a file in the root directory:
touch postcss.config.js
Open 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 init
This 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 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:
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.
<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 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.
<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-transformstyle touppercase. tracking-widedenotes letter spacing of0.025emwhiletext-blackgives the textcolourof#000.text-xsis thefont-sizewhich is equal to.75remandfont-boldis thefont-weightof700.mb-2wherembmeansmargin-bottom, applies a bottom margin of0.5rem.
Styling the Inputs
We’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
wdenoteswidth, with the added option specifying the extent of the element's width. In this case,w-fullmeans awidthof100%. bgis 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-3applies apadding-topandpadding-bottomof0.75remeach.px-4then applies apadding-rightandpadding-leftof1remeach.
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.
<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+
CSSIntroduction to Tailwind CSS: A Utility-First CSS Framework
Front-EndStyle Your Apps With the Tailwind CSS Framework
No comments:
Post a Comment