Created
October 8, 2018 20:26
-
-
Save bobmurdoch/3983bb128ad1756ae67ca1bccc184d4c to your computer and use it in GitHub Desktop.
Tailwind CSS colors as Sass variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$black: #22292f; | |
$grey-darkest: #3d4852; | |
$grey-darker: #606f7b; | |
$grey-dark: #8795a1; | |
$grey: #b8c2cc; | |
$grey-light: #dae1e7; | |
$grey-lighter: #f1f5f8; | |
$grey-lightest: #f8fafc; | |
$white: #fff; | |
$red-darkest : #3b0d0c; | |
$red-darker : #621b18; | |
$red-dark : #cc1f1a; | |
$red : #e3342f; | |
$red-light : #ef5753; | |
$red-lighter : #f9acaa; | |
$red-lightest : #fcebea; | |
$orange-darkest : #462a16; | |
$orange-darker : #613b1f; | |
$orange-dark : #de751f; | |
$orange : #f6993f; | |
$orange-light : #faad63; | |
$orange-lighter : #fcd9b6; | |
$orange-lightest : #fff5eb; | |
$yellow-darkest : #453411; | |
$yellow-darker : #684f1d; | |
$yellow-dark : #f2d024; | |
$yellow : #ffed4a; | |
$yellow-light : #fff382; | |
$yellow-lighter : #fff9c2; | |
$yellow-lightest : #fcfbeb; | |
$green-darkest : #0f2f21; | |
$green-darker : #1a4731; | |
$green-dark : #1f9d55; | |
$green : #38c172; | |
$green-light : #51d88a; | |
$green-lighter : #a2f5bf; | |
$green-lightest : #e3fcec; | |
$teal-darkest : #0d3331; | |
$teal-darker : #20504f; | |
$teal-dark : #38a89d; | |
$teal : #4dc0b5; | |
$teal-light : #64d5ca; | |
$teal-lighter : #a0f0ed; | |
$teal-lightest : #e8fffe; | |
$blue-darkest : #12283a; | |
$blue-darker : #1c3d5a; | |
$blue-dark : #2779bd; | |
$blue : #3490dc; | |
$blue-light : #6cb2eb; | |
$blue-lighter : #bcdefa; | |
$blue-lightest : #eff8ff; | |
$indigo-darkest : #191e38; | |
$indigo-darker : #2f365f; | |
$indigo-dark : #5661b3; | |
$indigo : #6574cd; | |
$indigo-light : #7886d7; | |
$indigo-lighter : #b2b7ff; | |
$indigo-lightest : #e6e8ff; | |
$purple-darkest : #21183c; | |
$purple-darker : #382b5f; | |
$purple-dark : #794acf; | |
$purple : #9561e2; | |
$purple-light : #a779e9; | |
$purple-lighter : #d6bbfc; | |
$purple-lightest : #f3ebff; | |
$pink-darkest : #451225; | |
$pink-darker : #6f213f; | |
$pink-dark : #eb5286; | |
$pink : #f66d9b; | |
$pink-light : #fa7ea8; | |
$pink-lighter : #ffbbca; | |
$pink-lightest : #ffebef; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Will try to keep this up-to-date as a package in the future: https://github.com/martinshaw/tailwind-colors-scss