Speedboat is a Figma plugin that helps designers and developers get what they need from the design they’re currently working on. It builds a panel UI from your custom Tailwind configuration, and makes it easier for designers to use Tailwind in their designs. It also converts layer properties into Tailwind-compatible HTML classes, which makes it also very useful for developers.
pens a panel which will allow you to design using the values from your configuration. Here you can pick your dimensions, fills, shadows and more with just a few clicks. It also offers a handy Copy class names button so you can design and prototype quicker than ever before. 🤯
Copy class names
Copies the selected layer Tailwind-compatible class names for supported properties based on your configuration to your clipboard. If your configuration specifies eg. brand-blue colour and your design uses that colour as a Fill, the result copied to your clipboard will be "bg-brand-blue".
Opens a panel with Speedboat configuration. This panel will allow you to set the base font size for your design (if you use relative units) and import your own Tailwind configuration. The configuration is embedded into the file, so you can share it and don’t have to wory about also having to share the configuration.
For more information head to http://speedboat.sh/