Extended color theme

Hey, super cool project that’s probably going to change a lot the way I currently use tailwind in some of my projects. I was already quite into Oceanwind, but this is really next level.

I quickly tried and put it head to head, reproducing the welcome example of https://play.tailwindcss.com/ into my favorite JS library and was blown away by how close it was… In fact, i’d even say it’s 1:1.

There’s one thing, however, that might be cool to add and I didn’t see any mention in the documentation. The extended color palette introduced in tailwind 2. As far as I understand, the default theme colors in twind is matching the default theme in tailwind, which only includes a small subset of colors. Here’s the full color list that was introduced in tailwind 2: https://github.com/tailwindlabs/tailwindcss/blob/master/colors.js.

For file size reason, I totally get that it shouldn’t be integrated within the default theme (that’s also probably why it wasn’t in tailwind by default, to trim down the compilation time), but I wonder if it could be possible to add like an extra exported object that contains those rules. e.g.:

import { setup, colors } from 'twind'
// or import colors from 'twind/colors';

setup({
  theme: {
    extend: {
      colors: { cyan: colors.cyan }
    }
  }
})

The only problem I suppose is to get good tree shakeability from an object so that you only pay for the color you use… I’m not sure if that’d be possible. I guess you could also export each and every color separately:

import { red, cyan, blue } from 'twind/colors';
// or import * as colors from 'twind/colors';

setup({
  theme: {
    extend: {
      colors: { red, cyan, blue }
    }
  }
})

That’s just a suggestion and I supposed one could also just copy and paste the the needed color from the original tailwind color palette as well.

Again, thanks for the library!

[sastan]

@amoutonbrady This has been merged and released in v0.8.0.

[sastan]

Good idea. I’ll try that.