Tailwindcss: Include warm greys in the default color palette

[spiffytech]

I would like to see a set of warm grays included in the default palette. The existing cool grays don't pair very well with e.g., orange accents.

[jlarmstrongiv]

Yes, adding warm greys would be awesome 👍 adding lime, cyan, light blue and magenta would give Tailwind CSS the full range of palettes too

[adamwathan]

No plans to add these by default but we may create a separate package one day with more color sets that you can pull from to build your own palette. Until then thankfully it's very easy to define your own color palette with whatever colors you need 👍

[jlarmstrongiv]

@adamwathan I recently created a muted color palette with 153 handpicked colors. It's definitely a lot of work haha but, I really think these colors are a necessary addition to the default palette. If I worked on these additional palettes and submitted them, would they be reviewed and added?

[hacknug]

Pretty sure the answer is no since 153 more colors would have huge impact on the CDN's build size. Best way to go around this would be creating a plugin that adds the palette to a projects theme.

This is not possible right now but discussion is over at #660. In the meantime you could set a repo, blog post or something showing the palette and giving the code ready to copy/paste in case any users want to use them.

[hacknug]

I've had the need to use a neutral gray palette a couple times since I last posted here so I thought I might share the palettes I used as reference in case they're helpful to anyone else (they sure will help me when I need them in the future):

tailwind: {
  100: '#f7fafc',
  200: '#edf2f7',
  300: '#e2e8f0',
  400: '#cbd5e0',
  500: '#a0aec0',
  600: '#718096',
  700: '#4a5568',
  800: '#2d3748',
  900: '#1a202c',
},
material: {
  50: '#fafafa',
  100: '#f5f5f5',
  200: '#eeeeee',
  300: '#e0e0e0',
  400: '#bdbdbd',
  500: '#9e9e9e',
  600: '#757575',
  700: '#616161',
  800: '#424242',
  900: '#212121',
},
cloudflare: {
  50: '#f7f7f8',
  100: '#eaebeb',
  200: '#d5d7d8',
  300: '#b7bbbd',
  400: '#92979b',
  500: '#72777b',
  600: '#62676a',
  700: '#4e5255',
  800: '#36393a',
  900: '#1d1f20',
},
carbon: {
  50: '#f3f3f3',
  100: '#dcdcdc',
  200: '#bebebe',
  300: '#a4a4a4',
  400: '#8c8c8c',
  500: '#6f6f6f',
  600: '#565656',
  700: '#3d3d3d',
  800: '#282828',
  900: '#171717',
},

[hacknug]

More gray palettes (neutral, warm and cool) taken from the USWDS (United States Web Design System) thanks to @SolarisFlare :tada: https://github.com/SolarisFlare/TailwindAccessibilityConfig

[optimizasean]

Thanks for the addition to the palette! Also apologies for the name change! https://github.com/optimizasean/TailwindAccessibilityConfig