Este artículo ejemplificará el método de aplicar puntos de interrupción y consultas de medios en las utilidades 'limpias' en Tailwind.
¿Cómo utilizar puntos de interrupción y consultas de medios en 'claro' en Tailwind?
Para aplicar puntos de interrupción y consultas de medios particulares en utilidades 'claras' en Tailwind, cree una estructura HTML. Luego, defina el valor deseado para el “ borrar-
Ejemplo
En este ejemplo, usaremos el ' Maryland ” punto de ruptura con el “ Limpia los dos ” utilidad y “ lg ” punto de ruptura con el “ claro-ninguno ” utilidad en el “ ” elemento para cambiar su posición en tamaño de pantalla mediano y grande:
< cuerpo >
< división clase = 'h-96 mx-10 p-8 bg-cielo-500' >
< imagen origen = 'tailwindcss_img.png' clase = 'flotante-izquierda p-3 w-28 h-24' todo = 'imagen' / >
< imagen origen = 'tailwindcss_img.png' clase = 'flotante-derecha p-3' todo = 'imagen' / >
< pag clase = 'text-justify clear-left md:clear-both lg:clear-none' > Tailwind CSS proporciona utilidades 'flotantes' para controlar el ajuste del contenido alrededor de un elemento.
Este ejemplo mostrará cómo usar puntos de interrupción y consultas de medios con la utilidad 'borrar' en Tailwind. < / pag >
< / división >
< / cuerpo >
Aquí:
- 'flotador izquierdo' La clase hace flotar los elementos hacia el lado izquierdo del contenedor.
- 'flotar derecho' La clase hace flotar los elementos al lado derecho del contenedor.
- 'claro-izquierda' class mueve el elemento
debajo del elemento flotante a la izquierda en el contenedor.
- “md:borrar-ambos” La clase borra los flotantes izquierdo y derecho y coloca el elemento
debajo de ellos en un tamaño de pantalla mediano.
- “lg:claro-ninguno” La clase deshabilita cualquier borrado aplicado al elemento
y permite que el elemento flote en ambos lados del contenedor en un tamaño de pantalla grande.
Producción
De acuerdo con el resultado anterior, los puntos de interrupción y las consultas de medios especificados se han aplicado con éxito a la utilidad 'borrar'.
Conclusión
Para aplicar puntos de interrupción y consultas de medios en utilidades 'limpias' en Tailwind, defina el valor deseado para el ' borrar-