Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Usando esta clase podemos colorear cualquier anillo. En CSS, hacemos eso usando la propiedad CSS Color .
Clases de color del anillo:
- ring-transparent: El color del anillo será transparente.
- ring-current: El color del anillo dependerá del color del elemento principal.
- ring-black: El color del anillo será negro.
- ring-white: El color del anillo será blanco.
- ring-gray-50: El color del anillo será gris.
- ring-red-50: El color del anillo será rojo.
- ring-blue-50: El color del anillo será azul.
- ring-indigo-50: El color del anillo será índigo.
- ring-purple-50: El color del anillo será morado.
- ring-green-50: El color del anillo será verde.
- ring-yellow-50: El color del anillo será amarillo.
- ring-pink-50: El color del anillo será rosa.
Nota: Los valores del color se pueden cambiar según sus necesidades de 50 a 900, el intervalo debe ser 100.
Sintaxis:
<button class="ring-{color}">...</button >
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"> </head> <body class="text-center"> <div class="mx-16 grid grid-cols-5 gap-4 p-2"> <button class="ring-4 ring-red-600 bg-green-400 w-full h-12 rounded-lg"> Ring-4 </button> <button class="ring-4 ring-green-600 bg-green-400 w-full h-12 rounded-lg"> Ring-4 </button> <button class="ring-4 ring-blue-600 bg-green-400 w-full h-12 rounded-lg"> Ring-4 </button> <button class="ring-4 ring-yellow-600 bg-green-400 w-full h-12 rounded-lg"> Ring-4 </button> <button class="ring-4 ring-pink-600 bg-green-400 w-full h-12 rounded-lg"> Ring-4 </button> </div> </body> </html>
Nota: actualmente, los navegadores no son compatibles con Tailwind CSS Ring Color, por lo que para la salida, comparto el enlace de la salida (Tailwind CSS Playground)
Producción:
Color del anillo de viento de cola
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA