Variables

All configuration variables are defined in tailwind.config.js in the Lookbook repo. You can refer to any of those values in your own (post-processed) CSS with the Tailwind theme() function.

Like this:

.mything {
  color: theme('colors.red-50');
}

You can also use all colors as Custom Properties in your CSS:

.mything {
  color: var(--red-50);
}

The Custom Properties option is the preferred route when using color variables. There's no need for post-processing your CSS, and it's future proof.

All Custom Properties are defined on the :root element.

Here are all colors as Custom CSS properties:

:root {

  --blue-10: #6fb7ff;

  --blue-20: #4aa4fe;

  --blue-30: #3393f2;

  --blue-40: #1c83ea;

  --blue-50: #1576d7;

  --blue-60: #216ab3;

  --blue-70: #2a5c8e;

  --blue-80: #192d41;

  --blue-90: #0b1e31;

  --blue-100: #061829;

  --green-10: #f0fbf8;

  --green-20: #e0f7f1;

  --green-30: #c2efe3;

  --green-40: #9cd1c3;

  --green-50: #76aa9c;

  --green-60: #4b8e7c;

  --green-70: #2b735f;

  --green-80: #1d5243;

  --green-90: #12382e;

  --green-100: #0c3026;

  --grey-10: #ffffff;

  --grey-20: #f9f5f0;

  --grey-30: #f2ece4;

  --grey-40: #e7dfd6;

  --grey-50: #d2cac0;

  --grey-60: #bdb3a6;

  --grey-70: #9e9385;

  --grey-80: #776e63;

  --grey-90: #554e45;

  --grey-100: #3f3a33;

  --orange-10: #fff9ef;

  --orange-20: #f9f1dc;

  --orange-30: #f6e1aa;

  --orange-40: #fecf60;

  --orange-50: #f1ae0e;

  --orange-60: #a96500;

  --orange-70: #804d00;

  --orange-80: #55371b;

  --orange-90: #241b04;

  --orange-100: #1e1707;

  --purple-10: #f6f6ff;

  --purple-20: #eff0ff;

  --purple-30: #d7d9ff;

  --purple-40: #b4b9ff;

  --purple-50: #8188f1;

  --purple-60: #676dcd;

  --purple-70: #4b4f96;

  --purple-80: #36365b;

  --purple-90: #1a1c36;

  --purple-100: #111220;

  --red-10: #ffdfd8;

  --red-20: #fbb8a9;

  --red-30: #f29b88;

  --red-40: #e37f69;

  --red-50: #c95137;

  --red-60: #b2503b;

  --red-70: #9b3f2b;

  --red-80: #813221;

  --red-90: #722312;

  --red-100: #571507;

  --teal-10: #f3fdff;

  --teal-20: #e4f8fc;

  --teal-30: #cdeff5;

  --teal-40: #91d9e6;

  --teal-50: #34a4b9;

  --teal-60: #208092;

  --teal-70: #326f7a;

  --teal-80: #1a464e;

  --teal-90: #102c32;

  --teal-100: #0b1e21;

}