Amina
Amina's Blog

lorem ipsum

Jun 25, 2024 6 minute read

Tailwind CSS - a Utility-First CSS Framework

Table of Contents

  1. What is Tailwind CSS?
  2. Key Features of Tailwind CSS
  3. Core Concepts
  4. Getting Started
  5. Useful Links

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework designed to provide low-level utility classes for styling HTML elements without writing custom CSS. Unlike traditional frameworks like Bootstrap or Foundation, Tailwind focuses on providing a set of classes that can be combined to create any design directly in your markup.

Tailwind’s utility-first approach offers a more flexible and modular way to style applications, making it easier to create custom designs without having to override existing styles.

Key Features of Tailwind CSS

Utility-First Approach

Tailwind CSS uses a utility-first approach, meaning it provides a wide array of single-purpose utility classes. These classes can be combined to build complex designs without writing custom CSS.

Customization

Tailwind is highly customizable. Its configuration file, tailwind.config.js, allows you to customize the default theme, extend the framework with new utilities, and even define your own design system.

Responsive Design

Tailwind CSS includes built-in responsive design utilities, enabling you to easily create responsive layouts by applying different styles at different breakpoints.

Core Concepts

Utility Classes

Tailwind provides a wide range of utility classes for various CSS properties. Here are some examples:

<div class="m-2 bg-blue-500 p-4 text-white">
This is a Tailwind CSS example.
</div>

In the example above, I’ve used:

  • Padding utility (p-8): Adds padding of 2rem to all sides of the container. This provides ample space inside the container.
  • Margin utility (m-2): Adds margin of 0.5rem to all sides of the element.
  • Background color utility (bg-blue-500): Sets the background color to a shade of blue (#3B82F6).
  • Text color utility (text-white): Sets the text color to white (#FFFFFF).

Responsive Utilities

Tailwind makes it easy to apply styles at different screen sizes using responsive utility variants:

<div class="p-4 sm:p-6 md:p-8 lg:p-10">
  Responsive Padding
</div>

There are five breakpoints by default, inspired by common device resolutions:

Breakpoint prefix Minimum width CSS
sm 640px @media (min-width: 640px) { ... }
md 768px @media (min-width: 768px) { ... }
lg 1024px @media (min-width: 1024px) { ... }
xl 1280px @media (min-width: 1280px) { ... }
2xl 1536px @media (min-width: 1536px) { ... }

State Variants

Tailwind supports state variants like hover and focus:

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Hover me
</button>

Dark Mode

Tailwind also includes built-in support for dark mode:

<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
  Dark Mode Example
</div>

Getting Started

Installation

Play CDN

The easiest way to start using Tailwind’s utility classes to style your content is to add the Play CDN script tag to the <head> of your HTML file:

<script src="https://cdn.tailwindcss.com"></script>

Example:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Tailwind CLI

Another way to get started with Tailwind CSS, is to install it via npm:

npm install tailwindcss

Next, generate the configuration file:

npx tailwindcss init

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: [],
}

Then add the @tailwind directives for each of Tailwind’s layers to your main CSS file:

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

After that, 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

Lastly, add your compiled CSS file to the <head> and start using Tailwind’s utility classes to style your content.

Frameworks & Tailwind CSS

There are also guides that cover the approach to installing Tailwind CSS in a Framework like Laravel, Next.js or Symfony.

For more information on that, check out Tailwind’s Documentation for Frameworks.

Basic Example

The following example, is a realistic card component, which could be used on a real website:

<div class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:shrink-0">
      <img class="h-48 w-full object-cover md:h-full md:w-48" src="https://via.placeholder.com/150" alt="A placeholder image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Case Study</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Finding the right design</a>
      <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

To see the output of this code snippet, check out Tailwind’s Playground.

Advanced Usage

Customization

Tailwind’s configuration file allows you to define a custom design system:

You can customize your Tailwind setup by editing the tailwind.config.js file. There you can extend the default theme, add custom colors, spacing, and more.

Example:

module.exports = {
    theme: {
        extend: {
            colors: {
                clifford: '#da373d',
            }
        }
    }
}

Using Plugins

Tailwind CSS has a rich ecosystem of plugins. To use a plugin, install it via npm:

npm install @tailwindcss/forms

And include it in your configuration:

// tailwind.config.js
module.exports = {
  plugins: [
    require('@tailwindcss/forms'),
  ],
}
Amina