Temas
Usando a Interface Web
A maneira mais fácil de começar a usar os Temas do FormKit (para Tailwind) é acessar diretamente https://themes.formkit.com, personalizar um tema escolhido ao seu gosto e, em seguida, escolher Download theme para receber comandos específicos para executar na raiz do seu projeto.
Usando o CLI
Alternativamente, você pode usar o cli do FormKit para gerar temas para o seu projeto. Para começar, execute o seguinte comando no mesmo diretório do seu arquivo formkit.config.{ts|js}:
npx formkit theme
Você será guiado na escolha de um tema existente como ponto de partida para o seu projeto. Este comando criará um arquivo formkit.theme.{ts|js} na raiz do seu projeto. Para completar a configuração, você precisará usar as rootClasses deste arquivo de tema no seu 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,
},
})
Finalmente, você precisará adicionar o arquivo formkit.theme.{ts|js} à propriedade de conteúdo do seu arquivo de configuração do Tailwind. Isso garantirá que os estilos do tema sejam incluídos no CSS do seu projeto:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app.vue",
"./formkit.theme.ts" // <-- adicione seu arquivo de tema
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
}
Se você executar o comando novamente, será levado para https://themes.formkit.com, onde poderá personalizar o tema escolhido.
# com o arquivo formkit.theme existente na raiz do seu projeto
> npx formkit theme
? Encontrado arquivo de tema local para <themeName>, editar este tema? › (Y/n)
Adicionando ícones
Por padrão, os ícones necessários pelo FormKit serão carregados do CDN quando solicitados. Se você preferir incluir os ícones diretamente no seu pacote para aumentar a performance, evitar qualquer pop-in 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.
npm install @formkit/icons
import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
plugins: [proPlugin],
icons: {
...genesisIcons
}
})
...
Personalização adicional
Uma vez que você tenha um tema em seu projeto, você pode personalizá-lo ainda mais seguindo a documentação fornecida na seção de estilização dos docs do FormKit.