Back to Plugins
ark-tailwind-codegen

ark-tailwind-codegen

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

Plugin 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?

Plugin Details

Version1
CreatedAugust 29, 2024
Last UpdatedAugust 30, 2024
CategorySoftware development
CreatorLuke
Stats15 installs, 2 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:ui.html
  • main:dist/code.js
  • Document Access:dynamic-page
  • Editor Types:
    dev
  • Allowed Domains:
    • none
  • Codegen Languages:
    • tailwindcss(css)