Sketch Tailwind

Overview

Sketch Tailwind is a plugin that aims to bridge the gap between design and code by allowing users to export design aspects from Sketch to a javascript theme file that can be easily integrated with Tailwind CSS. This plugin is designed to improve the workflow for designers and developers, making it easier to translate design styles and elements into working code.

Features

• Export Design Aspects: Users can export aspects of a design made in Sketch, including colors, font families, and text sizes.
• Color Export: The plugin looks at all the Layer Styles in Sketch and extracts the colors, using the last part of the color name for exporting. It also allows users to add extra colors if needed.
• Font Family Export: All font families used in Text Layers are automatically picked up by the plugin.
• Text Size Export: The plugin captures and exports all the different font sizes used in Text Styles. Users can pick a base font size and the plugin calculates the rest of the font size names accordingly.

Installation

1. Download the ZIP-folder from the provided source.
2. Extract the contents of the folder.
3. Double-click the 💎sketch-tailwind-plugin.sketchplugin file to install the plugin.

Summary

Sketch Tailwind is a plugin that enables designers to easily export design aspects from Sketch and integrate them seamlessly with Tailwind CSS. By automating the export process for colors, font families, and text sizes, the plugin improves the workflow for designers and developers, saving time and effort in translating designs into code. With its user-friendly interface and focus on bridging the gap between design and code, Sketch Tailwind is a valuable tool for anyone working with Sketch and Tailwind CSS.