Die Dinge, die ich zu Rückenwind -CSS hinzufügen kann, direkt aus der Schachtel

Für jedes Rückenwind -CSS -Projekt füge ich einige benutzerdefinierte Stile hinzu. Einige Stile werden in fast jedem Projekt verwendet. Ich werde diese teilen und bin auch neugierig, was jeder zu seiner Datei tailwind.css hinzugefügt hat.

Lassen Sie mich zunächst über meine eigenen Gewohnheiten sprechen:

• Definieren Sie -webkit-tap-highlight-color .
• Hinzufügen von Bodenfüllung env(safe-area-inset-bottom) .
• Verschönern Sie ungeordnete Listen mit speziellen Symbolen.

Im Folgenden werden diese drei Punkte im Detail erläutert:

-webkit-tap-highlight-color

Das Android -System wird hervorgehoben, wenn der Link geklickt wird. Ich mag diesen Effekt nicht, weil er Elemente verdeckt, also schalte ich ihn für eine bessere Benutzererfahrung aus.

 @Layer Base {
  html {
    -Webkit-Tap-Highlight-Color: transparent;
  }
}

@layer ist eine Richtlinie für den Tailwind, der Spezifitätsprobleme vermeidet, indem er Throwwind mitteilt, dass sie benutzerdefinierte Stile einstellen sollen, in denen "Container" eingesetzt werden soll. Es ist so, als hätte es nicht vor so,

Das einfache Entfernen von Klicken kann zu Barrierefreiheitsproblemen führen, da es interaktive Eingabeaufforderungen verbirgt. Wenn Sie sich für diesen Ansatz entscheiden, ist er besser (wenn Sie darüber nachforschen, würde ich ihn auch überprüfen), um es zu aktivieren :active , um ein paar Rückmeldungen zu diesen Vorgängen zu geben. Chris bietet dafür ein Codeausschnitt.

env(safe-area-inset-bottom)

Diese Utility -Klasse übernimmt die untere Leiste des neuen iPhone (ohne die "Home" -Taste). Ohne sie können einige Elemente unter den unteren Balken fallen, was es schwierig macht, zu lesen und zu klicken.

 @Layer Utilities {
  .pb-safe {
    Padding-Bottom: Env (Safe-Area-in-Set-Bottom);
  }
}

Element für spezielle Symbollisten

Ich benutze gerne spezielle Symbole als Listenelemente in ungeordneten Listen. Ich werde Sie nicht dafür bestrafen, dass Sie dies gefunden haben. Wir sprechen im Grunde genommen über Kugeln in ungeordneten Listen. Rückenwind löscht sie standardmäßig über Normalisierung. Ich habe jedem meiner Projekte besondere Symbole hinzugefügt.

Meine Methode lautet wie folgt:

 @Layer Utilities {
  .List-interpunct> li: vor {
    Inhalt: '·';
    float: links;
    Rand: 0 0 0 -0,9EM;
    Breite: 0,9EM;
  }

  @media (min-Width: 992px) {
   .List-interpunct> li: vor {
      Rand: 0 0 0 -1.5EM;
      Breite: 1,5EM;
    }
  }
}

Jetzt haben wir auch ::marker , die die gleiche Funktionalität implementieren können, und es ist einfacher zu bedienen. Ich habe es nicht benutzt, weil Safari eine begrenzte Kompatibilität hat.

jetzt du

Ich habe geteilt, was ich zu allen Rückenwindprojekten hinzugefügt habe, und jetzt sind Sie an der Reihe. Was ist der benutzerdefinierte Stil, den Sie in Ihrem Projekt zum Rückenwind hinzufügen? Gibt es einen Stil, den Sie unverzichtbar sind? Bitte lassen Sie es mich in den Kommentaren wissen! Ich würde gerne einige Ideen bekommen und anfangen, sie in andere Projekte zu integrieren.

Das obige ist der detaillierte Inhalt vonDie Dinge, die ich zu Rückenwind -CSS hinzufügen kann, direkt aus der Schachtel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!