Tailwind Resources Logo Tailwind Resources
Tailwindcss Sketch Kit screenshot

Tailwindcss Sketch Kit

Author Avatar Theme by Jessedobbelaere
Updated: 22 Nov 2020
135 Stars

Sketch UI kit for Tailwind CSS

Github

Overview

The Tailwindcss Sketch Kit is an open-source software that provides a comprehensive set of design resources for Sketch users. It includes various features such as Tailwind v2 CSS colors, typography styles, shadows, buttons, spacers/containers, basic form symbols, and icons from Heroicons UI. The kit aims to enhance the design workflow by providing ready-to-use design assets, including a Sketch Palettes plugin file and the Inter font.

Features

  • Tailwind v2 CSS colors and typography styles: The kit provides all the colors and typography styles available in Tailwind CSS version 2, allowing designers to easily use consistent design elements in their Sketch projects.
  • Shadows and buttons: Tailwindcss Sketch Kit includes pre-defined shadow styles and button components, saving designers time when creating common design elements.
  • Spacers/containers and basic form symbols: The kit offers spacers/containers and basic form symbols, enabling designers to quickly layout their designs and add form elements without starting from scratch.
  • Inter font: The kit uses the Inter font, which is frequently used in TailwindUI, ensuring consistency between design assets and the popular design system.

Installation

To install the Tailwindcss Sketch Kit, follow these steps:

  1. Download the kit from the GitHub repository.
  2. Extract the downloaded ZIP file to a desired location on your computer.
  3. Open Sketch and go to Plugins > Manage Plugins.
  4. Click on the Gear icon and select Show Plugins Folder to open the plugins folder.
  5. Move the extracted Tailwindcss.sketchplugin file into the plugins folder.
  6. Restart Sketch to load the plugin.
  7. You can now access the Tailwindcss Sketch Kit features from the Plugins menu in Sketch.

Summary

The Tailwindcss Sketch Kit is a valuable resource for Sketch users who work with Tailwind CSS. Its extensive collection of design assets, including colors, typography styles, shadows, buttons, spacers/containers, form symbols, and icons, can significantly speed up the design process. By providing ready-to-use design elements and utilizing the Inter font, the kit promotes consistency and efficiency in designing with Tailwind CSS.