TIL that brown is not a color… well at least not a Tailwind color! I asked copilot to make a button brown and it made it amber. I saw the result and thought hmm that's not brown. So I edited the class from amber-500 to brown-500 with my bare hands. I glanced over at my button and it still wasn't brown. So I opened the Tailwind docs in a browser like a caveman, hit CMD + K, and searched for the color palette. What happened next was a moment I'll never forget. I scrolled the entire page and didn't see the color brown. I quickly googled whether Tailwind had the color brown and learned the truth. Tailwind does not have the color brown…
The solution? I found someone else on the Internet with the same problem who extended their Tailwind theme to add brown to the color palette and copied their code. Why reinvent the brown when someone else has already figured out the perfect hex values for brown-50 through brown-950?
//tailwind.config.ts theme: { extend: { colors: { brown: { 50: "#efebe9", 100: "#d7ccc8", 200: "#bcaaa4", 300: "#a1887f", 400: "#8d6e63", 500: "#795548", 600: "#6d4c41", 700: "#5d4037", 800: "#4e342e", 900: "#3e2723", DEFAULT: "#795548", }, background: "var(--background)", foreground: "var(--foreground)", }, }, },