Skip to content
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 javascript files that are ready to use with Tailwind CSS.
Branch: master
Clone or download
Jan
Latest commit e3ac4c2 Mar 23, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets added icon Mar 2, 2019
resources
sketch-tailwind.sketchplugin/Contents added GUI Feb 28, 2019
src
.appcast.xml
.babelrc added GUI Feb 28, 2019
.editorconfig first commit Jan 7, 2019
.estlintr.json added GUI Feb 28, 2019
.gitignore first commit Jan 7, 2019
LICENSE
README.md
package-lock.json Publish 2.0.0 release 🚀 Mar 1, 2019
package.json
webpack.skpm.config.js added GUI Feb 28, 2019

README.md

Sketch Tailwind

A plugin that tries to bridge the gap between design and code. Sketch Tailwind lets you export aspects of a design made in Sketch to a javascript theme file that can easily be used with Tailwind CSS.


Table of Contents

Installation

Download the ZIP-folder. After extracting, double-click the 💎sketch-tailwind-plugin.sketchplugin file.

Usage

Creating your theme

The plugin gets it's info from the Layer Styles and Text Styles. At this point it picks up:

  • colors
  • font-families
  • text-sizes

Colors

For the colors the plugin will look at all your Layer Styles and takes each color, using the last part of it's name (behind the last /). This way you can still organize your colors in Sketch using subfolders, while only exporting the actual color name. Within the plugin you can add some extra colors if you need to. Might add a color-picker if people would like to see that.

Font-families

The plugin will pick up all font-families used in your Text Layers.

Text-sizes

All the different font-sizes you use in your Text Styles will be picked up by the plugin. You can pick a base font-size and the rest of the font-size names are calculated accordingly. The logic used:

...
'3xs'
'2xs'
'xs'
'sm'
'base'
'lg'
'xl'
'2xl'
'3xl'
...

The font-sizes the plugin spits out will also be converted into a rem based scale (with 16 as your base).

Importing your theme

When you export the theme it saves a file with your theme in a variable theme and there's an export available in the file. Import the theme.js file in to your tailwind.js configuration file.

import theme from './theme';

Using the spread operator at the end of each property you can add the colors, fonts and font-sizes to your config.

let colors = {
  'transparent': 'transparent',
  ...
  ...theme.colors,

Contributing

All feedback is welcome. Feel free to submit issues or suggestions.

Roadmap

  • 🔥 Add Plugin Icon
  • 🚀 Add more possible exports

License

This project is licensed under the terms of the MIT license.

You can’t perform that action at this time.