Skip to content

Instantly share code, notes, and snippets.

@erinnmclaughlin

erinnmclaughlin/tailwind-variables.css

Last active December 29, 2023 12:40
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save erinnmclaughlin/eda3939c3955fb208e42234578804962 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save erinnmclaughlin/eda3939c3955fb208e42234578804962 to your computer and use it in GitHub Desktop.
Download ZIP
css variables from Tailwind
Raw
tailwind-variables.css
/**************************************/
/*************** Colors ***************/
/**************************************/
:root {
/* Slate */
--colors-slate-50: 248 250 252;
--colors-slate-100: 241 245 249;
--colors-slate-200: 226 232 240;
--colors-slate-300: 203 213 225;
--colors-slate-400: 148 163 184;
--colors-slate-500: 100 116 139;
--colors-slate-600: 71 85 105;
--colors-slate-700: 51 65 85;
--colors-slate-800: 30 41 59;
--colors-slate-900: 15 23 42;
/* Gray */
--colors-gray-50: 249 250 251;
--colors-gray-100: 243 244 246;
--colors-gray-200: 229 231 235;
--colors-gray-300: 209 213 219;
--colors-gray-400: 156 163 175;
--colors-gray-500: 107 114 128;
--colors-gray-600: 75 85 99;
--colors-gray-700: 55 65 81;
--colors-gray-800: 31 41 55;
--colors-gray-900: 17 24 39;
/* Red */
--colors-red-50: 254 242 242;
--colors-red-100: 254 226 226;
--colors-red-200: 254 202 202;
--colors-red-300: 252 165 165;
--colors-red-400: 248 113 113;
--colors-red-500: 239 68 68;
--colors-red-600: 220 38 38;
--colors-red-700: 185 28 28;
--colors-red-800: 153 27 27;
--colors-red-900: 127 29 29;
/* Orange */
--colors-orange-50: 255 247 237;
--colors-orange-100: 255 237 213;
--colors-orange-200: 254 215 170;
--colors-orange-300: 253 186 116;
--colors-orange-400: 251 146 60;
--colors-orange-500: 249 115 22;
--colors-orange-600: 234 88 12;
--colors-orange-700: 194 65 12;
--colors-orange-800: 154 52 18;
--colors-orange-900: 124 45 18;
/* Amber */
--colors-amber-50: 255 251 235;
--colors-amber-100: 254 243 199;
--colors-amber-200: 253 230 138;
--colors-amber-300: 252 211 77;
--colors-amber-400: 251 191 36;
--colors-amber-500: 245 158 11;
--colors-amber-600: 217 119 6;
--colors-amber-700: 180 83 9;
--colors-amber-800: 146 64 14;
--colors-amber-900: 120 53 15;
/* Yellow */
--colors-yellow-50: 254 252 232;
--colors-yellow-100: 254 249 195;
--colors-yellow-200: 254 240 138;
--colors-yellow-300: 253 224 71;
--colors-yellow-400: 250 204 21;
--colors-yellow-500: 234 179 8;
--colors-yellow-600: 202 138 4;
--colors-yellow-700: 161 98 7;
--colors-yellow-800: 133 77 14;
--colors-yellow-900: 113 63 18;
/* Lime */
--colors-lime-50: 247 254 231;
--colors-lime-100: 236 252 203;
--colors-lime-200: 217 249 157;
--colors-lime-300: 190 242 100;
--colors-lime-400: 163 230 53;
--colors-lime-500: 132 204 22;
--colors-lime-600: 101 163 13;
--colors-lime-700: 77 124 15;
--colors-lime-800: 63 98 18;
--colors-lime-900: 54 83 20;
/* Green */
--colors-green-50: 236 253 245;
--colors-green-100: 209 250 229;
--colors-green-200: 167 242 208;
--colors-green-300: 110 231 183;
--colors-green-400: 52 211 153;
--colors-green-500: 16 185 129;
--colors-green-600: 5 150 105;
--colors-green-700: 4 120 87;
--colors-green-800: 6 95 70;
--colors-green-900: 6 78 59;
/* Blue */
--colors-blue-50: 239 246 255;
--colors-blue-100: 219 234 254;
--colors-blue-200: 191 219 254;
--colors-blue-300: 147 197 253;
--colors-blue-400: 96 165 250;
--colors-blue-500: 59 130 246;
--colors-blue-600: 37 99 235;
--colors-blue-700: 29 78 216;
--colors-blue-800: 30 64 175;
--colors-blue-900: 30 58 138;
/* Indigo */
--colors-indigo-50: 238 242 255;
--colors-indigo-100: 224 231 255;
--colors-indigo-200: 199 210 254;
--colors-indigo-300: 165 180 252;
--colors-indigo-400: 129 140 248;
--colors-indigo-500: 99 102 241;
--colors-indigo-600: 79 70 229;
--colors-indigo-700: 67 56 202;
--colors-indigo-800: 55 48 163;
--colors-indigo-900: 49 46 129;
/* Purple */
--colors-purple-50: 245 243 255;
--colors-purple-100: 237 233 254;
--colors-purple-200: 221 214 254;
--colors-purple-300: 196 181 253;
--colors-purple-400: 167 139 250;
--colors-purple-500: 139 92 246;
--colors-purple-600: 124 58 237;
--colors-purple-700: 109 40 217;
--colors-purple-800: 91 33 182;
--colors-purple-900: 76 29 149;
/* Pink */
--colors-pink-50: 253 242 248;
--colors-pink-100: 252 231 243;
--colors-pink-200: 251 207 232;
--colors-pink-300: 249 168 212;
--colors-pink-400: 244 114 182;
--colors-pink-500: 236 72 153;
--colors-pink-600: 219 39 119;
--colors-pink-700: 190 24 93;
--colors-pink-800: 157 23 77;
--colors-pink-900: 131 24 67;
/* Teal */
--colors-teal-50: 240 253 250;
--colors-teal-100: 204 251 241;
--colors-teal-200: 153 246 228;
--colors-teal-300: 94 234 212;
--colors-teal-400: 45 212 191;
--colors-teal-500: 20 184 166;
--colors-teal-600: 13 164 148;
--colors-teal-700: 15 153 135;
--colors-teal-800: 17 138 123;
--colors-teal-900: 19 124 109;
}
/**************************************/
/*************** Shadows **************/
/**************************************/
:root {
--shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment