Tailwind CSS es básicamente un primer marco CSS de utilidad para una interfaz de usuario personalizada rápida. Tailwind CSS Alignment controla cómo se alinean los elementos flexibles y de cuadrícula junto con el contenedor para un desarrollo front-end rápido. suponga que Tailwind CSS Justify Content controla cómo se colocan los elementos flexibles y de cuadrícula a lo largo del eje principal de un contenedor y Justify items que controla cómo se alinean los elementos de cuadrícula a lo largo de su eje en línea.
- Tailwind CSS Justificar contenido
- Tailwind CSS Justificar elementos
- Tailwind CSS Justify Self
- Tailwind CSS Alinear contenido
- Tailwind CSS Alinear elementos
- Tailwind CSS Align Self
- Tailwind CSS Colocar contenido
- Tailwind CSS Colocar elementos
- Tailwind CSS Place Self
El siguiente ejemplo le dará una breve idea sobre los fondos de Tailwind CSS:
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href= "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" /> </head> <body> <div class="h-screen flex flex-col items-center justify-center"> <p class="text-green-700 text-xl mb-3"> Welcome to GeeksforGeeks </p> <form> <input aria-label="Enter your email address" type="text" placeholder="Email address" class="text-sm text-gray-base w-full mr-3 py-5 px-4 h-2 border border-gray-200 rounded mb-2" /> <input aria-label="Enter your password" type="password" placeholder="Password" class="text-sm text-gray-base w-full mr-3 py-5 px-4 h-2 border border-gray-200 rounded mb-2" /> <button type="submit" class="bg-green-400 w-full mt-4"> Login </button> </form> </div> </body> </html>
Producción:
Alineación CSS de viento de cola
Publicación traducida automáticamente
Artículo escrito por GeeksforGeeks-1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA