Tailwind — More than just inline CSS

6 min readJun 3, 2023

“There are three responses to a piece of design — yes, no, and WOW! Wow is the one to aim for” ― Milton Glaser

With numerous technologies coming every day it's difficult to decide which one to use and give your precious time to. As a developer, you’ll be more likely to adopt technologies that allow you to accomplish more with less code. To help with this task one may decide to use a solid frontend framework like the one we will be discussing, Tailwind CSS.

We’ll learn about Tailwind CSS in this article, which is a CSS framework for constructing and designing web pages. We’ll go through how to install and incorporate Tailwind CSS into your project and boost your productivity.

What is Tailwind CSS?

Quoting the official site, “A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.”

Tailwind CSS is a utility-first CSS framework using which we can write CSS directly into our HTML files. There’s no need to maintain numerous CSS files for different parts of a webpage. Instead, each part will have its CSS embedded in itself.

What does utility-first mean?

When we talk about utility-first CSS, we’re talking about classes in our HTML that have pre-defined functions. This means that all you have to do is create a class with predefined styles, and those styles will be applied to the element.

Styling an application in Tailwind CSS is based on a set of classes which are modifying one or two CSS attributes each. Each element will have a lot of such classes assigned to it.

How does it compare to other popular CSS frameworks like Bootstrap?

We may utilize pre-made components like navbars, buttons, drawers, etc. from frameworks like Bootstrap or Material Design. Even though it appears to be quick and simple, not everyone’s demands are met by this. It lacks the flexibility that a developer might want.

Many developers stick to plain CSS in such circumstances. But when you have a deadline to meet, it can sometimes take a long time. Tailwind CSS may be used in situations like this. It offers a CSS framework’s versatility as well as speed.

Weighing the Pros and Cons: Tailwind CSS in Focus

Pros

Streamlining the development process
Because the tools are comparable, it allows you to practice your CSS more.
All utilities and components can be customized to your liking.
In most cases, the entire file size for manufacturing is minimal.
If you already know CSS, it’s simple to pick up.
Learning documentation is good.

Cons

Because all of the styles are in the HTML files, your markup may appear jumbled for large projects.
It’s not easy to learn if you don’t have a good understanding of CSS.
Everything, including your input elements, must be built from the ground up. Tailwind CSS disables all default CSS styles when you install it.
Unlike some CSS frameworks, Tailwind CSS provides minimal default styling
Since Tailwind CSS provides a large number of utility classes, there is a possibility of including unused classes in the final CSS file.

In the end, it is your choice whether you would like to spend your time learning this tool or not. Although, we highly recommend trying it at least once as it is very easy to set up and get started and won’t waste much of your time even if you don’t get the kick out of it.

Let’s see an example

Suppose we have to create the given button which is green in its current state and blue in its hover state.

Using Vanilla CSS

.button {
  background-color: #16a34a;
  height: 4rem;
  width: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  color: white;
  border-radius: 100vw;
  text-transform: uppercase;
}

.button:hover {
  background-color: #0891b2;  
}

Using Tailwind CSS

<div class="bg-green-600 h-16 w-40 flex justify-center items-center text-2xl text-[#fff] rounded-full uppercase hover:bg-blue-600">Button</div>

Only this much was required to produce the same effect as the vanilla CSS example. Because each class name we used already had a preset style, there was no need to build an external stylesheet where you had to write the styles.

Ok, so enough talking, now let's get into some action. In the next steps, we will learn how can we set up Tailwind CSS easily and quickly from scratch.

Getting Started with Tailwind CSS: A Practical Guide

If you want to just get your hands on Tailwind CSS and try it out without having to configure anything, you can simply add a CDN directly to your HTML file-

  <script src="https://cdn.tailwindcss.com"></script>

After this, you can directly use Tailwind in your HTML file but this approach is not recommended as it is not suitable for production builds.

The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool.

Prerequisites

Node.js is installed on your system for using the npm.
A dedicated project structure

For this example, we will be using the following project structure-

-src
  -index.html
  -global.css
 -dist
  -output.css

 -tailwind.config.js

Installation

Start up a terminal in your project directory and install ‘tailwindcss’ via npm.

 npm install -D tailwindcss

2. Next, create a tailwind.config.js file in your root directory-

  touch tailwind.config.js

3. Then, paste the following configuration in the ‘tailwind.config.js’ file (change the content path accordingly, the project structure holds our source files in src, hence the path used)-

module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. In the global CSS file add the ‘@tailwind’ directives for each of the Tailwind’s layers.

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Start the Tailwind CLI build process to scan for your template files for classes and automatically build on changes.

npx tailwindcss -i ./src/global.css -o ./dist/output.css –watch

6. Add the path of generated CSS file in your HTML file and start using Tailwind CSS-

<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="/dist/output.css" rel="stylesheet">
</head>
<body>
  <div class="text-xl h-10 w-10 bg-red">
    Hello world!
  </div>
</body>
</html>

7. That’s it! It was that easy. You are all done. Now you can use the magic of Tailwind CSS to speed up and enjoy your development time.

In Conclusion: The Impact and Potential of Tailwind CSS

Tailwind CSS is a powerful utility-first CSS framework that offers a fantastic alternative for speeding up your web development process. By utilizing a wide range of CSS classes, Tailwind CSS helps you create professional-looking web pages while maintaining design consistency.

In this article, we explored the fundamental aspects of Tailwind CSS and highlighted its key differentiators from other CSS frameworks. We also delved into the installation process, ensuring you have a solid foundation to work with. Additionally, we discussed the potential for creating custom plugins to augment Tailwind CSS’s existing functionality, further enhancing its capabilities.

By reaching this point, you have gained a basic yet comprehensive understanding of how Tailwind CSS operates. However, to fully leverage the advantages of a utility-first framework like Tailwind CSS, it is crucial to continue practicing and expanding your knowledge.

Tailwind CSS empowers developers to optimize their web development workflow, offering a wealth of benefits such as improved design efficiency, code consistency, and flexibility. By honing your skills and continually exploring the possibilities, you can elevate your ability to create exceptional web designs and deliver outstanding user experiences.

Remember, the journey doesn’t end here. Embrace the opportunities to refine your proficiency, experiment with Tailwind CSS’s extensive features, and continue growing as a web developer.