May 2, 2024
Tailwind CSS: A Utility-First CSS Framework
Tailwind CSS is a utility-first CSS framework that streamlines the process of building modern web applications. By providing a set of utility classes, Tailwind CSS enables developers to create custom designs without the need for writing custom CSS. Let's explore the key features and benefits of Tailwind CSS and how it can enhance your web development workflow.
What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides a set of pre-built classes to style your web applications. It is designed to be customizable and extensible, allowing you to create a unique design system for your projects.
Why use Tailwind CSS?
Tailwind CSS offers several advantages over traditional CSS frameworks, making it a popular choice among developers for modern web development projects. Some of the key reasons to use Tailwind CSS include:
- Utility-first simplicity: Tailwind CSS offers utility classes instead of pre-designed components, allowing for unique and customizable designs akin to building with LEGO blocks. This contrasts with traditional frameworks, offering a more direct and intuitive approach to styling directly within HTML.
- Efficient reusability: Once you grasp the utility classes, replicating designs across your website becomes effortless, ensuring consistency and expediting development without the need for repetitive custom CSS.
- Automatic style optimization: Tailwind CSS's "purge" feature automatically removes unused styles, streamlining CSS files and optimizing performance by ensuring only necessary styles are included.
- Minimal custom code: While Tailwind CSS supports custom CSS, its extensive utility class library minimizes the need for it, resulting in cleaner and more efficient code by leveraging Tailwind's optimized classes.
- Direct workflow: By allowing styling directly within HTML, Tailwind CSS simplifies the design process, eliminating the need to toggle between HTML and separate CSS files and facilitating a more streamlined workflow.
- Seamless integration: Tailwind CSS seamlessly integrates with various JavaScript frameworks, including React, Vue, Angular, and plain JavaScript, ensuring compatibility and ease of use across diverse projects.
- Active community support: With an active community and dedicated team continually improving the framework and its integration with other tools, Tailwind CSS remains relevant and adaptable to evolving web development needs.
Get started with Tailwind CSS
Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible, and reliable — with zero-runtime.
- Install Tailwind CSS
Install tailwindcss via npm, and create your tailwind.config.js file.
npm install -D tailwindcss
npx tailwindcss init- Configure your template paths
Add the paths to all of your template files in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}- Add the Tailwind directives to your CSS
Add the tailwind directives for each of Tailwind’s layers to your main CSS file.
@tailwind base;
@tailwind components;
@tailwind utilities;- Start the Tailwind CLI build process
Run the CLI tool to scan your template files for classes and build your CSS.
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch- Start using Tailwind in your HTML
Add your compiled CSS file to the head of your HTML file.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./output.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>Utility-First Fundamentals
Building complex components from a constrained set of primitive utilities.
Traditionally, whenever you need to style something on the web, you write CSS. Using a traditional approach where custom designs require custom CSS.
<div className="chat-notification">
<div className="chat-notification-logo-wrapper">
<img className="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div className="chat-notification-content">
<h4 className="chat-notification-title">ChitChat</h4>
<p className="chat-notification-message">You have a new message!</p>
</div>
</div>
<style>
.chat-notification {
display: flex;
align-items: center;
max-width: 24rem;
margin: 0 auto;
padding: 1.5rem;
border-radius: 0.5rem;
background-color: #fff;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.chat-notification-logo-wrapper {
flex-shrink: 0;
}
.chat-notification-logo {
height: 3rem;
width: 3rem;
}
.chat-notification-content {
margin-left: 1.5rem;
}
.chat-notification-title {
color: #1a202c;
font-size: 1.25rem;
line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}
</style>With Tailwind, you style elements by applying pre-existing classes directly in your HTML. Using utility classes to build custom designs without writing CSS.
<div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div className="shrink-0">
<img className="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div className="text-xl font-medium text-black">ChitChat</div>
<p className="text-slate-500">You have a new message!</p>
</div>
</div>The versatility of Tailwind CSS 3.4
The Tailwind CSS core team conceived and developed version v3.4. This update addresses everything from historical annoyances to the integration of advanced CSS features, showing the team's commitment to continuous improvement and innovation in development tools for the community.
- Dynamic viewport units: Full-height elements that actually work on mobile.
- New :has() variant: Style parent elements based on their children.
- Style children with the * variant: We’ll probably regret giving you this one.
- New size-* utilities: Set width and height at the same time, finally.
- Balanced headlines with text-wrap utilities: No more max-width tweaking or responsive line breaks.
- Subgrid support: That grid feature you struggle to understand, finally in Tailwind CSS.
- Extended min-width, max-width, and min-height scales: Now min-w-12 is a real class.
- Extended opacity scale: For those moments when neither 60% or 70% were quite right.
- Extended grid-rows-* scale: Might as well make it match the column scale.
- New forced-colors variant: Easily fine-tune your site for forced colors mode.
- New forced-color-adjust utilities: For even more forced colors fine-tuning.
Updating to the latest version
With the following command you can update your project to the latest version of Tailwind CSS:
npm install tailwindcss@latestTailwind CSS in the state of CSS 2023
In this graph we can see the positive experiences (“I want to learn”, “I would use again”) and the negative ones (“I am not interested”, “I would not use again”) on both sides of a central axis. The thickness of the bar represents the number of respondents aware of a technology.
In this edition, Tailwind CSS has higher interest, understanding and recommendation percentages than most of its competitors in the market. Although it is not the most used framework, it is worth recognizing its great acceptance and rapid growth in the developer community.
Agnostic integration with other frameworks and libraries
In the oficial documentation you can find guides for the integration of Tailwind CSS with the most popular frameworks and libraries in the market. This allows you to take advantage of the benefits of Tailwind CSS in your projects, regardless of the technology stack you are using.
Among the most popular are Next.js, Vite, Nuxt, Angular, Astro and Qwik.
Next innovations in Tailwind CSS 4.0.alpha
Tailwind CSS 4.0.alpha is the next major release of the framework, introducing new features and improvements to make it even more powerful and versatile. In this section, we will discuss some of the upcoming innovations in Tailwind CSS 4.0.alpha.
A new engine, built for speed
The new engine is a ground-up rewrite, using everything we know about the framework now to better model the problem space, making things faster with a lot less code.
- Up to 10x faster — we can do a full build of the Tailwind CSS website in 105ms instead of 960ms, or our Catalyst UI kit in 55ms instead of 341ms.
- Smaller footprint — the new engine is over 35% smaller installed, even with the heavier native packages we ship like the parts we’ve rewritten in Rust and Lightning CSS.
- Rust where it counts — we’ve migrated some of the most expensive and parallelizable parts of the framework to Rust, while keeping the core of the framework in TypeScript for extensibility.
- One dependency — the only thing the new engine depends on is Lightning CSS.
- Custom parser — we wrote our own CSS parser and designed our own data structures tailored to our needs, making parsing over 2x as fast for us as it was with PostCSS.
Try out the alpha
You can start testing the 4.0.alpha version of Tailwind CSS in your projects today.
Using Vite
Install Tailwind CSS v4 alpha and our new Vite plugin:
npm install tailwindcss@next @tailwindcss/vite@nextThen add our plugin to your vite.config.ts file:
// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [tailwindcss()],
})Finally, import Tailwind in your main CSS file:
/* styles.css */
@import "tailwindcss";Using PostCSS
Install the Tailwind CSS v4 alpha and the separate PostCSS plugin package:
npm install tailwindcss@next @tailwindcss/postcss@nextThen add our plugin to your postcss.config.js file:
// postcss.config.js
module.exports = {
plugins: {
'@tailwindcss/postcss': {}
}
}Finally, import Tailwind in your main CSS file:
/* app.css */
@import "tailwindcss";Finals comments
Tailwind CSS is a powerful and versatile CSS framework that provides a set of pre-built classes to style your web applications. It is designed to be customizable and extensible, allowing you to create a unique design system for your projects. By following best practices and optimizing your workflow, you can create clean, efficient, and maintainable code with Tailwind CSS.
Previous
Next.js: A Framework for Modern Web Development
Next.js stands out as a renowned React framework streamlining the creation of contemporary web applications. Offering an array of functionalities, it accelerates development, enhances efficiency, and fosters an enjoyable coding experience. Let's delve into the significant advantages Next.js brings to the table and its potential for elevating your web development endeavors.
Next
TypeScript: Elevating Web Development to New Heights
TypeScript is a superset of JavaScript that adds static typing and other features to the language. It's designed to make it easier to write and maintain large-scale JavaScript applications, and it's become increasingly popular in recent years. Let's explore the benefits of TypeScript and how it can elevate your web development projects to new heights.