Tailwind Shades Generator

Quickly generate Tailwind shades and CSS variables for your project.

HEX

RGB

HSL

Tailwind Shades

CSS Variables

Your CSS File

:root {
  --color-primary-50: ;
  --color-primary-100: ;
  --color-primary-200: ;
  --color-primary-300: ;
  --color-primary-400: ;
  --color-primary-500: ;
  --color-primary-600: ;
  --color-primary-700: ;
  --color-primary-800: ;
  --color-primary-900: ;
}

tailwind.config.js

CSS Variables

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "rgb(var(--color-primary-50) / <alpha-value>)",
          100: "rgb(var(--color-primary-100) / <alpha-value>)",
          200: "rgb(var(--color-primary-200) / <alpha-value>)",
          300: "rgb(var(--color-primary-300) / <alpha-value>)",
          400: "rgb(var(--color-primary-400) / <alpha-value>)",
          500: "rgb(var(--color-primary-500) / <alpha-value>)",
          600: "rgb(var(--color-primary-600) / <alpha-value>)",
          700: "rgb(var(--color-primary-700) / <alpha-value>)",
          800: "rgb(var(--color-primary-800) / <alpha-value>)",
          900: "rgb(var(--color-primary-900) / <alpha-value>)",
        },
      }
    }
  }
}

tailwind.config.js

HEX Colors

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: "undefined",
          100: "undefined",
          200: "undefined",
          300: "undefined",
          400: "undefined",
          500: "undefined",
          600: "undefined",
          700: "undefined",
          800: "undefined",
          900: "undefined",
        },
      }
    }
  }
}

🎉 Enjoy

I created this tool to help me quickly configure Tailwind colors. I was building a UI component library and needed to quickly generate a Tailwind config that can dynamically change colors based on another projects css variable. I hope you find this tool useful.

Resources:

Created by Travis Lockcuff.
I also wrote an article about this tool if you're a curious minded individual Read here.