Este artículo demostrará el método para utilizar la 'interrupción posterior' con puntos de interrupción y consultas de medios en Tailwind CSS.
¿Cómo utilizar el 'después' con puntos de interrupción y consultas de medios en Tailwind?
Para utilizar una 'interrupción posterior' con puntos de interrupción y consultas de medios, defina diferentes valores y estilos para diferentes tamaños de pantalla con la utilidad 'interrupción posterior' en el programa HTML. Luego, verifique la salida viendo la página web HTML.
Exploremos la implementación práctica:
Paso 1: use puntos de interrupción y consultas de medios con la utilidad 'break-after'
Cree un programa HTML y especifique diferentes valores y estilos para diferentes tamaños de pantalla con la utilidad 'break-after'. Por ejemplo, hemos utilizado el ' Maryland ” punto de ruptura con el “ descanso después de la columna ” utilidad y el “ lg ” punto de ruptura con el “ romper después de evitar ' utilidad:
< cuerpo >
< división clase = 'columnas-2 bg-verde azulado-400' >
< pag clase = 'md: descanso después de la columna lg: descanso después de evitar' > Hola... < / pag >
< pag > Bienvenido... < / pag >
< pag > Más información sobre Tailwind CSS... < / pag >
< pag > Es un framework CSS... < / pag >
< pag > Adiós... < / pag >
< / división >
< / cuerpo >
Aquí:
- El ' md: descanso después de la columna La clase ” indica que debe ocurrir un salto de columna después de este elemento
específico en el “ Maryland ” punto de interrupción (tamaño de pantalla medio).
- El ' lg: romper después de evitar La clase ” sugiere que el elemento debe evitar la ruptura posterior en el “ lg ” punto de interrupción (tamaño de pantalla grande).
Paso 2: Verificar salida
Verifique si los puntos de interrupción y las consultas de medios se han aplicado al ver la página web HTML:
En la página web anterior, el salto de columna se ha producido en el elemento especificado en la pantalla mediana y se ha evitado el salto posterior en la pantalla grande.
Conclusión
Para utilizar el 'después' con puntos de interrupción y consultas de medios en Tailwind, primero, cree un archivo HTML. Luego, use los puntos de interrupción y las consultas de medios con la utilidad 'después de' especificando diferentes valores y estilos para diferentes tamaños de pantalla. Para la verificación, ejecute el programa HTML y vea la página web. Este artículo ha demostrado el método para utilizar la 'interrupción posterior' con puntos de interrupción y consultas de medios en Tailwind CSS.