We are hiring

Showcase

Blog

The team

Careers

Cookies

By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage and assist in our marketing efforts

Cookies

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.

Screenshot of Tailwind CSS website. Source: Tailwind CSS.
Screenshot of Tailwind CSS website. Source: Tailwind CSS.

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:

Screenshot benefits of using Tailwind CSS. Source: https://www.material-tailwind.com/blog/7-reasons-why-you-should-use-tailwind-css
Screenshot benefits of using Tailwind CSS. Source: https://www.material-tailwind.com/blog/7-reasons-why-you-should-use-tailwind-css
  • 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.

Presentation of Tailwind CSS version 3.4. Source: Tailwind CSS.
Presentation of Tailwind CSS version 3.4. Source: Tailwind CSS.
  • 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@latest

Tailwind 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.

Screenshot of State of CSS 2023 survey. Source: https://2023.stateofcss.com/en-US/css-frameworks
Screenshot of State of CSS 2023 survey. Source: https://2023.stateofcss.com/en-US/css-frameworks

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.

Screenshot of Tailwind CSS documentation. Source: Tailwind CSS.
Screenshot of Tailwind CSS documentation. Source: Tailwind CSS.

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.

Presentation of Tailwind CSS version 4.0.alpha. Source: Tailwind CSS.
Presentation of Tailwind CSS version 4.0.alpha. Source: Tailwind CSS.

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@next

Then 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@next

Then 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.


Copyright © 2024 A-SAFE Digital. All rights reserved.