Speedboat

Build Tailwind designs and convert them to code with speed! Speedboat helps you by building a panel from your Tailwind configuration. No more quesswork!

FeaturesStyle LibraryOpens 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 namesCopies 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".

SettingsOpens 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.

Supported propertiesDimensionsOpacityCorner radiusSolid fillGradient fill (soon)StrokeShadowFont sizeLine heightLetter spacingText decorationText transformText alignFont weight (soon)NoteSpeedboat is a paid plugin. Head to https://speedboat.sh to get your activation code!FAQhttps://speedboat.sh/faq