See official docs for more information
npm install @chimera-ui/components @chimera-ui/tw-plugin
Modify your tailwind.config.js
to include:
"./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}",
in the content
arrayrequire("@chimera-ui/tw-plugin")
in the plugins
arraymodule.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
"./components/**/*.{js,ts,jsx,tsx}",
"./node_modules/@chimera-ui/components/dist/**/*.{js,mjs}", // This line is important! If you don't include this, Chimera's styles will be purged
,
],
plugins: [
require("@chimera-ui/tw-plugin"), // This is important! This extends your tailwind theme to consume the CSS variables.
],
};
Use the theme generator to generate CSS themes. Add the CSS variables to your global css file.
npm run build
will trigger prebuild
. In prebuild
, @chimera-ui/components will run tsdocSync.js, which syncs the classNames from each component to a tsdoc comment above it.