Hablando con franqueza, no hay un método incorporado para hacer que el marcador de posición esté en cursiva en Tailwind CSS . Entonces, debe personalizar su clase de utilidades y esas son las principales ventajas de Tailwind CSS que lo separan de otros CSS Framework como bootstrap, base, etc.
Tailwind proporciona conjuntos de clases de utilidad listas para usar, pero muchas veces se encuentra con una situación en la que necesita su propia clase, como crear un marcador de posición en cursiva o pasar el mouse sobre un botón para aumentar el ancho, etc.
Requisito previo: siga el paso a continuación para agregar su propia clase de servicios públicos a Tailwind.
Paso 1: Ejecute el siguiente código en su terminal de carpetas. Esto creará el archivo package.json .
npm init
Paso 2: Copie y pegue el siguiente código en el terminal de su carpeta. Esto creará el módulo de Node requerido para el viento de cola.
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Paso 3: cree una carpeta pública y agregue index.html, style.css y tailwind.css dentro de la carpeta pública.
Paso 4: agregue el código en el archivo tailwind.css . Con este archivo, puede personalizar su CSS de viento de cola junto con el estilo predeterminado. Tailwind intercambiará estas directivas en el momento de la compilación con todos los estilos que genera en función de su sistema de diseño configurado.
@tailwind base; @tailwind components; @tailwind utilities;
Paso 5: abra el archivo package.json y en la sección de script agregue el código a continuación
"scripts": {
"build:css": "tailwind build public/tailwind.css -o public/style.css"
},
Paso 6: Ejecute el siguiente código en la terminal. Esto llenará su archivo style.css con el código CSS de Tailwind predefinido.
npm run build:css
Paso 7: Finalmente, ejecute el siguiente código. Esto generará un archivo de configuración de Tailwind para su proyecto utilizando la utilidad Tailwind CLI incluida cuando instala el paquete Tailwind CSS npm .
npx tailwindcss init
Nota: El marcador de posición :: es un pseudoelemento de CSS que le permite diseñar el texto del marcador de posición de un elemento de formulario cambiando el color del texto y permite modificar el estilo del texto.
Agregue el siguiente código a su archivo tailwind.css que ayudará a diseñar el marcador de posición en cursiva.
viento de cola.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
.placeholder-italic::placeholder{
font-style: italic;
}
}
Al usar la directiva @layer , Tailwind moverá automáticamente esos estilos al mismo lugar que las utilidades @tailwind para evitar problemas de especificidad no deseados . Ahora puede agregar la clase de marcador de posición en cursiva anterior para aplicar cursiva de estilo de fuente a un marcador de posición como se indica en los siguientes ejemplos.
Sintaxis:
<input class="placeholder-italic" />
Ejemplo 1:
HTML
<!DOCTYPE html> <body class="flex h-screen justify-center items-center"> <label>Email of Candidate</label> <!-- using placeholder-italic in a class to make font-style italic of a placeholder--> <input class="placeholder-gray-600 w-1/3 border text-center border-green-500 placeholder-italic" placeholder="Aman@gfg.com"> </body> </html>
Producción:
Ejemplo 2: en el siguiente ejemplo, el marcador de posición de la primera entrada está en cursiva y la segunda entrada no está en cursiva (predeterminado).
HTML
<!DOCTYPE html> <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 > <!-- using placeholder-italic class to create italic input--> <input aria-label="Enter your email address" type="text" placeholder="Email address" class="placeholder-italic 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:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA