CSS is one incredibly flexible technology for styling web applications. In CSS frameworks, we are always in search of the best approach to style web pages.
There are many CSS modules, and many people work with CSS in JavaScript. In the CSS world, there are many options according to one’s needs and requirements. But in this article, we will discuss one completely different framework that is gaining worldwide attention recently, i.e., Tailwind CSS.
Table of Contents
What is Tailwind CSS?
Tailwind CSS is one of the fastest and the easiest solutions to create web applications. It is known as the “utility-first” framework of CSS that contains CSS classes and tools to get started quickly with custom interfaces. It is based on a set of classes which modifies one or more CSS attribute.
The beauty of tailwind lies in the freedom of constructing a unique interface as it does not impose any specifications for the design.
In tailwind CSS, we process a ‘raw’ CSS file with a configuration file and generates output. The classes are used for creating rapid custom designs easily. Tailwind is a utility-first CSS framework.
Why use Tailwind CSS?
- Tailwind provides a fast UI building process.
- It is an easy solution for making customized websites.
- Unlike Bootstrap or Materialize CSS, Tailwind does not impose pre-defined components.
- You can build your modern website with Tailwind CSS without leaving HTML.
- We do not need to write CSS in a traditional style.
- Tailwind CSS contains classes, so there is no need to give a silly class name.
- It makes a responsive website.
- If we want a change in the CSS file, all those properties will be changed in the HTML file linked to it. But if we are using Tailwind CSS, utility classes are used for making local changes.
What are Tailwind Classes?
Tailwind CSS provides utility classes, which means we have multiple classes that we can use for designing. Those classes get a direct link to the Tailwind documents.
- Flexbox
- Grid
- Padding
- Background Color
- Font Size
How to Install and Configure?
There are two ways to install Tailwind CSS, one is installation via npm, and the other is via CDN.
CDN comes with limitations like:
- No installation of third-party plugins
- Few directives are not allowed
- Tailwind customized default theme can’t be used
You have to Include the stylesheet inside the tag <head> in the html for the Tailwind CSS file via CDN:
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> Note: It is not a recommended method.
Getting started with Tailwind CSS via npm
NPM is a package manager. It is recommended to install Tailwind CSS via npm as it provides easy maintainability of dependencies and libraries.
Note: Make sure you have Node.js and npm installed on your computer.
Follow these steps to start with tailwind CSS.
Step#01
Open the command prompt. First, get into the folder where you have saved the file for your programming in tailwind CSS.
cd Desktop
mkdir tailwindCSS
cd tailwaindCSS 
Check the version of your npm installed; if not installed, then install Node.js first.
npm -v 
Step#02
Run this command in the following way to create a new package. JSON file. It will help us to manage the dependencies.
npm init -y 
Step#03
Run this command to install the Tailwind CSS locally.
npm install tailwindcss 
Step#04
Create a local CSS file with the name tailwind.css and use the directive @tailwind to inject base, component, and style utilities in your CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities; Step#05
Here we will create a configuration file for making custom designs. It is an optional step to make a config file.
npx tailwindcss init 
Step#06
In last, we have to run these commands for setting up the generated configuration file. It will generate one file, i.e., style.css. The file tailwind.css will be compiled over the style.css file.
npx tailwindcss build styles.css -o output.css 
The above command will create a CSS style sheet named style.css. This file will be included in HTML code.
Note: Remember, you will not include the file tailwind.css with directives in the HTML code. Instead, style.css will be included.
How to use Tailwind CSS?
The following code is an example to learn how you can use Tailwind CSS in your HTML code for better designing.
Example Code# 01
Let’s start with a simple code.
<!DOCTYPE html>
<html>
<head>
<title> Tailwind CSS </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
</html>
<body>
<h1 class="bg-blue-500 border-blue-800 border-b p-6 m-6 rounded font-bold text-center">
Learn with Code Leaks!
</h1>
</body>
</html>
We have used different classes in the code. For example,
- bg-blue-500: This is setting the background color like blue with shade number 500.
- border-blue-800: It gives a blue border color in a slightly darker shade.
- border-b: The bottom border is made visible with this class.
- p-6 and m-6: These classes are for margin and padding of 6 units.
- Rounded: The element will have rounded corners.
- font-bold: This class is used to make the text bold.
- text-center: This sets the text alignment as centered. You can change it to left or right, as per your requirement.
Let’s look at the output.
Output:
Example Code# 02
Let’s work on another example to cover some more classes.
<!DOCTYPE html>
<html>
<head>
<title>Tailwind CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="flex flex-col items-center justify-center">
<input class="border focus:border-blue-800
focus:outline-none p-6 m-6
placeholder-black-600"
type="text"
placeholder="Click Here" />
<h1 class="font-bold">font weight</h1>
<h1 class="text-lg">font size</h1>
<h1 class="tracking-widest">typography</h1>
<h1 class="uppercase">Guess it yourself!</h1>
</div>
<div class="md:flex md:flex-wrap m-4">
<div class="bg-black-600
p-4 md:w-1/4
md:bg-red-600">
Break the
</div>
<div class="bg-yellow-600 p-4 md:w-1/4">
Code Barrier
</div>
<div class="bg-green-600 p-5 md:w-1/4">
with
</div>
<div class="bg-blue-600 p-5 md:w-1/4">
Code Leaks!
</div>
</div>
</body>
</html>
Output:
Conclusion
Tailwind CSS is a custom CSS framework. It is an interesting and different technique of creating unique, custom, and responsive design with ease. It is different from the traditional CSS framework. As it does not have pre-defined components, you can build your webpage with your style.
I hope the installation process and example code snippets are pretty helpful in learning CSS with Tailwind.
