jan-dhjan-dh
195

Sketch Tailwind

screenshot of Sketch Tailwind
react
tailwind

A plugin that tries to bridge the gap between designs and code. Sketch Tailwind lets you export aspects of a design made in Sketch to a javascript theme file that you can import into your TailwindCSS config

Github

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.

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.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

tailwind
Tailwind

Tailwind CSS is a utility-first CSS framework that provides pre-defined classes for building responsive and customizable user interfaces.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.