tailwind.config.js for Tailwind v3 projects that extend the classic JavaScript config, and a theme.css for Tailwind v4 projects that use the new CSS-first @theme block. Both files include your full token set: colors, spacing, border radius, border widths, and opacity values.
Tailwind v3 — tailwind.config.js
1
Open the Developer tab
Open Coreframe in Figma and click the Developer tab at the top of the plugin panel.
2
Click Export config.js
Find the Export Tailwind v3 config card and click the Export config.js button. Coreframe reads your local Figma variables and generates the config file.
3
Save the downloaded file
When the download prompt appears, save the file as
tailwind.config.js.4
Drop it into your project root
Move
tailwind.config.js into your project root. If you already have a Tailwind config, merge the theme.extend keys from the exported file into your existing config to preserve any project-specific overrides.theme.extend so your export never wipes out Tailwind’s default scale — it only adds or overrides the values your design system defines.
tailwind.config.js
Tailwind v4 — theme.css
1
Open the Developer tab
Open Coreframe in Figma and click the Developer tab at the top of the plugin panel.
2
Click Export theme.css
Find the Export Tailwind v4 theme.css card and click the Export theme.css button. Coreframe generates a CSS file using the
@theme block.3
Save the downloaded file
When the download prompt appears, save the file as
theme.css — for example, into your src/styles/ directory.4
Import it in your CSS entry point
Add an import at the top of your project’s main CSS file so Tailwind v4 picks up your custom theme:
@theme and makes them available as utility classes automatically. The exported file begins with @import "tailwindcss"; so the theme block is self-contained — you don’t need to add a separate Tailwind import.
theme.css
Developer exports are in beta. The token structure may evolve as Coreframe adds new token categories and refines naming conventions. Re-export after regenerating your tokens to keep your code in sync with the latest design.