Las cosas que agrego a Tailwind CSS desde el primer momento

En cada proyecto en el que uso Tailwind CSS , termino agregándole algo. Algunas de estas cosas las agrego en cada proyecto. Los compartiré con ustedes, pero también tengo curiosidad por saber qué están agregando a sus tailwind.cssarchivos.

Empezaré por mí mismo. En cada proyecto:

• Yo defino -webkit-tap-highlight-color.
• Agrego un conjunto de relleno inferior a env(safe-area-inset-bottom).
• Visto listas desordenadas con interpuntos.

Permítanme dar más detalles sobre los tres.

-webkit-tap-highlight-color

Android destaca los toques en los enlaces. No soy un fanático porque oscurece el elemento, así que lo apago para tener una experiencia mejor.

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

@layeres una directiva Tailwind. Ayuda a evitar problemas de especificidad al decirle a Tailwind qué “depósito” contiene un conjunto de estilos personalizados. Es como fingir que la cascada no existe, por lo que hay menos de qué preocuparse cuando se trata de ordenar CSS.

Simplemente eliminar el color de resaltado del toque podría desencadenar un problema de accesibilidad, ya que eso oculta una señal interactiva. Entonces, si sigues este camino, probablemente sea una buena idea (y todavía estoy buscando investigaciones sobre esto si las tienes) para permitir :activedefinir y proporcionar alguna respuesta a esas acciones. Chris tiene un fragmento de eso.

env(safe-area-inset-bottom)

Esta clase de utilidad maneja la barra inferior en iPhones más nuevos sin el botón “Inicio”. Sin él, algunos elementos pueden caer debajo de la barra, haciéndolos ilegibles y difíciles de tocar.

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

interpuntos

Me encanta usar interpuntos con listas desordenadas. No te penalizaré por buscar eso . Básicamente estamos hablando de viñetas en listas desordenadas. Tailwind los elimina de forma predeterminada a través de Normalizar. Paso de contrabando interpuntos en todos y cada uno de mis proyectos.

Así es como lo hago:

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

Ahora también tenemos ::markerque hacer lo mismo y es un poco más fácil trabajar con él. No lo estoy usando debido al soporte limitado en Safari.

Ahora es tu turno

Muy bien, compartí lo que agrego a todos mis proyectos de Tailwind, así que ahora es tu turno. ¿Qué añades a Tailwind en tus proyectos? ¿Hay algo sin lo que no puedas prescindir? ¡Házmelo saber en los comentarios! Me encantaría tener ideas para empezar a incorporar a otros proyectos.