Skip to content
ark-tailwind-codegen

ark-tailwind-codegen

by Luke

Convert Figma's css output into tailwind classes that match our custom theme.

FreeDev Mode

Installs

17

Likes

2

Users

355

Views

363

Preview

ark-tailwind-codegen preview

About this plugin

This plugin is based on Parbez's figma-tailwindcss pluginIt uses ARK's custom Tailwind theme to convert Figma's CSS output into tailwind classes that can be used in conjunction with our design system.

The source code is available on GithubHow to useClick the Open in... button and choose the file you want to use it inGo to your file and make sure you’re in Dev Mode (if there are green buttons in the UI, you’re in the right place 👌)Select the layers you want to generate the class names forMake sure you have the Inspect panel open on the right-hand sideScroll down to the 'tailwindcss' section et voilà ✨If you don’t see this section but instead see an Inspect layer properties button, click it and you should see that section appearIf you still can’t see the section, make sure you’ve got `ark-tailwind-code` plugin selected from dropdown at the top-right of the `Code` sectionTodo[ ] Import tailwind theme from @ark/theming[ ] Custom typography classes[ ] Convert layout variables to classes[ ] Prettier?

More software development plugins

View all