Tailwind CSS Cheat Sheet

"Tailwind CSS" is becoming synonymous with the frontend tech stack. Learning and using it in small demo pages for enterprise-level projects is highly recommended and this Tailwind CSS cheat sheet is here to help you with that.

Tailwind is a utility-first CSS framework that lets you add styles to your web pages without writing a single line of custom CSS code.

Here 'utility-first' means that it works on low-level utilities, which are essential to style any HTML element we want. Also, you don't need to write traditional CSS code anywhere; all you need to know is what these utility classes do and how they work.

Let's take a look at a straightforward styling of a box element. If you want to make this type of box:

Then typically, using vanilla CSS, you will write the following code:

div {
  width: 200px;
  height: 200px;
  display: block;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  margin: 0 auto;
}

Now the same style can be written with Tailwind as:

<div class="flex min-h-screen flex-col justify-center bg-white">
  <div class="sm:mx-auto">
    <div class="rounded-lg bg-orange-400 p-20 shadow-lg" />

Before we start with the technical details, let's first talk about something important: browser support. Generally, Tailwind’s latest version, as of writing this cheat sheet (v3.0), is designed and tested to work on the latest stable versions of Chrome, Firefox, Edge, and Safari. And, of course, it doesn’t work with any version of Internet Explorer.;

It also includes APIs for several new and experimental features supported by all browsers, like :focus-visible pseudo-class and backdrop-filter utilities.

Here, we are showcasing all of the major Tailwind classes in this cheat sheet to let you understand its working and styling. Let's begin!

Basic Level - Tailwind CSS Cheat Sheet

1. Core concepts: Hover and focus states

To add hover, focus, and any other CSS state to an element, we need to follow a single rule:

Every utility class in Tailwind can be applied conditionally by adding a modifier to the beginning of the class name that describes the condition you want to target.

Hover state

Traditionally, if we wanted to write a hover style rule in CSS, we would use the:hover selector after the class name:

.btn-primary {
  background-color: #4ca154;
}

.btn-primary:hover {
  background-color: #306339;
}

But in Tailwind, we simply apply thehover: modifier before the background color class:

.btn-primary {
  background-color: #4ca154;
}

.btn-primary:hover {
  background-color: #306339;
}

So we simply appliedhover:bg-green-800, and it produces the following equipment CSS code:

.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.hover\:bg-green-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
}

We can see how hover:bg-green-800 only defines the styles for the :hover state. This is called conditionally applying the utility classes.

Focus and active states

We can also style elements on:focus and:active states just like:hover as shown below:

Let's break it down; here we are giving it a 2px solid outline of transparent color on focus(focus:outline-none), adding a solid dark greenbox-shadow withfocus:ring focus:ring-green-900, and while the button is in the active state, we are giving it thegreen-700 color.

2. Responsive design

We apply every utility class in Tailwind conditionally at different breakpoints as needed. By default, you get the following five breakpoints:

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

To make any HTML element responsive, we need to prefix the utility class with the breakpoint name, as shown above, followed by the : character.

One rule of thumb we need to remember while making our website responsive with Tailwind is that it uses a mobile-first breakpoint system. This means that the default unprefixed utilities like uppercase take effect on all screen sizes while prefixed utilities like md:uppercase only take effect at that specified breakpoint and above.

For example, if we want to make a card element responsive, we can write something like this:

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-gray-50 shadow-lg md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-52 w-full object-cover md:h-full md:w-48" src="/blogheader.jpg" alt="My image alt description" />
      </div>
      <div class="p-8">
        <a href="#" class="mt-1 block text-lg font-bold leading-tight text-gray-800">My incredible blog post</a>
        <p class="mt-2 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan eros elementum massa dignissim.</p>
      </div>
    </div>
  </div>

By default, all the elements have thedisplay: block property, but we add themd:flex utility to the outerdiv, which enables our card item to be a flexbox on medium screens and larger.

For the image, we addmd:shrink-0 so that our image doesn't shrink on medium and larger screens when the parent is a flex container. On small screens, the image's dimensions (width and height) are automatically set by default, but on medium and above screens, we constrained the width to a fixed size and ensured that the image is all full height using themd:h-full andmd: w-48 utilities.

3. Dark mode

Tailwind includes adark variant that lets you style your website differently only when the dark mode is enabled.

If we take the above card example, then we would add the following new utilities for dark mode:

