tailwindcss forms

@tailwindcss/formulários

Um plug-in que fornece uma redefinição básica para estilos de formulário que facilita a substituição dos elementos do formulário por utilitários.

Instalação

Instale o plugin do npm:

 npm install -D @tailwindcss/formulários

Em seguida, adicione o plugin ao seu arquivo tailwind.config.js :

 //tailwind.config.jsmodule.exports = {
  tema: {// ...
  },
  plug-ins: [require('@tailwindcss/forms'),// ...
  ],}

Uso básico

Veja a demonstração ao vivo

Todos os elementos básicos do formulário que você usa agora terão alguns estilos padrão simples que são fáceis de substituir pelos utilitários.

Atualmente adicionamos estilos de formulário básicos e fáceis de usar para os seguintes tipos de elementos de formulário:

• 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 foi normalizado/redefinido para um estilo simples e visualmente consistente que é fácil de personalizar com utilitários, até mesmo elementos como <select> ou <input type="checkbox"> que normalmente precisam ser redefinidos com appearance: none e personalizados usando custom CSS:

 <!-- Você pode personalizar o preenchimento em um elemento selecionado agora: --><select class="rounded-full px-4 py-3">
  <!-- ... --></select><!-- Ou altere a cor da caixa de seleção usando utilitários de cor de texto: --><input type="checkbox" class="rounded text-pink-500" />

Mais exemplos de personalização e práticas recomendadas em breve.

Usando classes para estilizar

Além dos estilos globais, também geramos um conjunto de classes correspondentes que podem ser usadas para aplicar explicitamente os estilos de formulário a um elemento. Isso pode ser útil em situações em que você precisa fazer com que um elemento que não seja de formulário, como um <div> , pareça um elemento de formulário.

 <input type="email" class="form-input arredondado-completo px-4 py-3" /><select class="form-select arredondado-completo px-4 py-3">
  <!-- ... --></select><input type="checkbox" class="form-checkbox arredondado text-pink-500" />

Aqui está uma tabela completa das classes form-* fornecidas para referência:

Base	Aula
[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

Usando apenas estilos globais ou apenas classes

Embora recomendemos pensar neste plugin como uma "redefinição de formulário" em vez de uma coleção de estilos de componentes de formulário, em alguns casos nossa abordagem padrão pode ser muito pesada, especialmente ao integrar este plugin em projetos existentes.

Se a geração de estilos e classes globais (base) não funcionar bem com o seu projeto, você pode usar a opção strategy para limitar o plugin a apenas uma dessas abordagens.

 //tailwind.config.jsplugins: [
  require("@tailwindcss/forms")({strategy: 'base', // gera apenas estilos globaisstrategy: 'class', // gera apenas classes
  }),],

Ao usar a estratégia base , os elementos do formulário são estilizados globalmente e nenhuma classe form-{name} é gerada.

Ao usar a estratégia class , os elementos do formulário não são estilizados globalmente e, em vez disso, devem ser estilizados usando as classes form-{name} geradas.