Tailwind CSS Utility-First

Tailwind CSS's Utility-First is a practical-first design approach that allows developers to apply predefined style classes directly to HTML elements without writing traditional CSS code.

Tailwind CSS's core philosophy is Utility-First. This design concept means you can achieve complete styling by combining single-purpose CSS classes rather than relying on complex custom styles.

Tailwind CSS provides a large number of utility classes, each performing a simple styling task, for example,text-centeris used to center text,bg-blue-500is used to set the background color,p-4is used to set padding, etc.

Common utility classes:

CategoryUtility Class ExamplesDescription
Typographytext-center, text-lg, font-boldControls text alignment, font size, font weight, etc.
Backgroundbg-blue-500, bg-opacity-50Sets the background color, background image, and opacity of an element.
Spacingp-4, m-2, mt-8Controls the element's padding and margin.
Layoutflex, grid, blockSets the display type and layout method of an element.
Sizingw-32, h-48Sets the width and height of an element.
Bordersborder, border-2, roundedSets the element's border, border width, and border radius.
Shadowsshadow, shadow-lgControls the shadow effect of an element.
Opacityopacity-50, opacity-100Sets the opacity of an element.
Responsivesm:text-lg, md:bg-blue-300Controls style changes under different screen sizes.
Statehover:bg-blue-700, focus:ring-4Sets the style of an element under different interaction states (such as hover, focus, active).

Advantages of Utility Classes

  • Concise and efficient: Each utility class handles a single small styling operation. Developers can combine different classes as needed to quickly complete page layout and styling.
  • Flexibility: Through the combination of classes, almost any style can be achieved without writing complex CSS code.
  • Responsive support: Tailwind provides built-in responsive classes, making it very convenient to adjust layout and styles based on screen size.
  • Avoid naming conflicts: Since each class has a clear and independent purpose, using utility classes avoids the problems of naming conflicts and style overrides found in traditional CSS.

Practical Applications of Utility Classes

1. Text-Related Utility Classes

  • text-center: Sets the text alignment to center.
  • text-lg: Sets the font size tolg(large font).
  • font-bold: Makes the text font bold.
  • text-red-500: Sets the text color to red (500is a specific shade of red).

Example

<p class="text-center text-lg font-bold text-red-500">Hello, Tailwind!</p>

2. Background-Related Utility Classes

  • bg-blue-500: Sets the background color of the element to blue.
  • bg-opacity-50: Sets the background opacity to 50%.
  • bg-cover: Adjusts the background image size to fully cover the element.

Example

<div class="bg-blue-500 bg-opacity-50 p-4">
  <h1 class="text-white">Welcome to Tailwind</h1>
</div>

3. Spacing-Related Utility Classes

  • p-4: Sets the element's padding to1rem。
  • m-8: Sets the element's margin to2rem。
  • mt-4: Sets the element's top margin to1rem。

Example

<div class="m-8 p-4 mt-4">
  <p>This box has padding and margin.</p>
</div>

4. Layout-Related Utility Classes

  • flex: Sets the layout mode of the element to flexbox.
  • grid: Sets the layout mode of the element to CSS Grid.
  • items-center: Vertically centers the child elements inside a flexbox container.
  • justify-between: In a flexbox container, the space between child elements is evenly distributed.

Example

<div class="flex items-center justify-between">
  <div class="bg-blue-500 text-white p-4">Item 1</div>
  <div class="bg-blue-500 text-white p-4">Item 2</div>
</div>

5. Border and Border Radius Utility Classes

  • border: Adds a border.
  • border-2: Sets the border width to2px。
  • rounded-lg: Sets the element's border radius to0.5rem。

Example

<div class="border border-2 rounded-lg p-4">
  <p>This box has a border and rounded corners.</p>
</div>

6. Shadow-Related Utility Classes

  • shadow: Adds a default shadow to the element.
  • shadow-lg: Adds a larger shadow.
  • shadow-none: Removes the shadow.

Example

<div class="shadow-lg p-6">
  <p>This box has a large shadow.</p>
</div>

7. Responsive Utility Classes

Tailwind provides responsive utility classes that can apply different styles at different screen sizes. Common screen sizes includesm(small screens),md(medium screens),lg(large screens),xl(extra large screens).

  • sm:: Only takes effect when the screen width is greater than or equal to 640px.
  • md:: Only takes effect when the screen width is greater than or equal to 768px.
  • lg:: Only takes effect when the screen width is greater than or equal to 1024px.
  • xl:: Only takes effect when the screen width is greater than or equal to 1280px.

Example

<div class="bg-blue-500 sm:bg-green-500 lg:bg-red-500 p-4">
  <p>This background color changes based on the screen size.</p>
</div>

8. State Utility Classes

Tailwind supports utility classes for interaction states, such ashover:, focus:, active:etc.

  • hover:bg-blue-700: When the element is hovered over by the mouse, the background color changes to blue.
  • focus:outline-none: When the element gains focus, removes the default border outline.
  • active:bg-red-500: When the element is in the active state, the background color changes to red.

Example

<button class="hover:bg-blue-700 focus:outline-none active:bg-red-500">
  Hover or Focus Me!
</button>

Example

Using the traditional approach, define custom CSS styles:

Example

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img class="chat-notification-logo" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="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>

Try it Yourself »

Next, let's look at using Tailwind to style elements directly in HTML with pre-existing classes without writing CSS:

Example

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">
  <div class="shrink-0">
    <img class="size-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-slate-500">You have a new message!</p>
  </div>
</div>

Try it Yourself »

The following is an analysis of each class name in the code:

Outer container:<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center gap-x-4">

Class name Purpose
p-6 Sets the element's padding to 1.5rem (24px).
max-w-sm Sets the element's max width tosm, corresponding to approximately 24rem (384px).
mx-auto Sets the horizontal margin toauto, centering the element horizontally.
bg-white Sets the element's background color to white.
rounded-xl Sets the border radius toxl, i.e., 0.75rem (12px).
shadow-lg Adds a larger shadow effect to make the container look like it is floating.
flex Sets the element's layout mode toflexbox, making it easy for child elements to be arranged in rows.
items-center Vertically centers the child elements.
gap-x-4 Sets the horizontal spacing between child elements in the flex container to 1rem (16px).

Left container:<div class="shrink-0">

Class name Purpose
shrink-0 Prevents the element from shrinking, ensuring its size is not affected by other elements in the flex container.

Image:<img class="size-12" src="../img/logo.svg.html" alt="ChitChat Logo">

Class name Purpose
size-12 This is not a native Tailwind class. It may be a custom class used to set the image size.

Right content container:<div>

No class name, contains text content as a child element.

Title text:<div class="text-xl font-medium text-black">ChitChat</div>

Class name Purpose
text-xl Sets the font size toxl, i.e., 1.25rem (20px).
font-medium Sets the font weight tomedium, i.e., 500.
text-black Sets the text color to black.

Description text:<p class="text-slate-500">You have a new message!</p>

Class name Purpose
text-slate-500 Sets the text color toslate-500, i.e., slate gray (medium shade).
Other Extensions