installation

Install tailwindcss by following one of the installations by visiting the official documentation of tailwindcss: https://tailwindcss.com/docs/installation

Utility-first

  • Utility-first is the approach Tailwind CSS follows. Instead of writing custom CSS, you use predefined classes to style your elements.
  • Each class does one specific thing, like .text-center centers the text, or .bg-blue-500 sets the background color to blue.
  • This makes building user interfaces faster, more consistent, and highly customizable without writing a lot of custom CSS.

Some of the benefits of using tailwindcss are:

Saves time: You aren’t wasting energy inventing class names. No more adding silly class names like sidebar-inner-wrapper just to be able to style something, and no more agonizing over the perfect abstract name for something that’s really just a flex container.

Your CSS stops growing: Using a traditional approach, your CSS files get bigger every time you add a new feature. With utilities, everything is reusable so you rarely need to write new CSS.

Making changes feels safer: CSS is global and you never know what you’re breaking when you make a change. Classes in your HTML are local, so you can change them without worrying about something else breaking

Preflight

When you install Tailwind, you need to import three different files with the commands: @tailwind base, @tailwind components, and @tailwind utilities. Each of these files contains a different set of CSS rules.

@tailwind base contains Tailwind’s reset stylesheet called Preflight.

A reset stylesheet is a restyling of all the base HTML elements to a minimal set of styling properties. Without a reset stylesheet, each browser defines its own default set of style properties for how to render individual HTML elements that don’t have further CSS properties.

Using a reset stylesheet gives our application control over this baseline, eliminating differences between browsers and providing a more minimal backdrop into which we insert our own custom styling.

Duplication

A common concern when looking at Tailwind and the long sets of class lists you often need to accomplish your design goals is how to manage duplication. That is, if you need to type class="text-6xl font-bold text-blue-700" for every h1. What if your h1 design changes?

Tailwind provides a CSS directive called @apply and a directive called @layer.

The @apply directive lets you use Tailwind classes in the definition of other CSS selectors. So we can redefine our header classes in CSS like this:

@layer components {
  .title { @apply text-6xl font-bold }
  .subtitle { @apply text-4xl font-semibold }
  .subsubtitle { @apply text-lg font-medium italic }
}

And you can then use those like any other CSS classes:

<div class="title">Title</div>

The @layer directive can either be base, components, or utilities. As far as the browser is concerned, if you use @layer, the selectors are defined as part of whatever layer you declare, no matter where in your CSS files the selector definitions are actually located.

Using @layer components defines the selector as part of the components and before the utilities. This means if you combine one of our own definitions with a Tail- wind utility, the utility wins, which is what we want. So we can define, say, an extra big title with:

<div class="title text-5xl">Title</div>

units

Tailwind uses a variety of units:

  • rem for most spacing and sizing (1rem = 16px by default)
  • em for some typography-related utilities
  • pixels (px) for very small values and border widths
  • percentages for certain responsive utilities

prefixes

1. Responsive prefixes:

Tailwind uses these prefixes to apply styles at specific breakpoints. The default breakpoints are:

  • sm: 640px
  • md: 768px
  • lg: 1024px
  • xl: 1280px
  • 2xl: 1536px

Example: md:text-lg means "apply text-lg class when the screen width is at least 768px".

2. State prefixes:

These are used to apply styles when an element is in a particular state.

  • hover: Styles apply when the mouse is over the element.
  • focus: Styles apply when the element has focus (e.g., selected input field).
  • active: Styles apply when the element is being actively clicked.

Example: hover:bg-blue-600 changes the background color to blue-600 when the mouse hovers over the element.

3. Dark mode prefix:

The dark: prefix is used to apply styles when dark mode is active. This can be based on user preference or manually toggled.

Example: dark:bg-gray-800 sets the background color to gray-800 in dark mode.

4. Group prefix:

The group and group-hover: prefixes allow you to style an element based on the state of a parent element.

To use this:

  1. Add the group class to the parent element.
  2. Use group-hover: (or other group-state) classes on child elements.

Example:

<div class="group">
  <p class="group-hover:text-blue-500">
    This text turns blue when you hover over the parent div.
  </p>
</div>

These prefixes can often be combined, like sm:hover:bg-blue-500 which would apply a blue background on hover, but only on screens 640px and wider.