Three Tailwind Additions I Apply From Day One

Every Tailwind CSS project I start eventually gets the same small set of custom styles bolted on. These aren't framework features or plugins — just a few lines of CSS that solve recurring problems across mobile and desktop. Here's what I put in every tailwind.css file, and why.

Turning Off Tap Highlights

Android's default behavior paints a gray highlight over links and clickable elements when you tap them. I find it visually noisy, so I disable it for a cleaner interaction feel.

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

@layer is a Tailwind directive that places custom CSS into a specific "bucket" of the framework's internal cascade. Using it keeps my overrides predictable and prevents specificity collisions with Tailwind's own styles.

There's an accessibility trade-off here worth noting. Removing the highlight also removes a visual cue that an element was tapped. If you follow this path, consider providing feedback through an :active state instead — there's a well-known snippet by Chris Coyier for exactly that scenario.

Safe-Area Padding for Notched Phones

iPhones without a physical Home button have a bottom bar that overlays screen content. Fixed elements can get tucked underneath it, making them hard to read and even harder to tap. The solution is to add padding that respects the device's safe area.

@layer utilities {
  .pb-safe {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

This utility class uses env(safe-area-inset-bottom) to adapt to whatever device the app runs on — no media queries, no hardcoded pixel values.

Interpunct Bullets for Unstyled Lists

Tailwind's preflight (based on Normalize) strips the default styling from unordered lists. I like my lists to have visible bullet separators, so I add interpuncts — the middle dot character (·) — back into every project.

@layer utilities {
  .list-interpunct > li:before {
    content: '・';
    float: left;
    margin: 0 0 0 -0.9em;
    width: 0.9em;
  }

  @media (min-width: 992px) {
   .list-interpunct > li:before {
      margin: 0 0 0 -1.5em;
      width: 1.5em;
    }
  }
}

The modern alternative would be the ::marker pseudo-element, which is simpler to work with. I don't use it yet because Safari's support is limited, with an open WebKit bug tracking the issue.