Tailwind CSS est un très bon framework CSS utilitaire. Les entrées de formulaire sont l’une des parties les plus difficiles d’une application Web que les classes d’utilitaires peuvent utiliser pour formater. Par défaut, Tailwind réinitialise tout style spécifique au navigateur, mais les entrées sont assez laides. Rendre les entrées vraiment bonnes signifie généralement écrire du CSS personnalisé, y compris des pseudo sélecteurs comme ::after et même des SVG personnalisés dans votre CSS.

Formulaires CSS personnalisés pour le vent arrière est un plugin qui a été développé pour fournir un meilleur style standard pour la saisie de formulaire et pour faciliter sa personnalisation dans un projet à l’aide de Tailwind. Le style proposé par le plugin est compatible avec tous les navigateurs jusqu’à IE11 et entièrement accessible grâce à de très bons états de mise au point.

Dans ce tutoriel, je vais vous montrer comment installer le plugin et commencer à l’utiliser. C’est vraiment facile à installer et à configurer, alors commençons!

installation

Exécutez le plugin pour l’installer npm install @tailwindcss/custom-forms --save-dev dans votre projet. Après cela, vous devez require() le plugin dans votre fichier de configuration Tailwind.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/custom-forms'),
  ]
}

Enfin, recompilez votre CSS pour appliquer les modifications apportées par le plugin.

Utiliser les classes du plugin

Le plugin propose des classes très simples que vous pouvez utiliser pour tout type d’entrée. Certaines des classes incluses sont form-input, form-textarea, form-select, form-multiselect, form-checkbox, et form-radio. Si vous en ajoutez un au type d’entrée respectif, vous obtiendrez immédiatement une meilleure conception que les paramètres par défaut du navigateur.

Ajoutez un vent arrière régulier pour personnaliser les couleurs d’arrière-plan des cases à cocher et des entrées radio text-{color} Classe de l’entrée spécifiant la couleur à appliquer.

Exemple de couleurs personnalisées

Vous pouvez également ajuster la taille des cases à cocher et des entrées radio en ajoutant h-{height} et w-{width} Cours directement aux entrées. ils utilisent h-4 w-4 Par défaut, mais si vous voulez que votre entrée soit un peu plus grande, essayez-la h-5 w-5.

Ajuster les valeurs par défaut

Tout comme Tailwind, le plugin Custom Forms est un très bon moyen de personnaliser les paramètres par défaut. Ajouter un theme.customForms En tant que clé de votre fichier de configuration Tailwind, vous pouvez personnaliser certaines propriétés pour chaque type d’entrée à l’aide de la syntaxe CSS-in-JS:

// tailwind.config.js
module.exports = {
  theme: {
    customForms: theme => ({
      default: {
        input: {
          borderRadius: theme('borderRadius.lg'),
          backgroundColor: theme('colors.gray.200'),
          '&:focus': {
            backgroundColor: theme('colors.white'),
          }
        },
        select: {
          borderRadius: theme('borderRadius.lg'),
          boxShadow: theme('boxShadow.default'),
        },
        checkbox: {
          width: theme('spacing.6'),
          height: theme('spacing.6'),
        },
      },
    })
  },
}

Pour plus d’informations sur l’utilisation et la personnalisation du plugin, consultez Documentation du plugin.

Conclusion

Avec le plugin « Tailwind Custom Forms », vous pouvez rapidement commencer à concevoir vos entrées de formulaire. Que vous utilisiez le plugin pour prototyper une page ou pour la production, je pense que c’est un bon choix.

Vérifiez les plugins Page de démonstration, documentation, et Code source pour plus d’informations.



Source link

Recent Posts