Esta clase acepta mucho valor en Tailwind CSS en el que todas las propiedades están cubiertas en forma de clase. Esta clase es un atributo de presentación que se utiliza para establecer el color de una forma SVG. En CSS, lo hemos hecho usando la propiedad de relleno de CSS .
Clase de relleno:
- fill-current: esta clase se usa para establecer el color de relleno de un SVG en el color de texto actual. Esto facilita la configuración del color de relleno de un elemento al combinar esta clase con una utilidad de color de texto existente.
Sintaxis:
<svg class="fill-current">...</svg>
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 mx-4 space-y-2"> <h1 class="text-green-600 text-5xl font-bold"> GeeksforGeeks </h1> <b>Tailwind CSS Fill Class</b> <div class="bg-green-200 m-4 grid grid-flow-col gap-4 p-5"> <svg height="150px" width="600px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle class="fill-current text-red-600" cx="100" cy="100" r="50" /> <circle class="fill-current text-green-600" cx="250" cy="100" r="50" /> <circle class="fill-current text-blue-600" cx="400" cy="100" r="50" /> <circle class="fill-current text-yellow-600" cx="550" cy="100" r="50" /> </svg> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA