Utilisation de l'interface Web

La manière la plus simple de commencer avec les thèmes FormKit (pour Tailwind) est de se rendre directement sur https://themes.formkit.com, de personnaliser un thème choisi selon vos préférences, puis de sélectionner Télécharger le thème pour recevoir des commandes spécifiques à exécuter à la racine de votre projet.

Thèmes FormKit

Des thèmes Tailwind polyvalents, configurables et sous licence MIT pour utilisation dans vos projets. Passez moins de temps à styliser — plus de temps à construire.

Utilisation du CLI

Alternativement, vous pouvez utiliser le CLI de FormKit pour générer des thèmes pour votre projet. Pour commencer, exécutez la commande suivante dans le même répertoire que votre fichier formkit.config.{ts|js} :

npx formkit theme

Vous serez guidé pour choisir un thème existant comme point de départ pour votre projet. Cette commande créera un fichier formkit.theme.{ts|js} à la racine de votre projet. Pour compléter la configuration, vous devrez utiliser les rootClasses de ce fichier de thème dans votre formkit.config.{ts|js} :

// formkit.config.ts
import { fr } from '@formkit/i18n'
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'

export default defaultConfig({
  locales: { fr },
  locale: 'fr',
  config: {
    rootClasses,
  },
})

Enfin, vous devrez ajouter le fichier formkit.theme.{ts|js} à la propriété content de votre fichier de configuration Tailwind. Cela garantira que les styles du thème soient inclus dans le CSS de votre projet :

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app.vue",
    "./formkit.theme.ts" // <-- ajoutez votre fichier de thème
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

Si vous exécutez la commande à nouveau, vous serez redirigé vers https://themes.formkit.com où vous pourrez personnaliser votre thème choisi.

# avec un fichier formkit.theme existant à la racine de votre projet
> npx formkit theme
? Found local theme file for <themeName>, edit this theme? › (Y/n)