Este artículo ilustrará el método para usar los puntos de interrupción receptivos en Tailwind CSS.
¿Cómo usar puntos de interrupción receptivos en Tailwind?
Para usar puntos de interrupción de respuesta en Tailwind, use los modificadores de respuesta, como ' SM ”, “ Maryland ”, “ lg ”, “ SG ' y ' 2xl ” con las otras clases en el programa HTML. Luego, vea la página web HTML y cambie el tamaño de la pantalla para asegurarse de que los puntos de interrupción funcionen correctamente.
Paso 1: use modificadores receptivos en el programa HTML
Cree un programa HTML y utilice los modificadores receptivos con el estilo deseado. Por ejemplo, hemos utilizado el ' SM ”, “ Maryland ”, “ lg ”, “ SG ' y ' 2xl modificadores de respuesta:
< cuerpo >
< división clase = 'h-screen bg-fucsia-400 sm:bg-rosa-600 md:bg-verde-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-amarillo-500' >
< h1 clase = 'texto-7xl texto-blanco texto-centro p-20' > Sugerencia de Linux < / h1 >
< / división >
< / cuerpo >
Aquí:
- “ bg-fucsia-400 La clase ” establece el color de fondo de la al fucsia.
- “ sm:bg-rosa-600 La clase ” aplica color rosa al fondo para pantallas pequeñas.
- “ md:bg-verde-700 La clase ” cambia el color de fondo a verde en las pantallas medianas.
- “ lg:bg-púrpura-50 La clase ” establece el color de fondo en púrpura para pantallas grandes.
- “ xl:bg-verde azulado-600 La clase ” aplica el color verde azulado al fondo para pantallas extragrandes.
- “ 2xl:bg-amarillo-500 La clase ” cambia el color de fondo a amarillo en las pantallas 2xl.
Paso 2: Verificar salida
Vea la página web HTML para verificar si los puntos de interrupción de respuesta funcionan correctamente o no:
En la página web anterior, se puede observar que el color de la página web cambia con el tamaño de pantalla según el cual se especificaron los puntos de interrupción.
Conclusión
Para usar puntos de interrupción de respuesta en Tailwind, use los modificadores de respuesta, como ' SM ”, “ Maryland ”, “ lg ”, “ SG ' y ' 2xl ” con las otras clases en el programa HTML. Estos modificadores se utilizan para aplicar diferentes estilos a un elemento en particular según el tamaño de la pantalla. Este artículo ha ejemplificado el método para usar los puntos de interrupción receptivos en Tailwind CSS.