Theming
Using the Web UI
The easiest way to get started with FormKit Tailwind Themes is to install the themes package and head to themes.formkit.com, customize a theme, and choose Download theme.
Using the CLI
Alternatively, you can use the FormKit CLI to select a theme for your project. Run the following command in the same directory as your formkit.config.{ts|js} file:
npx formkit@latest theme
This command will create a formkit.theme.{ts|js} file in the root of your project. To complete the setup you will need to use the rootClasses from this theme file in your formkit.config.{ts|js}:
// formkit.config.ts
import { defaultConfig } from '@formkit/vue'
import { rootClasses } from './formkit.theme'
export default defaultConfig({
config: {
rootClasses,
},
})
Finally, you’ll need to add the formkit.theme.{ts|js} file to your Tailwind config file’s content property. This will ensure that the theme’s styles are included in your project’s CSS:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app.vue",
"./formkit.theme.ts" // <-- add your theme file
],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
}
If you run the command again, you will be taken to https://themes.formkit.com where you can customize your chosen theme.
# with existing formkit.theme file in your project root
> npx formkit@latest theme
? Found local theme file for <themeName>, edit this theme? › (Y/n)
Adding icons
By default, the icons required by FormKit will be loaded from CDN when requested. If you prefer to include the icons directly in your bundle for increased performance, to avoid any pop-in, or to alleviate possible SSR issues, then import the genesisIcons set from @formkit/icons and spread them into the icons property of your FormKit config:
npm install @formkit/icons
import { genesisIcons } from '@formkit/icons'
...
const config = defaultConfig({
plugins: [proPlugin],
icons: {
...genesisIcons
}
})
...
Further customization
Once you have a theme in your project, you can customize it further by following the documentation provided in the styling section of the FormKit docs.