Introduction to Tailwind CSS
If you have designed your Website, then you must have realized that it is a very complicated task. The CSS (Cascading Style Sheets) language, which is used to style how HTML documents are displayed, is extensive, complicated, and inconsistent. Moreover, different browsers may have different implementations, that aren't always compatible.
To ease the design process, there are a variety of CSS frameworks that provide reusable user-interface components for which the styling has been carefully defined and tested. Hence, these frameworks reduce the pain and long cumbersome hours of working with CSS.
However, when you utilize one of these frameworks, it becomes very difficult to differentiate your site from the thousands of other sites that are designed using the same framework.
In this article, we will discuss Tailwind CSS, an alternative to traditional user interface frameworks.
What is Tailwind CSS?
Tailwind CSS is a style-agnostic, utility-first, low-level CSS framework that gives you a complete set of cross-browser and reusable utility classes. These classes can be used in your webpage to add your own distinct looks and feel to your website.
I’ve written “Tailwind is utility-first” because rather than using traditional framework classes, it provides low-level utilities that are required to style any HTML element, such as padding, display, width, height, etc.
Tailwind is so simple that once you understand the naming conventions and patterns you can almost guess most of the functionality without needing the documentation.
Who should use Tailwind CSS?
Tailwind isn't for people who are just getting started with web development ( Say HTML, CSS, or JS ). Anyone interested in learning front-end programming should start with the fundamentals of CSS. Before using any of the CSS frameworks, make sure you're comfortable with CSS properties.
Now, if you are someone with decent CSS expertise and are looking for a pre-packaged styling solution that will allow you to code less and create a good responsive layout. Then Tailwind CSS is really going to ease your work.
Tailwind CSS is also a great option if you are a team working on large projects. The Tailwind Class selector provides a universal and safe approach to adding style to web elements. Moreover, universal class names allow a team to build quickly, consistently, and with less code repetition.
How to install Tailwind CSS to your project?
While there are a number of different ways to set up Tailwinds, such as Gulp, postCSS, or even their own CLI. The easiest way to get started is to simply use the CDN URL from unpkg: https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css
Alternatively, you can install the library into your project using npm or Yarn:
$ npm i tailwindcss
# for yarn
$ yarn add tailwindcss
Adding Tailwind to the HTML document
<!DOCTYPE html>
<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" />
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
<title>Tailwind CSS</title>
</head>
<body>
</body>
</html>
Colors have the same naming convention for Tailwind's universal class i.e, element-color-intensity. As a result, a red backdrop is designated as bg-red-500, with a number value ranging from 100 to 900. Borders, backgrounds, and text all follow this pattern.
<h1 class="text-blue-400">Hello World</h1>
<p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p>
<!-- Border needs to be set before the border-color can be changed -->
<input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">
Size and Spacing In Tailwind CSS
Width and height, abbreviated as w and h, can take values ranging from 0 to 64 (with some missing numbers that you can look up in the docs or with VSCode's IntelliSense) as well as a few key phrases like auto, full for 100%, or screen for 100vw/vh. We can also give width using fractions out of 1-6 or out of 12, for example, we can write 50% as 1/2, 2/4, 3/6, or 6/12.
Spacing also has a similar naming structure which is property, side (shorthand without dash), then the value ranging from 0 to 64. For instance, padding-bottom: 2rem is written as pb-8. The side can be: t (top), b (bottom), l (left), r (right), x (right and left), or y (top and bottom).
<div class="bg-green-700 h-16 w-auto mr-10"></div>
<div class="bg-blue-700 h-24 w-4/6 my-16"></div>
<div class="bg-red-700 h-40 w-6/12 mx-auto"></div>
<div class="bg-purple-700 h-56 w-2/12 ml-48"></div>
<div class="border border-white h-40 w-56 mt-10 mx-auto">
<h1 class="text-white py-16 px-16">I'm a box</h1>
</div>
Layout In Tailwind CSS
Many of the benefits of normal CSS positioning, such as floats, position, and even Flexbox, are available in Tailwind. Using them is extremely similar to using them in normal CSS, with the one exception, that with Flexbox, you must initialize it with flex first.
The naming pattern is similar to the pattern used for size, i.e. property-value pattern. For instance, the right float is written as float-right and justify-content: centre; becomes justify-centre.
<!-- Basic Navbar -->
<nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24">
<h1>Title</h1>
<ul class="flex justify-between w-56">
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</nav>
Apart from the normal CSS features, Tailwind provides shortcuts for tasks that would otherwise be laborious, such as adding dependencies for our font family, which we can accomplish with only font-sans, font-serif, or font-mono and have a set of fonts taken care of.
Font size (reduced to text) uses xs, sm, base, lx, and xl through 6xl instead of the 0-64 units we've been using.
Apart from those exclusions, the majority of the text choices in CSS have the same name conventions as before.
<p class="text-md font-mono font-bold text-white">Hello World</p>
<p class="text-lg font-sans line-through text-white">Hello World</p>
<p class="text-4xl font-serif text-center text-white">Hello World</p>
<p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>
Tailwind particularly shines while designing responsive sites, it reduces the need for media queries. We may limit a class to only work above a certain width using prefixes like sm, md, lg, xl. Whereas the un-prefixed version, like the one we've been using so far, works for everything outside of our range.
These prefixes represent traditional CSS media queries, where
sm represents @media (min-width: 640px)
md represents @media (min-width: 768px)
lg represents @media (min-width: 1024px)
xl represents @media (min-width: 1280px)
2xl represents @media (min-width: 1536px)
<body class="bg-gray-900 flex flex-col md:flex-row">
<div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-red-500 sm:bg-purple-800 bg-white"></div>
<div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-green-800 sm:bg-indigo-300 bg-white"></div>
<div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-blue-200 sm:bg-teal-600 bg-white"></div>
</body>
Browser support
To ensure a wide range of browsers and systems renders your site effectively, it's crucial to understand which browsers Tailwind supports, as well as how to manage any vendor prefixes.
Tailwind CSS supports the latest stable versions of Chrome, Firefox, Edge, and Safari as of the time of writing this post. However, if you're using an old IE the latest version of Tailwind (v2.0) is not for you, you'll need to downgrade to v.1.9.
Conclusion
In this article we got introduced to Tailwind CSS, moreover, we also discussed how easy and efficient it is to design your website using Tailwind CSS. To read more and play with the full potential of Tailwind CSS, visit its official documentation.
Top comments (1)
This is such an insightful post! I really appreciate how you broke down the topic in a way that's easy to understand. Looking forward to implementing some of these tips in my daily routine!
International schools in Bangalore