Tailwind CSS is a utility-first CSS framework that streamlines web development by providing a set of pre-designed utility classes. These classes enable rapid styling without writing custom CSS, promoting consistency and scalability. Tailwind’s approach shifts focus from traditional CSS components to functional classes, empowering developers to efficiently build responsive and visually appealing interfaces with minimal effort.
Why Tailwind CSS?
- The faster UI-building process
- It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in the traditional approach.
Advantages of Tailwind CSS:
- No more silly names for CSS classes and IDs.
- Minimum lines of Code in CSS file.
- We can customize the designs to make the components.
- Makes the website responsive.
-
Makes the changes in the desired manner.
CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS, we can use utility classes and make local changes.
Why use Tailwind over other CSS framework
- Tailwind’s utility-first methodology offers granular control over styling, enabling precise customization and faster prototyping without overriding framework styles.
- Unlike traditional frameworks, Tailwind allows extensive customization and avoids pre-built component styles, offering flexibility in design.
- Tailwind’s utility classes eliminate the need for writing custom CSS, resulting in smaller file sizes and faster load times.
- Tailwind simplifies responsive design with built-in classes, facilitating the creation of mobile-friendly layouts without additional media queries or complex styling.
- With its extensive documentation and intuitive syntax, Tailwind accelerates development by streamlining the styling process and reducing iteration time.
Installation: There are two ways to use the CSS we can install them on our server or we can use the CDN link as well.
Method 1: Install Tailwind via npm
- Step 1:
npm init -y
- Step 2:
npm install tailwindcss
- Step 3:Use the @tailwind directive to inject Tailwind’s base, components, and utility styles into your CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;
- Step 4: This is used to create a config file to customize the designs. It is an optional step.
npx tailwindcss init
- Step 5:This command is used to compile style.css is the file that has to be compiled and output.css is the file on which it has to be compiled. If the file output.css is not created earlier then it will automatically be created.
npx tailwindcss build styles.css -o output.css
Method 2: Using Tailwind via CDN
<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css”rel=”stylesheet”>
Limitation of Tailwind: There are some limitations when CDN is used. Some of them are:
- Customize Tailwind’s default theme can’t be used
- Directives like @apply, @variants, etc can’t be used
- Can’t install third-party plugins
Example: In this example, we imports Tailwind CSS via CDN and applies margin to the body. It includes a heading styled with Tailwind utility classes and content about Tailwind CSS.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<!-- Tailwind CSS CDN link -->
<link href=
"https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="m-4">
<h1 class="text-green-500 text-4xl font-bold">
Geeksforgeeks
</h1>
<strong>Tailwind CSS Tutorial</strong>
<p>
You can use Tailwind CSS as a replacement of CSS,
this is a framework that increase your pace to
design any website.
</p>
</body>
</html>
|
Output:
Supported Browser: