Tailwind CSS v1.0 Color Palette

index.html

<div id="app"></div>

script.babel

const colors =['gray','red','orange','yellow','green','teal','blue','indigo','purple','pink']

const ColorRow = function ({color}) {
  return (
    <div class="flex flex-wrap">
      {
        [100, 200, 300, 400, 500, 600, 700, 800, 900].reverse().map(shade => (
          <div class={`h-12 w-12 bg-${color}-${shade}`}></div>
          
          
        ))
      }
    </div>
  )
}

ReactDOM.render(
  <div class="min-h-screen bg-white p-8 flex items-center justify-center">
    <div>
      { colors.map(color => <ColorRow color={color}/>) }
    </div>
  </div>,
  document.getElementById('app')
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />

tailwind-css-v1-0-color-palette.markdown

Tailwind CSS v1.0 Color Palette

A Pen by Mitchell on CodePen.

License.