🔥 PRIMEROS PASOS, SOPORTE DEL NAVEGADOR

¿Cómo funciona el soporte de CSS en Tailwind?

En general Tailwind CSS esta diseñado para ser probado en las versiones mas estables de Chrome, Firefox y Safari, pero no soporta ninguna versión de IE (Internet Explorer), incluyendo IE 11.

Mientras la las características en Tailwind CSS funcionarán en la mayoría de los navegadores, Tailwind también incluye una API para algunas características mas nuevas que no están completamente, por ejemplo la pseudoclase :focus-visible.

Debido a que tailwind es un framework de bajo nivel, es sencillo prevenir el uso de estas características simplemente no utilizando utilidades o modificadores no soportados.

El sitio web Can I Use es un gran recurso cuando no estas seguro acerca del soporte de una característica de CSS.

Prefijos de los vendors

Muchas propiedades de CSS requieren del uso de prefijos de los vendors para ser interpretados por los navegadores, por ejemplo background-clip: text necesita el prefijo -webkit para funcionar correctamente.

.bg-clip-text {
    background-clip: text;
    -webkit-background-clip: text;
}

Si utilizas la CLI de tailwind, los prefijos como este serán agregados automáticamente.

Si no, se recomienda instalar autoprefixer, que es un plugin de PostCSS que agrega automáticamente los prefijos requeridos por cada navegador que especifiques que deseas agregar soporte.

Para instalar autoprefixer.

npm install -D autoprefixer

Después agrega al final de la lista de plugins de la configuración de PostCSS.

module.exports = {
    plugins: [ require('tailwindcss'), require('autoprefixer'), ];
}

Para quieres saber mas acerca de soporte y navegadores, revisa el sitio web Browserlist.