Tailwind Cheatsheet - A Cheatsheet For Tailwind CSS

Tailwind CSS lets us build present-day websites with the respective classes without writing a single local CSS. Just like different CSS libraries like Bootstrap, Tailwind additionally has Tailwind responsive instructions that we only need to specify in our utility. This Tailwind CSS tutorial will start you quickly with Tailwind to make beautiful websites and UIs.

Tailwind is excellent, considering we need to specify the respective training, and Tailwind CSS will contend with the whole thing. On top of that, we don’t need to fear responsibility as all is taken care of by Tailwind on unique gadgets. Tailwind CSS is an application-first CSS framework for unexpectedly building custom designs. This Tailwind CSS tutorial covers the most commonly used classes and their utilization.

Benefits of Tailwind CSS

There are many advantages to the usage of a CSS framework like Tailwind. Below are the foremost ones.

You write much less custom CSS.

With Tailwind, you style elements using applying pre-existing instructions directly to your HTML. Using application lessons in this way, you may build custom designs with Tailwind documentation without writing CSS.

You could make safer adjustments.

With the traditional approach, if you modify CSS, you may destroy some of your websites. Unlike CSS, utility instructions for your HTML are nearby. That method could help you alternate them without breaking something else in your site.

You keep CSS documents small.

With a framework like Tailwind, you can write CSS as you upload new functions and Tailwind components. As a result, your CSS files continue to grow and get heavier. Most patterns can be reused using tools like Tailwind's flexbox and padding utilities, so you hardly ever need to write down new CSS.

You don’t need to come up with class names.

In Tailwind, you’re choosing classes from a pre-defined layout gadget. In that manner, you don’t need to worry about choosing the “ideal” class names for specific styles and additives or taking complex ones like the sidebar-inner wrapper.

Note: You can get the Tailwind CSS cheatsheet download pdf here.

Installation

npm install tailwindcss

or

yarn add tailwindcss

Tailwind CSS Tutorial

Hover and focus states

To add hover, awareness, and every other CSS state to an element, we need to comply with a single rule:

Every software elegance in Tailwind can be implemented conditionally by adding a modifier to the start of the elegance name that describes the situation you need to target.

Hover state

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

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

However, the background color class is preceded by the hover: modifier in Tailwind.

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

So we just used hover:bg-green-800, and it generated the following CSS code for the equipment:

.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 just defines the styles for the: hover state. This is known as conditionally making use of the utility classes.

Focus and active states

We can also fashion factors on: focus and :active states much like :hover as proven below:

Submit

Let's simplify it; here, we are giving it a 2px solid define of obvious shade on recognition(focus:outline-none), adding a solid darkish green box-shadow with focus:ring focus:ring-green-900, and even as the button is in the active state, we are giving it the green-700 coloration.

Tailwind Responsive design

We follow every utility class in Tailwind conditionally at distinct breakpoints as necessary. By default, you get the subsequent five breakpoints:

To make any HTML element Tailwind responsive, we must prefix the software magnificence with the breakpoint call, as proven above, accompanied by the ‘:’ sign.

One rule of thumb we need to remember at the same time as making our internet site responsive with Tailwind is that it uses a mobile-first breakpoint system. This means the default unprefixed utilities like uppercase affect all display screen sizes. In contrast, prefixed utilities like md: uppercase only take effect at that specified breakpoint and above.

For instance, if we want to make a card element Tailwind 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">About my page</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 factors have thedisplay: block assets. Still, we add the md:flex utility to the outer div, which permits our card object to be a flexbox on medium monitors and bigger.

For the picture, we add md:shrink-0 so that our photo would not reduce on medium and larger displays when the parent is a flex field. The picture's dimensions (width and height) are automatically set by default on small monitors. Still, on medium and above monitors, we constrained the width to a fixed length and ensured the picture was complete by using the md:h-full and md: w-48 utilities.

Dark mode

Tailwind includes a dark version that lets you style your internet site differently only when the dark mode is enabled.

If we take the above card instance, then we might add the subsequent 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 hyperlink textual content and dark:text-gray-300 for the paragraph. By default, this version makes use of the prefers-color-scheme CSS media function.

Custom patterns

Sometimes we require more style options than a CSS framework provides by default. Be it the color alternatives, the scaling options, including custom CSS, and so on. Tailwind supports customizing your patterns in these types of ways.

Let's take a look at some of the different custom patterns we can follow:

Theme customization

We can add our customization to the subject phase of the tailwind.config.js report, wherein we can easily personalize 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 of 108px rather than something close to what Tailwind gives, like m-28 (which equals to margin: 7rem. Or 112px), then we can use Tailwind's rectangular bracket notation to generate a class when needed without any configurations like this:

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

It is comparable to an inline styling system, but it has the major advantage that you can now apply additional modifiers like hover or Tailwind responsive modifiers like lg along with unique 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 truly is just experimental right now and is not shipped to the Tailwind's source code) that you can't find a software class for, then you can use the equal rectangular bracket notation to write down a completely arbitrary CSS class:

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

You can also include more modifiers, just like before:

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

Base styles

If you need to have a few default styling for a selected web page, like a custom textual content coloration, history coloration, font own family, and so on., then the perfect option is to add some classes to the html or body factors of your DOM:

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

Functions and directives

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

Functions in Tailwind are evaluated at construct-time and are changed through static values in our final output CSS file.

They can be used to get admission to Tailwind-specific values as proven within the following functions:

subject()

The dot(.) notation is used to access Tailwind configuration values in this way:

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

Screen()

This feature lets us to create media queries that discuss with our custom breakpoints by using their call in preference to duplicating their values:

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

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

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

Directives are specific at-rules you can add to your CSS to give Tailwind projects a specific capability.

Here are a number of them:

@tailwind

that is used to insert Tailwind's base, additives, utilities, and variants styles into our CSS. You might generally use it whilst putting in Tailwind for your existing project. These patterns inject the default base patterns, aspect classes, utility lessons, and variation-precise styles to be prepared to use.

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

@layer

This tells Tailwind to which ‘bucket’ a set of custom patterns belongs. The valid default layers are base, additives, and utilities.

Any CSS rules contained within a @layer directive are automatically moved to the same location as their corresponding @tailwind rule by Tailwind. Having a @layer directive makes it possible to apply modifiers with custom version regulations like hover:, focus: or md: and lg:.

@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 present software classes into our custom CSS patterns. It's most helpful when we need to write down custom CSS to override patterns in a third-party library, but we nevertheless need to work with our layout 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;
}

Conclusion:

With this Tailwind CSS tutorial, you ought to now have fantastic know-how of the most commonly used Tailwind CSS classes and the way to use them in your initiatives. Remember that the total Tailwind documentation can be observed on the Tailwind CSS authentic internet site.

How much is a great User Experience worth to you?

Browsee helps you understand your user's behaviour on your site. It's the next best thing to talking to them.

Learn More Already have an account? Sign in.