En cada proyecto donde uso Tailwind CSS, termino agregando 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.css archivos.
Empezaré por mí. En cada proyecto:
- Yo defino
-webkit-tap-highlight-color. - Agrego un juego de acolchado inferior a
env(safe-area-inset-bottom). - Viste listas desordenadas con interpuntos.
Permítame ampliar los tres.
-webkit-tap-highlight-color
Android destaca los toques en los enlaces. No soy fan porque oscurece el elemento, así que lo apago para una experiencia más agradable.
@layer base {
html {
-webkit-tap-highlight-color: transparent;
}
}@layer es una directiva Tailwind. Ayuda a evitar problemas de especificidad al decirle a Tailwind qué “cubo” 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 pedir CSS.
Simplemente quitar el color de resaltado del grifo puede desencadenar un problema de accesibilidad, ya que oculta una pista interactiva. Entonces, si sigue esta ruta, probablemente sea una buena idea (y todavía estoy buscando investigación sobre esto si la tiene) para habilitar :active para definir proporcionar alguna respuesta a esas acciones. Chris tiene un fragmento para eso.
env(safe-area-inset-bottom)
Esta clase de utilidad maneja la barra inferior en los 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 interpuncts 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 interpuntes 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 ::marker 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é le añades a Tailwind en tus proyectos? ¿Hay algo de lo que no puedas prescindir? ¡Házmelo saber en los comentarios! Me encantaría empezar a incorporar ideas en otros proyectos.