Deciding on the best way to extend a framework can be paralyzing, so here are some best practices and tools to help you add your own utilities “the Tailwind way.”

A bare-bones Tailwind setup is a single CSS file that looks like this:

In CSS, the order of your rule definitions is extremely important.

For example, given the following CSS:

  background: #ff0000;
}
.bg-green {
  background-color: #00ff00;
}

…and the following HTML:

…the div would be green, because .bg-green is defined after .bg-red in the CSS file.

@tailwind components;
@tailwind utilities;
.bg-cover-image {
  background-image: url('/path/to/image.jpg');
}

This way your custom utilities can override Tailwind utilities if needed, although you should strive to avoid applying two utility classes to an element that target the same CSS property if at all possible.

If you’re using postcss-import or a preprocessor like Less, Sass, or Stylus, consider keeping your utilities in a separate file and importing them:

Responsive Variants

If you’d like to create responsive versions of your own utilities based on the breakpoints defined in your Tailwind config file, wrap your utilities in the directive:

@tailwind components;
@tailwind utilities;
@responsive {
  .bg-cover-image {
    background-image: url('/path/to/image.jpg');
}

The above code would generate CSS that looks something like this: