Style Best Practices

This guide covers style best practices.

Table of Contents

Using Tailwind
- Ordering Utility Classes
- Just-in-Time Processing
PostCSS

Using Tailwind

We’re using the utility-based Tailwindcss framework. The majority of the out-of-box styles will be done using tailwind.

Tip	Keep a browser tab open with the Tailwind docs for quick reference.

Ordering Utility Classes

For consistency, we’re using a plugin, linkhttps://www.npmjs.com/package/prettier-plugin-tailwind:[prettier-plugin-tailwind], to reorder classes automatically.

Just-in-Time Processing

Tailwind also comes with a "just-in-time" feature that generates your stylesheet on-the-fly based on the classes you’re actually using. Therefore, the generated stylesheet is always as small as possible.

In addition, you can define some custom classes without a custom stylesheet or using the style attribute of your component.

From their docs:

Ever needed some ultra-specific value that wasn't part of your design system, like top: -113px for a quirky background image?
Since styles are generated on demand, you can just generate a utility for this as needed using square bracket notation like top-[-113px].
Works with variants too, like md:top-[-113px].

JIT example

const MyComponent = () => {
  return <div className="top-[-113px] right-[1%] border-b-[0.1rem]">{/* contents */}</div>;
}

PostCSS

We also use PostCSS to post-process our CSS. This allows us to use Tailwindcss directives among other useful transformations like autoprefixer, which adds the vendor-specific prefixes in the stylesheet generated for the styles you’re using.

Your CSS

::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}

@media (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}

Actually Generated

::-moz-placeholder {
  color: gray;
}
:-ms-input-placeholder {
  color: gray;
}
::placeholder {
  color: gray;
}

.image {
  background-image: url(image@1x.png);
}

@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx) {
  .image {
    background-image: url(image@2x.png);
  }
}