<header>
  <h1>Tailwind CSS Default Color Palette</h1>
  <a href="https://tailwindcss.com/docs/colors/#default-color-palette">Tailwind Documentation</a>
</header>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {  
  --black: #22292f; 
  --grey-darkest: #3d4852;
  --grey-darker: #606f7b;
  --grey-dark: #8795a1;
  --grey: #b8c2cc;
  --grey-light: #dae1e7;
  --grey-lighter: #f1f5f8;
  --grey-lightest: #f8fafc;
  --white: #ffffff;

  --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;  
}

body {
  padding: 2rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin: 0 auto;
  max-width: 800px;
}

header {
  margin-bottom: 2rem;
}

header a {
  color: black;
}

.row {
  display: flex;
  margin-bottom: 16px;
  padding: 1rem 0;
}

.item {
  display: flex;
  flex-basis: 120px;
  justify-content: center;  
  align-items: center;
  height: 80px;
  font-size: small;
  color: var(--white);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.item:hover {
  cursor: pointer;
}

.item:nth-child(n+4) {
  color: var(--black);
}

const tailwindColorPalettes = [
  [
    "black",
    "grey-darkest",
    "grey-darker",
    "grey-dark",
    "grey",
    "grey-light",
    "grey-lighter",
    "grey-lightest",
    "white"
  ],
  [
    "red-darkest",
    "red-darker",
    "red-dark",
    "red",
    "red-light",
    "red-lighter",
    "red-lightest"
  ],
  [
    "orange-darkest",
    "orange-darker",
    "orange-dark",
    "orange",
    "orange-light",
    "orange-lighter",
    "orange-lightest"
  ],
  [
    "yellow-darkest",
    "yellow-darker",
    "yellow-dark",
    "yellow",
    "yellow-light",
    "yellow-lighter",
    "yellow-lightest"
  ],
  [
    "green-darkest",
    "green-darker",
    "green-dark",
    "green",
    "green-light",
    "green-lighter",
    "green-lightest"
  ],
  [
    "teal-darkest",
    "teal-darker",
    "teal-dark",
    "teal",
    "teal-light",
    "teal-lighter",
    "teal-lightest"
  ],
  [
    "blue-darkest",
    "blue-darker",
    "blue-dark",
    "blue",
    "blue-light",
    "blue-lighter",
    "blue-lightest"
  ],
  [
    "indigo-darkest",
    "indigo-darker",
    "indigo-dark",
    "indigo",
    "indigo-light",
    "indigo-lighter",
    "indigo-lightest"
  ],
  [
    "purple-darkest",
    "purple-darker",
    "purple-dark",
    "purple",
    "purple-light",
    "purple-lighter",
    "purple-lightest"
  ],
  [
    "pink-darkest",
    "pink-darker",
    "pink-dark",
    "pink",
    "pink-light",
    "pink-lighter",
    "pink-lightest"
  ]
];

function parsePalette(palette) {
  const row = getRow();
  palette.forEach(function(colorName, i) {
    const item = getItem();
    item.style.setProperty("background-color", `var(--${colorName})`);
    // item.textContent = colorName;
    row.appendChild(item);
  });
  document.body.appendChild(row);
}

function getRow() {
  const row = getElement();
  row.classList.add("row");
  return row;
}

function getItem() {
  const item = getElement();
  item.classList.add("item");
  return item;
}

function getElement() {
  return document.createElement("div");
}

function clickHandler(e) {
  if (!e.target.classList.contains("item")) return;
  document.body.style.setProperty(
    "background-color",
    e.target.style.backgroundColor
  );
}

document.body.addEventListener("click", clickHandler);
tailwindColorPalettes.forEach(parsePalette);