<div class="mx-auto max-w-md overflow-hidden rounded-xl bg-gray-50 shadow-lg dark:bg-slate-800 md:max-w-2xl">
    <div class="md:flex">
      <div class="md:shrink-0">
        <img class="h-52 w-full object-cover md:h-full md:w-48" src="/blogheader.jpg" alt="My image alt description" />
      </div>
      <div class="p-8">
        <a href="#" class="mt-1 block text-lg font-bold leading-tight text-gray-800 dark:text-white">My incredible blog post</a>
        <p class="mt-2 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan eros elementum massa dignissim.</p>
      </div>
    </div>
  </div>

We use dark:bg-slate-800 for the card body, dark:text-white for the link text and dark:text-gray-300 for the paragraph. By default, this variant uses the prefers-color-scheme CSS media feature.

4. Custom styles

Sometimes we need more than the default style options a CSS framework comes with. Be it the color options, the scaling system, adding custom CSS, etc. Tailwind supports customizing your styles in all these ways. Let's look at some of the different custom styles we can apply:

Theme customization: we can add our customization to the theme section of the tailwind.config.js file, where we can easily customize the color palette, spacing scale, typography, and more. Here's an example:

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px'
    },
    colors: {
      'blue': '#1fb6ff',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6'
    },
    fontFamily: {
      sans: [
        'Graphik', 'sans-serif'
      ],
      serif: ['Merriweather', 'serif']
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem'
      },
      borderRadius: {
        '4xl': '2rem'
      }
    }
  }
}

Arbitrary values: if we ever need to set a margin of108px instead of something close to what Tailwind offers, likem-28 (which equals tomargin: 7rem. or112px), then we can use Tailwind's square bracket notation to generate a class on the fly without any configurations like this:

<div class="margin-[108px]"></div>

It is like an inline styling system with a major benefit that now you can also apply other modifiers likehover or responsive modifiers likelg along with custom hex color values:

<div class="margin-[108px] hover:margin-[90px] lg:margin-[250px] bg-[#bada55]"></div>

Arbitrary properties: if there's any CSS property (something ;that's just experimental right now and is not shipped to the Tailwind's source code) that you can't find a utility class for, then you can use the same square bracket notation to write a completely arbitrary CSS class:

<div class="[mask-type:luminance]"></div>

And just like before, you can add more modifiers:

<div class="[mask-type:luminance] hover:[mask-type:alpha]"></div>

Base styles: if you want to have some default styling for a particular page, like a custom text color, background color, font family, etc., then the easiest option is to add some classes to thehtml orbody elements of your DOM:

<!DOCTYPE html>
<html lang="en" class="text-gray-900 bg-gray-100 font-serif">
</html>

5. Functions and directives

Tailwind exposes some custom functions and directives for use as needed.

Functions in Tailwind are evaluated at build-time and are replaced by static values in our final output CSS file.

They can be used to access Tailwind-specific values as shown in the following functions:

theme(): this is used to access Tailwind config values using the dot(.) notation:

.content-area {
  height: calc(100vh - theme(spacing.12))
}

screen(): this function allows us to create media queries that refer to our custom breakpoints by their name instead of duplicating their values:

@media screen(md) {
  //...
}

The code above will resolve to the underlying screen value at build-time in vanilla CSS like this:

@media (min-width: 768px) {
  //...
}

Directives are custom at-rules you can use in your CSS that offer some unique functionality for Tailwind projects.

Here are some of those:

@tailwind: this is used to insert Tailwind'sbase,components,utilities, andvariants styles into our CSS. You would typically use it when setting up Tailwind in your existing project. These styles inject the default base styles, component classes, utility classes, and variant-specific styles to be ready to use.

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

@layer: this tells Tailwind to which ‘bucket’ a set of custom styles belongs. The valid default layers arebase,components, andutilities. Tailwind automatically moves any CSS rules within a@layer directive to the same place as its corresponding@tailwind rule. Having a@layer directive makes it possible to use modifiers with custom variant rules likehover:,focus: ormd: andlg:.

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

@apply: this directive is used to inline any existing utility classes into our custom CSS styles. It's most helpful when we need to write custom CSS to override styles in a third-party library but still want to work with our design tokens and the same HTML-like syntax:

.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}

.select2-search {
  @apply border border-gray-300 rounded;
}

.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

Intermediate Level - Tailwind CSS Cheat Sheet

1. Layout with Flexbox and Grid

Flexbox and Grid are two of the most used display properties CSS developers use to make their layouts more responsive with great flexibility.

Tailwind comes with many utilities for creating our items flexbox with the following customizable options:

Flex basis: this controls the initial size of flex items. To start, we can use thebasis-{size} utilities after setting the parent container as flexbox:

<div class="flex flex-row">
  <div class="basis-1/4">01</div>
  <div class="basis-1/2">02</div>
  <div class="basis-1/4">03</div>
</div>

Flex: these utilities control how the flex items grow and shrink with respect to the space in the container. We can use flex-initial to allow a flex item but not grow that takes into account its initial size:

<div class="flex">
  <div class="flex-none w-14 h-14">
    01
  </div>
  <div class="flex-initial w-64 ...">
    02
  </div>
  <div class="flex-initial w-32 ...">
    03
  </div>
</div>

Order: these utilities are used to control the order of both flex and grid items. We can useorder-{order}to render flex and grid items in a different order than they appear in the DOM:

<div class="flex justify-between ...">
  <div class="order-last">01</div>
  <div>02</div>
  <div>03</div>
</div>

Grid template columns: these utilities are used to specify the columns in a grid layout. We can start by using the grid-cols-{n} utilities to create grids with n equally sized columns:

<div class="grid grid-cols-7 gap-6">
  <div>01</div>
  //...
  <div>09</div>
</div>

Grid template rows: these are the utilities to specify rows in a grid layout which can be defined by using the grid-rows-{n} utility classes to create grids with n equally sized rows.

<div class="grid grid-rows-4 grid-flow-col gap-4">
  <div>01</div>
  //...
  <div>09</div>
</div>

2. Spacing and sizing

Tailwind has the usual space and size properties like padding, margin, width, height, etc. Let's look at each of them one by one:

Padding: these utilities are used to control an element's padding.

To add padding to a single side, we can use thep{t|r|b|l}-{size} utilities. Here's an example:

<div class="pt-6 ...">Padding top of 6</div>
<div class="pr-4 ...">Padding right of 4</div>
<div class="pb-8 ...">Padding bottom of 8</div>
<div class="pl-2 ...">Padding left of 2</div>

For horizontal and vertical padding we can usepx-{size} andpy-{size} utilities:

<div class="pt-6 ...">Padding top of 6</div>
<div class="pr-4 ...">Padding right of 4</div>
<div class="pb-8 ...">Padding bottom of 8</div>
<div class="pl-2 ...">Padding left of 2</div>

To add padding on all four sides, we can simply use thep-{size} utility:

<div class="p-8 ...">Padding on all sides of 8</div>

Margin: these utility classes are used to control the margin of an element.

To add a margin on a single side, we can use them{t|r|b|l}-{size} utilities:

<div class="mt-6 ...">Margin top of 6</div>
<div class="mr-4 ...">Margin right of 4</div>
<div class="mb-8 ...">Margin bottom of 8</div>
<div class="ml-2 ...">Margin left of 2</div>

To add horizontal and vertical margins, we can usemx-{size} andmy-{size} utility classes:

<div class="mx-8 ...">Vertical margin of 8</div>
<div class="my-8 ...">Horizontal margin of 8</div>

To add margins on all four sizes, we use them-{size} utility:

<div class="m-8 ...">Margin on all sides of 8</div>

Space between: these utilities control the space between child elements.

To add horizontal and vertical spacing between child elements, we can usespace-x-{amount} andspace-y-{amount} utility classes, respectively:

<div class="flex space-x-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

<div class="flex flex-col space-y-4 ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
</div>

Width and height: these utilities are used to set the width and height of an element.

To add a fixed width and height, we can usew-{number} (orw-px) andh-{number} (orh-px) utility classes:

<div class="w-96 ..."></div>
<div class="w-80 ..."></div>
<div class="w-64 ..."></div>


<div class="h-96 ..."></div>
<div class="h-80 ..."></div>
<div class="h-64 ..."></div>

For full width and height, we usew-full andh-full classes, respectively:

<div class="h-48">
  <div class="h-full ..."></div>
</div>

3. Typography

From font family to uppercase/lowercase, Tailwind has all the classes you need. Here are some of the typography-specific utilities:

Font family: we can set the typeface of text using the following font-family utilities:

<p class="font-sans ...">This is a sans serif typeface ...</p>
<p class="font-serif ...">This is a serif typeface ...</p>
<p class="font-mono ...">This is a monospaced typeface ...</p>

Font size: to set the font size of an element, we can use thetext-{size} utility:

<p class="text-sm ...">A 14px font size ...</p>
<p class="text-base ...">A 16px font size ...</p>
<p class="text-lg ...">A 18px font size ...</p>
<p class="text-xl ...">A 20px font size ...</p>
<p class="text-8xl ...">A 96px font size ...</p>

Font style and weight: to set the font style to be italic and non-italic, we use theitalic andnot-italic utilities:

<p class="italic ...">Italic font style ...</p>
<p class="not-italic ...">Normal font style ...</p>

To set the weight of a font, we can use thefont-{weight} utilities as shown:

<p class="font-light ...">Font weight of 300 ...</p>
<p class="font-normal ...">Font weight of 400 ...</p>
<p class="font-medium ...">Font weight of 500 ...</p>
<p class="font-semibold ...">Font weight of 600 ...</p>
<p class="font-bold ...">Font weight of 700 ...</p>

Letter spacing and line height: we can control the tracking or letter spacing of an element using thetracking-{size} utility:

<p class="tracking-tight ...">The quick brown fox ...</p>
<p class="tracking-normal ...">The quick brown fox ...</p>
<p class="tracking-wide ...">The quick brown fox ...</p>

To control the leading or line height of an element, we use theleading-{number} utility or the following:

<p class="leading-normal ...">The quick brown fox...</p>
<p class="leading-relaxed ...">The quick brown fox...</p>
<p class="leading-loose ...">The quick brown fox...</p>

4. Backgrounds, borders, effects, and filters

There are many classes for all of these CSS styles. Let's take a look at each of them by one:

Background attachment: we can have fixed, local, and scroll as background property values for background-attachment. For this, you can usebg-fixed, bg-local, andbg-scroll like this:

<div class="bg-fixed ..." style="background-image: url(...)"></div>
<div class="bg-local ..." style="background-image: url(...)"></div>
<div class="bg-scroll ..." style="background-image: url(...)"></div>

Background clip: these utilities control the bounding box of an element's background usingbg-clip-{keyword} utilities:

<button class="bg-indigo-500 ...">Submit</button>

Background color: these utilities control the element's background color, which we can set it using thebg-{color} utilities:

<div class="bg-clip-border ..."></div>
<div class="bg-clip-padding ..."></div>
<div class="bg-clip-content ..."></div>

To add opacity to the background color, we can simply add a value like:

<button class="bg-sky-500/100 ..."></button>
<button class="bg-sky-500/75 ..."></button>
<button class="bg-sky-500/50 ..."></button>

Border: to add border-radius, we use therounded utilities:

<div class="rounded ..."></div>
<div class="rounded-md ..."></div>
<div class="rounded-lg ..."></div>
<div class="rounded-full ..."></div>

For border widths and colors, theborder-{number} andborder-{color} classes are used:

<div class="border border-sky-500"></div>
<div class="border-2 border-green-300"></div>
<div class="border-4 border-gray-400"></div>
<div class="border-8 border-slate-600"></div>

To control the box shadow of an element, we can use theshadow-{number} class:

<div class="shadow-md ..."></div>
<div class="shadow-lg ..."></div>
<div class="shadow-xl ..."></div>
<div class="shadow-2xl ..."></div>

We can also use inner shadows using theshadow-inner utility:

<div class="shadow-inner ..."></div>

Opacity: to control the opacity of an element, we use theopacity-{amount} class:

<button class="bg-indigo-500 opacity-100 ..."></button>
<button class="bg-indigo-500 opacity-75 ..."></button>
<button class="bg-indigo-500 opacity-50 ..."></button>
<button class="bg-indigo-500 opacity-25 ..."></button>

Background blend modes: to control how an element's background image should blend with its background color, we can use thebg-blend-{mode} utility:

<div class="bg-blend-multiply ..."></div>

Filters: Tailwind provides most of the common CSS filters like blur, brightness, contrast, and more.

To blur an element, use theblur-{amount?} utility:

<div class="blur-none ..."></div>
<div class="blur-sm ..."></div>
<div class="blur-lg ..."></div>
<div class="blur-2xl ..."></div>

For brightness and contrast, thebrightness-{amount?} andcontrast-{amount?} classes are used:

<div class="brightness-50 ..."></div>
<div class="brightness-100 ..."></div>
<div class="contrast-125 ..."></div>
<div class="contrast-200 ..."></div>

In the same way, we can apply the drop-shadow filter to an element:

<div class="drop-shadow-md ..."></div>
<div class="drop-shadow-lg ..."></div>
<div class="drop-shadow-xl ..."></div>
<div class="drop-shadow-2xl ..."></div>

Also, we can have something likebackdrop-blur-sm, backdrop-opacity-60, andbackdrop-sepia classes.

5. Animations and interactivity

Let's start with the transitions first. To control CSS transition properties, use thetransition-{properties} utilities to specify which properties to transition when they change:

<button class="transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300 ...">Download</button>

Animation: Tailwind comes with four standard animations we use in our projects:

1. Spin: to add a linear spin animation like in a loading indicator, we use theanimate-spin utility:

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg
    class="animate-spin h-5 w-5 mr-3 ..." viewbox="0 0 24 24">
  </svg>
  Processing...
</button>

2. Ping: withanimate-ping, we can make an element scale and fade like a radar ping animation:

<span class="flex h-3 w-3">
  <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-sky-400 opacity-75"></span>
  <span class="relative inline-flex rounded-full h-3 w-3 bg-sky-500"></span>
</span>

3. Pulse: theanimate-pulse is used to add a gentle fade-in and fade-out animation to an element:

<div class="border border-blue-300 shadow rounded-md p-4 max-w-sm w-full mx-auto">
  <div class="animate-pulse flex space-x-4">
    <div class="rounded-full bg-slate-700 h-10 w-10"></div>
    <div class="flex-1 space-y-6 py-1">
      <div class="h-2 bg-slate-700 rounded"></div>
      <div class="space-y-3">
        <div class="grid grid-cols-3 gap-4">
          <div class="h-2 bg-slate-700 rounded col-span-2"></div>
          <div class="h-2 bg-slate-700 rounded col-span-1"></div>
        </div>
        <div class="h-2 bg-slate-700 rounded"></div>
      </div>
    </div>
  </div>
</div>

4. Bounce: theanimate-bounce utility is used to make an element bounce up and down:

<svg
  class="animate-bounce w-6 h-6 ...">
</svg>
<label>
  <input type="checkbox" checked>
  Normal checkbox
</label>
<label>
  <input type="checkbox" class="accent-pink-500" checked>
  Checkbox with custom accent color
</label>

Now let's talk about interactivity in Tailwind:

Accent color: this is used to control the accented color of a form control like a checkbox with theaccent-{color}:

<label>
  <input type="checkbox" checked>
  Normal checkbox
</label>
<label>
  <input type="checkbox" class="accent-pink-500" checked>
  Checkbox with custom accent color
</label>

Cursor: to control the cursor styles while hovering an element, we can use thecursor-{style} utility class:

<button type="button" class="cursor-pointer ...">
  Submit
</button>
<button type="button" class="cursor-progress ...">
  Saving...
</button>
<button type="button" disabled class="cursor-not-allowed ...">
  Confirm
</button>

Pointer events: thepointer-events-auto andpointer-events-none utilities are used to control whether an element resounds to pointer events or not:

<div class="relative ...">
  <div class="absolute pointer-events-auto ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
      ...
    </svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

<div class="relative ...">
  <div class="absolute pointer-events-none ...">
    <svg class="absolute text-slate-400 h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
      ...
    </svg>
  </div>
  <input type="text" placeholder="Search" class="...">
</div>

6. Accessibility

Tailwind comes with utilities to improve accessibility with screen readers where you can usesr-only andnot-sr-only utility classes to show screen-reader-only elements or not:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Account Settings</span>
</a>

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Account Settings</span>
</a>

Advanced Level - Tailwind CSS Cheat Sheet

1. Configuring and customizing Tailwind CSS

By default, Tailwind looks for the optional tailwind.config.js file at the root of your project, where we can define any customizations.

A typical config file looks like this:

module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6'
    },
    fontFamily: {
      sans: [
        'Graphik', 'sans-serif'
      ],
      serif: ['Merriweather', 'serif']
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem'
      },
      borderRadius: {
        '4xl': '2rem'
      }
    }
  }
}

To customize this file, you just need to specify what you like to change, and any missing sections will fall back to Tailwind's default configuration.

If you are adding Tailwind to an existing project, you need to run the following command:

npx tailwindcss init

This creates a minimal tailwind.config.js file at the root of your project:

module.exports = {
  content: [],
  theme: {
    extend: {}
  },
  plugins: []
}

Now let's try to take a look at each of its customization options:

Content: in thecontent section, we can configure the paths to all of our HTML templates, JS components, or any other files that contain Tailwind class names:

module.exports = {
  content: [
    './pages/**/*.{html,js}', './components/**/*.{html,js}'
  ],
  // ...
}

Theme: in thetheme section is where we can define our color palette, fonts, type scale, border sizes, breakpoints, or anything related to the visual design of your website:

module.exports = { // ...
  theme: {
    colors: {
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray-light': '#d3dce6'
    },
    fontFamily: {
      sans: [
        'Graphik', 'sans-serif'
      ],
      serif: ['Merriweather', 'serif']
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem'
      },
      borderRadius: {
        '4xl': '2rem'
      }
    }
  }
}

Plugins: in theplugins section, we can register plugins used to generate extra utilities, components, base styles, or custom variants:

module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

Presets:presets allow you to specify your custom base config instead of using Tailwind's default base config:

module.exports = {
  // ...
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

  // Project-specific customizations
  theme: {
    //...
  },
}

2. Official plugins: Typography

The @tailwindcss/typography plugin provides a set of prose classes that we can use to add beautiful typographic defaults to any HTML code you can't control.

An excellent example of this is to use the prose utility for the HTML rendered from Markdown or pulled from a CMS:

<article class="prose lg:prose-xl">
  {{ markdown }}
</article>

Installation: we can install this plugin by running the following command:

npm install -D @tailwindcss/typography

And then add this to our config file:

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    // ...
  ],
}

2. Official plugins: Forms

The @tailwindcss/forms plugin is used to reset the form styles, making form elements easy to override with other utilities.

For example, if you want to customize the padding on the<select> element, you can write the following code:

<select class="px-4 py-3 rounded-full">
  <!-- ... -->
</select>

Installation: to install the forms plugin, run the following command:

npm install -D @tailwindcss/forms

And then add it to your config file:

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

3. Official plugins: Aspect Ratio

The @tailwindcss/aspect-ratio plugin provides a composable API for giving elements a fixed aspect ratio.

For example, we can combine theaspect-w-{n} andaspect-h-{n} classes to specify the aspect ratio for an element:

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Installation: we install it from NPM as:

npm install -D @tailwindcss/aspect-ratio

And then add this to the config file disabling theaspectRatio core plugin to avoid conflicts with the nativeaspect-ratio utilities:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

4. Official plugins: Line Clamp

The @tailwindcss/line-clamp plugin provides utilities for virtually truncating text after a fixed number of lines.

For example, we can use theline-clamp-{n} utilities to specify how many lines of text should be visible before truncating:

<p class="line-clamp-3">
  Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>

Installation: we can install this plugin from NPM as:

npm install -D @tailwindcss/line-clamp

Then add this to our config file:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/line-clamp'),ß
    // ...
  ],
}

Conclusion - Tailwind CSS Cheat Sheet

This Tailwind CSS cheat sheet shows you everything you need to know to style your next webpage and web apps. From converting vanilla CSS code to corresponding Tailwind code, basic customization like focus states, and responsive design down to configuring the Tailwind code according to our design.

We hope this Tailwind CSS cheat sheet will help you to design your websites with ease and rapidly.

Join Our Network

Work with top startups & companies

Try Our Talent

Ship your products faster

Tailwind CSS Cheat Sheet

Basic Level - Tailwind CSS Cheat Sheet

1. Core concepts: Hover and focus states

2. Responsive design

3. Dark mode

4. Custom styles

5. Functions and directives

Intermediate Level - Tailwind CSS Cheat Sheet

1. Layout with Flexbox and Grid

2. Spacing and sizing

3. Typography

4. Backgrounds, borders, effects, and filters

5. Animations and interactivity

6. Accessibility

Advanced Level - Tailwind CSS Cheat Sheet

1. Configuring and customizing Tailwind CSS

2. Official plugins: Typography

2. Official plugins: Forms

3. Official plugins: Aspect Ratio

4. Official plugins: Line Clamp

Conclusion - Tailwind CSS Cheat Sheet

Check out remote developer jobs

Based on Your Skills

Based on Your Role

Based on Your Career Trajectory