tailwindcss forms

@tailwindcss/formularios

Un complemento que proporciona un restablecimiento básico de los estilos de formulario que hace que los elementos del formulario sean fáciles de anular con utilidades.

Instalación

Instale el complemento desde npm:

 instalación npm -D @tailwindcss/formularios

Luego agregue el complemento a su archivo tailwind.config.js :

 // tailwind.config.jsmodule.exportaciones = {
  tema: {// ...
  },
  complementos: [require('@tailwindcss/forms'),// ...
  ],}

Uso básico

Ver la demostración en vivo

Todos los elementos de formulario básicos que utilice ahora tendrán algunos estilos predeterminados simples que son fáciles de anular con utilidades.

Actualmente agregamos estilos de formulario básicos y fáciles de usar para los siguientes tipos de elementos de formulario:

• input[type='text']

• input[type='password']

• input[type='email']

• input[type='number']

• input[type='url']

• input[type='date']

• input[type='datetime-local']

• input[type='month']

• input[type='week']

• input[type='time']

• input[type='search']

• input[type='tel']

• input[type='checkbox']

• input[type='radio']

• select

• select[multiple]

• textarea

Cada elemento se ha normalizado/restablecido a un estilo simple visualmente consistente que es fácil de personalizar con utilidades, incluso elementos como <select> o <input type="checkbox"> que normalmente necesitan restablecerse con appearance: none y personalizarse usando personalizado. CSS:

 <!-- Ahora puedes personalizar el relleno en un elemento seleccionado: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- O cambie el color de una casilla de verificación usando las utilidades de color de texto: --><input type="checkbox" class="rounded text-pink-500" />

Próximamente habrá más ejemplos de personalización y mejores prácticas.

Usar clases para diseñar

Además de los estilos globales, también generamos un conjunto de clases correspondientes que se pueden usar para aplicar explícitamente los estilos de formulario a un elemento. Esto puede resultar útil en situaciones en las que necesita hacer que un elemento que no es de formulario, como <div> , parezca un elemento de formulario.

 <input type="email" class="form-input redondeado-completo px-4 py-3" /><select class="form-select redondeado-completo px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox redondeado texto-rosa-500" />

Aquí hay una tabla completa de las clases form-* proporcionadas como referencia:

Base	Clase
[type='text']	form-input
[type='email']	form-input
[type='url']	form-input
[type='password']	form-input
[type='number']	form-input
[type='date']	form-input
[type='datetime-local']	form-input
[type='month']	form-input
[type='search']	form-input
[type='tel']	form-input
[type='time']	form-input
[type='week']	form-input
textarea	form-textarea
select	form-select
select[multiple]	form-multiselect
[type='checkbox']	form-checkbox
[type='radio']	form-radio

Usar solo estilos globales o solo clases

Aunque recomendamos pensar en este complemento como un "restablecimiento de formulario" en lugar de una colección de estilos de componentes de formulario, en algunos casos nuestro enfoque predeterminado puede ser demasiado estricto, especialmente al integrar este complemento en proyectos existentes.

Si generar estilos y clases globales (base) no funciona bien con su proyecto, puede usar la opción strategy para limitar el complemento a solo uno de estos enfoques.

 // tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({estrategia: 'base', // solo genera estilos globales estrategia: 'clase', // solo genera clases
  }),],

Cuando se utiliza la estrategia base , los elementos del formulario tienen estilos globales y no se generan clases form-{name} .

Cuando se utiliza la estrategia class , a los elementos del formulario no se les aplica estilo globalmente, sino que se les debe aplicar estilo utilizando las clases form-{name} generadas.