Tailwind CSS – A Guide to Get Started

Writing vanilla CSS for every component is painful and frustrating, and writing repetitive CSS code is challenging to manage in large projects. As you grow as a developer, you are more likely to prefer technologies that help you to save time and energy and write maintainable Code.

A solid framework is one way to solve problems. Tailwind CSS solves your hardships, such as writing repetitive Code and maintainability, not reusable components.

In this article, we’ll learn about Tailwind CSS to quickly design web pages and websites. This article covers what tailwind CSS is, the installation process, and some exciting Tailwind examples.

Tailwind CSS – A Utility First CSS Framework

The Tailwind CSS framework is a utility-first CSS framework built to enable users to design web pages and websites much faster and easier. Basically, it provides predefined classes to use and design your page according to your needs.

It is a favorably customizable, low-level CSS framework that gives you all the building blocks you need to build customized designs without any annoying opinionated styles you must fight to override.

You can use utility classes to control the layout, color, fonts, positioning, shadows, and everything to create a fully custom component design — without leaving your HTML File or writing a single line of custom CSS.

When we say utility-first CSS, we refer to classes in our markup (HTML) with predefined functionalities. This clarifies that you just have to add predefined classes into your markup, and the added class styles will be applied automatically to the HTML element.

To make things more clear, let’s take an example that describes designing a button with Vanilla CSS and Tailwind CSS so it will give you enough idea about the difference between tailwind CSS and CSS.

Above, we have the output of the Button HTML element with the defined styles, and now we’re going to write similar CSS styles in vanilla CSS and Tailwind CSS.

With Vanilla CSS

<button class="btn">Log In</button>

You have the above-given button in HTML markup and need to style it with CSS using an external style sheet.

First, you have to select it through the class name selector and write the styles into it.

.btn {
  background-color: rgb(147, 197, 253);
  padding: 12px;
  border: none;
  border-radius: 4px;
}

With Tailwind CSS

<button class="rounded bg-blue-300 p-3">Log In</button>

You have the above-given button in HTML markup and need to style it with CSS using an external style sheet.

First, you have to select it through the class name selector and write the styles into it.

.btn {
  background-color: rgb(147, 197, 253);
  padding: 12px;
  border: none;
  border-radius: 4px;
}

The above Code is all needed to achieve the same effect as the example with vanilla CSS. Regarding the style button with Tailwind CSS, you just have to use the utility classes in the HTML markup without adding any external stylesheet.

Don’t worry about class names such as rounded, bg-blue-300, or p-3 because these are the predefined utility classes the tailwind CSS provides.

Prerequisites for Using Tailwind CSS

Tailwind CSS is a utility-first framework built on top of CSS features that requires a solid understanding of the CSS because tailwind CSS uses predefined classes.

• Strong knowledge of CSS core concepts and advanced features is required to quickly adapt the tailwind CSS framework.
• A good understanding of HTML markup, its structure, and how it works is necessary.
• Additionally, an excellent understanding of node.js, npm package manager, and CLI helps you during the installation of Tailwind CSS.

How to install and configure tailwind CSS

Before we start with installation and configuration, it would be better to know your exact requirement. So It will become easy for you to choose the best installation option.

If you want to try Tailwind CSS, Tailwind Play and CDN is the best way to get your work done. But if you are really looking forward to implementing it into your project or want to create a whole project with Tailwind CSS, the CLI installation is best for you.

Tailwind Play

Tailwind Play is the official Tailwind CSS playground to try tailwind without installing it. Tailwind play is a pretty advanced playground that supports HTML and CSS code writing with live output. Additionally, it provides support for the Customizing config.js file.

The above image contains an example of a login button with the HTML markup on the left and live code output on the right.

Play CDN

Adding Play CDN script into your HTML markup is another quickest way to start using the Tailwind CSS but the play CDN is helpful for development only. It’s not the recommended choice for production.

Add the above play CDN script tag to the of your HTML markup, and start using the utility classes in your code.

Tailwind CLI

Installing and configuring tailwind CSS using the CLI is the recommended way. The simplest way to add tailwind CSS into your project is through the NPM package manager. To use the NPM package manager, you must have installed Node.js on your system.

First, you have to open your CLI and go to the project folder/directory, or if you haven’t created a project folder, then create a folder with a name but prefer to use the project name as the folder name for ease of understanding.

After creating the project folder, create a subfolder inside it to set up your project’s initial structure.

-Website
    public
        index.html
        styles.css
    src
        styles.css

Let’s start with installing Tailwind CSS.

npm install -D tailwindcss

Copy and paste the above command into your terminal and hit enter. It will install the Tailwind CSS as a dependency.

The installation process takes some time, but you have to create a “tailwind.config.js” file when the installation is over.

npx tailwindcss init

Copy and paste the above command into the terminal to create the “tailwind.config.js” file.

The tailwind config file holds a boilerplate of the Tailwind CSS configuration. The file looks like this:-

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

You can configure many things with the tailwind configuration file, but for now, focus on the Content property, as it is an essential part of using the Tailwind utility classes to get started. The Content property tells Tailwind CSS what files it should look for when it wants to create our CSS file.

So in our case, we want tailwind CSS to scan all .html and js files inside the src folder. The syntax for that path will be the string “./src/**/*.{html,js}”.

Look down to see the tailwind configure file after adding the value of the content property:-

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

The next thing to do is to add the “@tailwind” directives to your CSS file in the src folder — this is where Tailwind generates all of its predefined utility styles for you:

The Directives are various parts of Tailwind CSS. Three primary directives are:

• base
• components
• utilities

Inside the src/ folder, create a file named style.css or whatever name you prefer, as the file name doesn’t matter. Tailwind CSS uses this file as input to generate the actual CSS file that contains the CSS styles we need.

Inside the style.css file, add the following tailwind CSS directives:

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

After adding the above Directives save the CSS file.

And the last and most important thing left to do is to start the build process by running the below command into your terminal.

npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

The above code will tell the Tailwind that our input file is in the src folder, and whatever styles we have used in the input folder must be built CSS code to the public CSS output file.

The breakdown of the code line:-

• -i: This flag and the following path specify the input file.
• -o: This flag and the following path specify the output file.
• –watch: it permits Tailwind to watch your file for changes for an automatic build process.

After following each step of the above installation process, you are ready to start using Tailwind CSS in your project. You can also get help from the official documentation if you face difficulties.

Hands-on Demo

Now that we’ve installed and set up Tailwind CSS for our project let’s see some examples to understand its application fully.

Buttons component

To create a button component, you must write an HTML button element and specify utility classes into the class name.

The above image looks like a simple Button, but we have applied various things to create a real-life button with hover, active state, and shadows.

<button type="button"class="px-6 py-2.5 bg-blue-400 text-white 
font-medium text-xs leading-tight uppercase rounded shadow-md hover:
bg-blue-500 hover:shadow-lg focus:bg-blue-500 focus:shadow-lg 
focus:outline-none focus:ring-0 active:bg-blue-600 active:shadow-lg 
transition duration-150 ease-in-out" >Log In</button>

Notice the number of utility classes that have been used to style a single button because the button itself is pretty advanced and utilizes many aspects such as states( focus, hover, active), transitions to make effects smoother, and shadow to look natural. Now let’s jump to a more straightforward example of one single vanilla CSS feature and its use in Tailwind CSS.

Flexbox Example

Suppose you have three buttons inside a div container and want to give display value as flex and change direction to row like the below image:-

<div class="flex flex-row">
	<button>Log In<button>
	<button>Sign In<button>
	<button>Click</button>
</div>

We are adding flex and flex-row utility classes to the Div container to align all the buttons into a row.

Changing direction is pretty easy in flexbox, like the below image:-

Using the flex-col utility class will change the direction from row to column.

Notice the flex-col utility class into the below code:-

<div class="flex flex-col">
	<button>Log In<button>
	<button>Sign In<button>
	<button>Click</button>
	</div>

The below image shows all the flexbox values as a class name to use in tailwind CSS.

You can also go through the detailed explanation for each value in the official documentation.

Colors

Tailwind CSS comes with many color options with different variations for each color. The color variations start from 50 ( lightest ) to end at 900 ( Darkest )

The below picture shows the color variations from 50 to 900.

Image source

Let’s take an example of how you can do this by utilizing the blue color to give a button element a background color:

	<button class="bg-blue-50" >click</button>
	<button class="bg-blue-100" >click</button>
	<button class="bg-blue-200" >click</button>
	<button class="bg-blue-300" >click</button>
	<button class="bg-blue-400" >click</button>
	<button class="bg-blue-500" >click</button>
	<button class="bg-blue-600" >click</button>
	<button class="bg-blue-700" >click</button>
	<button class="bg-blue-800" >click</button>
	<button class="bg-blue-900" >click</button>

The output of the above code looks like the below image:-

The color and its variation syntax are the same for each color except black and white because these colors come with no variation.

We have already discussed two examples of adding a Utility class and styling our HTML element. You need to find suitable classes according to the CSS features you want to add.

A good understanding of CSS will eventually lead you to learn tailwind faster because you have to find the right class name via Tailwind documentation, or you can take help from cheat sheets like this.

Cards component

Let’s take a card component example, including a product headline, description, and a share button.

To create a component like the above image with tailwind CSS, you must have good knowledge of CSS and go through the documentation to find the right class to use.

You can see the code below:-

		<div class="flex justify-center">
		<div class="block p-6 rounded-lg shadow-lg bg-white max-w-sm">
		<h5 class="text-gray-900 text-xl leading-tight font-medium mb-2">Product</h5>
		<p class="text-gray-700 text-base mb-4"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. </p>
		<button type="button" class=" inline-block px-6 py-2.5 bg-black text-white font-medium text-xs leading-tight uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out">share </button>
		</div>
		</div>

Search component

Adding a search functionality in websites and application is quite normal nowadays, so why not take an example to create search components like the below image.

Creating component requires a little bit longer code, and you can see the code below:-

		<div class="my-32 flex justify-center">
		<div class="mb-3 xl:w-96">
		<div class="input-group relative mb-4 flex w-full flex-wrap items-stretch">
      <input type="search" class="form-control relative m-0 block w-full min-w-0 flex-auto rounded border border-solid border-gray-300 bg-white bg-clip-padding px-3 py-1.5 text-base font-normal text-gray-700 transition ease-in-out focus:border-blue-600 focus:bg-white focus:text-gray-700 focus:outline-none" placeholder="Search" aria-label="Search" aria-describedby="button-addon2" />
      <button class="btn inline-block flex items-center rounded bg-blue-600 px-6 py-2.5 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg" type="button" id="button-addon2">
		<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="search" class="w-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
		<path fill="currentColor" d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path>
		</svg>
      </button>
		</div>
		</div>
		</div>

Advantages of Tailwind CSS

• Customizable: Tailwind CSS framework is admiringly customizable. It comes with a default configuration but overriding it with a tailwind config file is simpler than you thought. The configuration file allows easy customization of color palettes, styling, spacing, themes, etc.

• Common Utility Patterns: Specifying classes, organizing, cascading them, and many other problems can be solved with Tailwind CSS because of common utility patterns

• Responsive Layout: Regarding responsiveness, the tailwind framework uses the first mobile approach to build responsive websites. Utility classes make the process a lot simpler to build a complex layout without causing you much trouble regarding responsiveness. The Tailwind CSS provides a way to add classes on various breakpoints.

• Community Support: Tailwind CSS users grow faster with time, and now Tailwind CSS has a vast community with many active members. Whenever you are stuck with unsolvable issues or CSS-related queries. You can ask your question in the community portal, and fellow members indeed give you a speedy solution to the issue.

Conclusion

Frameworks are a valuable option for speeding up your design work. They enable the creation of professional and stunning web pages while maintaining consistency in design.

If you are working on a large project, implementing tailwind CSS will give you many benefits, such as maintainability and scalability. The built-in styling options will help you create more interactive website/application designs.