/tailwind-sketch-colors

Sketch style library for Tailwind CSS & Tailwind UI

Tailwind Color Palettes for Sketch

Sketch Libraries for Tailwind CSS & Tailwind UI's default color palettes.

How to use

Add the sketch files as libraries: https://www.sketch.com/docs/libraries/

Then simply color in your layers with the default color variables or later styles if using an older version of Sketch. When you edit a color variable it will automatically update the later style and components globally in your document.

Read more about Sketch's new color variables here: https://www.sketch.com/docs/styling/#organizing-color-variables

Why are there two libraries?

Tailwind CSS and Tailwind UI use a different color palette. Tailwind UI includes a brand new color palette that is more consistent across colors, and more vivid than the default Tailwind CSS color palette. It also includes a new "50" shade, so there are now 10 shades per color instead of 9. See below:

Tailwind CSS Default Colors: https://tailwindcss.com/docs/background-color
Tailwind UI Default Colors: https://tailwindui.com/documentation#customizing-colors

What are there components, later styles and color variables?

Some people like to insert a component and mask the layer to be able to update the color on a UI component, others like to change the layer style and now we have color variables. As time goes on we will remove the color components and then the layer styles.

Changing a color and exporting to Tailwind

You don't need to keep the default tailwind color pallets, you can very easily change all or some of the colors, or even add new ones, read more here: https://tailwindcss.com/docs/customizing-colors