Dans ce guide, nous allons vous expliquer comment créer un thème Tailwind personnalisé pour vos formulaires et entrées. Tailwind s'est imposé comme l'une des principales bibliothèques de classes utilitaires CSS, et FormKit a été conçu en tenant compte de ses capacités. Commençons !
Ce guide suppose que vous utilisez un outil de construction Vue 3 standard comme Vite, Nuxt 3, ou Vue CLI qui vous permettra d'importer des composants à fichier unique .vue.
Si vous prévoyez d'utiliser Tailwind CSS pour le style de vos formulaires, veuillez vous assurer que votre projet n'importe pas le thème de base genesis qui est livré avec FormKit — sinon vous obtiendrez des résultats de style étranges.
Dans le contexte d'un fichier .vue qui représente un composant, il est possible de créer un thème Tailwind en utilisant les props de classe section-key ou la prop classes fournie par FormKit.
Si votre composant représente l'ensemble de votre formulaire et que votre projet ne nécessite qu'un seul formulaire, cela peut être tout ce dont vous avez besoin. Voici un exemple d'application des mêmes classes Tailwind à une entrée text de FormKit en utilisant à la fois les props section-key et la prop classes :
C'est une façon simple d'appliquer des styles Tailwind à vos formulaires FormKit, mais que faire si vous avez plusieurs formulaires ? Copier-coller des listes de classes entre les composants n'est pas idéal et entraînera des variations involontaires de style dans votre projet au fil du temps.
Explorons comment nous pouvons appliquer les classes Tailwind globalement à tous les entrées FormKit de notre projet.
FormKit fournit un package de première partie @formkit/themes qui inclut le support de Tailwind CSS — ce qui facilite la création d'un thème Tailwind CSS pour FormKit dans votre projet.
Le package vous permet de créer votre thème sous forme d'objet JavaScript regroupé par type d'entrée et sectionKey. De plus, vous pouvez accéder à un certain nombre de variantes Tailwind en fonction de l'état de l'entrée et du formulaire, comme formkit-invalid: et formkit-disabled: qui vous permettent de changer dynamiquement le style de votre entrée.
Pour commencer, nous devons ajouter le package à notre projet.
npm install @formkit/themesEnsuite, nous devons faire deux choses :
formKitTailwind de @formkit/themes au fichier tailwind.config.js de notre projet.tailwind-theme.js) dans notre projet.generateClasses de @formkit/themes et l'utiliser avec notre thème dans nos options de configuration FormKit.// tailwind.config.js
const formKitTailwind = require('@formkit/themes/tailwindcss');
module.exports {
...
content: [
...
'./tailwind-theme.js',
],
plugins: [
formKitTailwind
]
...
}// tailwind-theme.js
export default {
// notre thème ira ici.
// ...
// text: {
// label: 'font-bold text-gray-300',
// ...
// }
// ...
}// app.js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin, defaultConfig } from '@formkit/vue'
import { generateClasses } from '@formkit/themes'
import myTailwindTheme from './tailwind-theme.js'
import '../dist/index.css' // où que se trouvent vos styles Tailwind
createApp(App)
.use(
plugin,
defaultConfig({
config: {
classes: generateClasses(myTailwindTheme),
},
})
)
.mount('#app')Une fois cette configuration terminée, nous sommes prêts à commencer à écrire notre thème Tailwind !
Pour commencer, appliquons quelques classes sensées à un input de style text. Cela couvrira une grande surface car nous réutiliserons facilement ces styles pour d'autres inputs de type texte tels que email, password, date, etc.
Pour cibler spécifiquement les inputs text, nous créerons une clé text dans notre objet de thème, puis nous appliquerons des classes à chaque sectionKey selon les besoins.
Voici un input text avec des classes Tailwind appliquées :
Le plugin formKitTailwind de @formkit/themes fournit un certain nombre de variantes que vous pouvez utiliser dans vos listes de classes pour répondre dynamiquement à l'état de l'input et du formulaire.
Si vous utilisez des variantes dans un cas imbriqué, les variantes peuvent être liées à son parent plutôt qu'à elle-même.
Pour corriger cela, ajoutez à la section externe group/{modifier}, et utilisez la variante avec le même modificateur formkit-invalid/{modifier}:
Les variantes actuellement fournies sont :
formkit-disabled:formkit-invalid:formkit-checked:formkit-errors:formkit-complete:formkit-loading:formkit-submitted:formkit-multiple:formkit-prefix-iconformkit-suffix-iconVous utilisez ces variantes de la même manière que vous utilisez les variantes intégrées de Tailwind telles que dark: et hover:.
Ajoutons quelques variantes pour formkit-invalid et formkit-disabled à notre input de texte :
Maintenant, nous cuisinons ! Pour créer un thème complet, tout ce que nous avons à faire est de définir des listes de classes pour les sectionKeys de tous les autres types d'input que nous utiliserons dans notre projet.
Il y a quelques améliorations que nous pouvons apporter. La fonction d'aide generateClasses de @formkit/themes permet une clé global spéciale qui s'appliquera à tous les inputs. Ceci est utile pour les sectionKeys tels que help et messages qui sont généralement stylisés de la même manière pour tous les types d'input dans un projet.
En utilisant les clés global et family: dans votre objet de thème, vous pouvez appliquer une liste de classes à tous les inputs qui ont une certaine sectionKey soit globalement, soit au sein d'une famille d'inputs. Ceci est utile pour des choses comme les labels ou le texte d'aide lorsque vous voulez partager le style sur une grande variété d'inputs.
Créons un "Kitchen Sink" de types d'input, chacun ayant ses listes de classes définies appliquées. Voici le thème en isolation pour une meilleure lisibilité :
Et voici notre thème Tailwind lorsqu'il est appliqué à tous les inputs FormKit disponibles :
Les inputs FormKit sont livrés avec leurs propres icônes de décorateur qui peuvent être utilisées à la place des styles par défaut du navigateur qui sont généralement livrés avec les cases à cocher, les radios, les inputs de sélection, et plus encore.
Si vous voulez utiliser ces types d'icônes dans votre thème Tailwind, assurez-vous de les importer de @formkit/icons et de les inclure dans votre configuration FormKit.
Et voilà ! Toutes les entrées FormKit sont stylisées avec les classes utilitaires Tailwind à travers tout notre projet.
Si nous avons besoin de surcharger des cas spécifiques dans notre projet, nous pouvons le faire en utilisant les props de classe de clé de section ou la prop classes sur une entrée FormKit donnée dans notre projet qui a été couverte dans la section d'ouverture de ce guide.
D'une importance particulière lors d'une surcharge est le $reset modifier spécial pour les listes de classes. Lorsque le système de classe FormKit rencontre une classe $reset, il effacera la liste de classes actuelle pour la section donnée et ne collectera que les noms de classes qui se produisent après que le jeton $reset a été rencontré. Ceci est précieux dans un système comme Tailwind où il serait pénible d'avoir à écrire des classes de surcharge ou de désactiver individuellement des classes pour chaque classe configurée globalement lors de la déviation de notre thème :
Ce guide a parcouru la création d'un thème Tailwind qui couvre tous les types d'entrée inclus dans FormKit, mais il y a encore plus qui pourrait être fait dans votre propre projet.
Voici quelques façons de pousser encore plus loin le guide ci-dessus :
dark: intégré de Tailwind.formkit-invalid:formkit-submitted: pour ajouter un accent supplémentaire aux champs invalides lorsqu'un utilisateur essaie de soumettre un formulaire incomplet.Espérons que ce guide vous a aidé à comprendre comment les classes sont appliquées aux entrées FormKit et comment vous pouvez tirer parti du plugin formKitTailwind du package @formkit/themes pour utiliser Tailwind dans vos projets FormKit. Si vous voulez aller plus loin, essayez de lire sur les internes de base de FormKit et le schéma FormKit !