FormKit propose désormais des thèmes Tailwind beaucoup plus configurables disponibles sur themes.formkit.com. Si vous utilisez le thème CSS Genesis legacy, suivez les instructions ci-dessous — mais nous vous encourageons à envisager d'utiliser l'un des nouveaux thèmes personnalisables FormKit alimentés par Tailwind pour vous simplifier la vie.
Finalement, le thème CSS Genesis legacy sera déprécié et ne sera plus pris en charge par les nouvelles entrées Pro.
FormKit fournit un thème CSS (legacy) appelé genesis qui peut être ajouté en l'installant depuis le package @formkit/themes.
Pour charger genesis via CDN, fournissez-le à la propriété theme de votre defaultConfig :
...
defaultConfig({
theme: 'genesis' // sera chargé depuis le CDN et injecté dans l'en-tête du document
})
...
npm install @formkit/themes
En supposant que vous utilisez un bundler comme Vite, Webpack ou Nuxt — vous pouvez alors importer directement le thème :
// main.js ou formkit.config.ts
import '@formkit/themes/genesis'
Par défaut, les icônes requises par le thème genesis seront chargées depuis le CDN lorsqu'elles sont demandées. Si vous préférez inclure les icônes directement dans votre bundle pour améliorer les performances, éviter tout effet de pop-in, ou pour pallier d'éventuels problèmes de SSR, alors importez l'ensemble genesisIcons depuis @formkit/icons et étendez-les dans la propriété icons de votre configuration FormKit.
import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
icons: {
...genesisIcons
}
})
...