Was ich sofort nach dem Auspacken zu Tailwind CSS hinzufüge

Bei jedem Projekt, bei dem ich Tailwind CSS verwende, füge ich etwas hinzu. Einige dieser Dinge füge ich in *jedem* einzelnen Projekt hinzu. Ich werde diese mit Ihnen teilen, aber ich bin auch neugierig, was Sie alle Ihren tailwind.css-Dateien hinzufügen.

Ich fange mit mir selbst an. In jedem Projekt

• definiere ich -webkit-tap-highlight-color.
• füge ich einen unteren Innenabstand hinzu, der auf env(safe-area-inset-bottom) gesetzt ist.
• ich dekoriere ungeordnete Listen mit Interpunktionszeichen.

Lassen Sie mich auf alle drei näher eingehen.

-webkit-tap-highlight-color

Android hebt Taps auf Links hervor. Ich bin kein Fan davon, weil es das Element verdeckt, also schalte ich es für ein angenehmeres Erlebnis aus.

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

@layer ist eine Tailwind-Direktive. Sie hilft, Spezifitätsprobleme zu vermeiden, indem sie Tailwind mitteilt, in welchem ​​„Bucket“ ein Satz benutzerdefinierter Stile enthalten ist. Es ist, als würde man so tun, als gäbe es die Kaskade nicht, sodass man sich weniger Sorgen um die Reihenfolge von CSS machen muss.

Allein das Entfernen der Tap-Highlight-Farbe kann zu einem Barrierefreiheitsproblem führen, da dadurch ein interaktiver Hinweis verborgen wird. Wenn Sie diesen Weg gehen, ist es wahrscheinlich eine gute Idee (und ich suche noch nach Forschung dazu, falls Sie welche haben), :active zu aktivieren, um einige Reaktionen auf diese Aktionen zu definieren. Chris hat einen Codeausschnitt dafür.

env(safe-area-inset-bottom)

Diese Utility-Klasse behandelt die untere Leiste auf neueren iPhones ohne Home-Button. Ohne sie können Elemente unter die Leiste fallen und somit unlesbar und schwer anzutippen sein.

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

Interpuncts

Ich verwende Interpuncts gerne mit ungeordneten Listen. Ich werde Sie nicht dafür bestrafen, dass Sie danach suchen. Wir sprechen im Grunde über die Aufzählungspunkte in ungeordneten Listen. Tailwind entfernt sie standardmäßig über Normalize. Ich schmuggelt Interpuncts in jedes einzelne meiner Projekte.

So gehe ich vor

@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;
    }
  }
}

Wir haben jetzt auch ::marker, um dasselbe zu tun, und es ist etwas einfacher zu handhaben. Ich verwende es nicht wegen der eingeschränkten Unterstützung in Safari.

Jetzt sind Sie dran

Nun, ich habe geteilt, was ich zu all meinen Tailwind-Projekten hinzufüge, also sind Sie jetzt an der Reihe. Was fügen *Sie* zu Tailwind in Ihren Projekten hinzu? Gibt es etwas, auf das Sie nicht verzichten können? Lassen Sie es mich in den Kommentaren wissen! Ich würde mich über Ideen freuen, die ich in andere Projekte aufnehmen kann.