When I first started to learn website design, every page I did was small and not very stylistic in terms of professional level work. Because of this my HTML and CSS files were easy to manage while adding or removing code. As I continue to learn, I am continually finding that my .css file grows by leaps and bounds as I input more style. It's slowly creeping to 100-200 lines of code and more. It became tiresome searching for all my classes and ids to change something simple. And even then, it would sometimes make changes that I didn't necessarily want.
As with every aspect of technology, the question is always asked, "How can I do this better/easier/faster?" Bootstrap became a fan favorite for design. But the more you look into it, the more cookie cutter it can feel. What if you wanted something highly customized and unique to you and your business.
Enter Tailwind CSS!
What is Tailwind?
Tailwind, created by Adam Wathan and Steve Schoger, is a highly customizable, low-level CSS framework that uses utility classes that let you build completely custom designs without ever leaving your HTML.
In other words, Tailwind allows you access to CSS attributes using class utilities right on your HTML document to customize unique designs, instead of having to choose from predesigned components.
With a traditional CSS file, it grows as you build your site. You have to think of names_subnames_subsubnames_subsubsubnames in order to style different portions of your site. With Tailwind, you can add, remove, modify straight to the object.
Just Starting
To download Tailwind, follow the directions here. It is a little bit of a lengthy process, but provides an abundance of power behind it, including customization.
If you are just wanting to take Tailwind for a spin, use the following CDN build:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
Although this will not give you full features of Tailwind, it will allow you to explore if this is something you would like to incorporate in future projects.
How To Use Tailwind
Tailwind uses a mobile first breakpoint system, and uses four breakpoints:
- Small (sm) min-width: 640px
- Medium (md) min-width: 768px
- Large (lg) min-width: 1024px
- Extra Large (xl) min-width: 1280px
This means that utilities with no prefixes will be executed on all screen sizes, while prefixed utilities will only execute at their specified breakpoint and above. That being said, mobile screens will have no prefix.
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500"></div>
Here is the code for a simple splash site utilizing Tailwind CSS:
<body class="bg-grey-200">
<div>
<div class="px-5 py-10 max-w-md mx-auto ">
<img class="h-70 w-auto object-center" src="https://www.freelogodesign.org/file/app/client/thumb/e2c49719-4410-41b4-b0ce-83d3a22c3b6e_200x200.png?1587658842573" alt="Work from home logo">
<img class="h-70 w-auto rounded-lg shadow-lg" src="https://images.propertycasualty360.com/contrib/content/uploads/sites/412/2019/03/RemoteWork.jpg" alt="working at home">
<h1 class="mt-5 text-2xl text-grey-500 font-bold leading-tight ">Easy commute! Great work atmosphere! <span class="text-blue-700"> Start Today!</span></h1>
<p class="mt-3 text-sm text-grey-600 ">Working from home allows you the freedom to be who you are, dress how you like, and go where you feel. Sign up today for a list of Work from home employers.</p>
<a class="inline-block mt-5 px-5 py-3 bg-blue-700 text-white rounded-lg shadow-lg uppercase tracking-wider font-semibold text-sm" href="#">Sign up</a>
</div>
</div>
</body>
Let's go over what some of this means.
- bg-grey-200 - Background color on scale from 100-900 in increments of 100.
- px-5 py-10 - padding, both horizontal and vertical.
- max-w-md - maximum width of medium no matter screen size (about 28rem).
- mx-auto - horizontal margin set to auto.
- w-auto - width set to auto.
- object-center - img set to center.
- rounded-lg - rounded corners and how tight they are rounded.
- shadow-lg - box shadow.
- mt-5 - margin top set to 5.
- text-2xl - text size 1.5rem.
- font-bold - darker, bolder font.
- leading-tight - spacing between lines of text.
- tracking-wider - spacing between letters.
Those are the basics of what I used to make the sample splash site below:
The possibilities are endless on customized websites, made exactly to your liking. No cookie cutters here.
Let me know what you think about Tailwind, and how it has made life easier or not for your web design.
References
TailwindCSS Website
Tailwind Cheat Sheet
Adam Wathan's Tailwind Tutorial
Top comments (0)