O FormKit agora oferece temas Tailwind muito mais configuráveis disponíveis em themes.formkit.com. Se você está usando o tema CSS Genesis legado, siga as instruções abaixo — mas incentivamos você a considerar o uso de um dos novos temas personalizáveis do FormKit com Tailwind para tornar sua vida muito mais simples.
Eventualmente, o tema CSS Genesis legado será descontinuado e não terá mais suporte para novos inputs Pro.
O FormKit oferece um tema CSS (legado) chamado genesis, que pode ser adicionado instalando-se o pacote @formkit/themes.
Para carregar o genesis via CDN, forneça-o à propriedade theme do seu defaultConfig:
...
defaultConfig({
theme: 'genesis' // será carregado do CDN e injetado no cabeçalho do documento
})
...
npm install @formkit/themes
Assumindo que você está usando um empacotador como Vite, Webpack ou Nuxt — você pode então importar o tema diretamente:
// main.js ou formkit.config.ts
import '@formkit/themes/genesis'
Por padrão, os ícones necessários pelo tema genesis serão carregados do CDN quando solicitados. Se você preferir incluir os ícones diretamente no seu pacote para aumentar o desempenho, evitar qualquer aparecimento súbito ou para aliviar possíveis problemas com SSR, então importe o conjunto genesisIcons de @formkit/icons e espalhe-os na propriedade icons da sua configuração do FormKit.
import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
icons: {
...genesisIcons
}
})
...