Composition with custom colors doesn't work.

[jsartisan]

Hi there, first of all, I am in love with this package.

There is weird issue i am facing with custom colors. I have created a react button:

import { apply, tw } from 'twind';
import React, { useMemo } from 'react';


const baseStyles = apply`min-w-44 inline-flex items-center justify-center transition-all rounded-lg outline-none cursor-pointer focus:outline-none px-10 py-2 text-sm font-medium leading-5`;

const buttonStylesMap = {
  primary: apply`text-white hover:bg-primary-600 hover:ring-4 ring-red-200 bg-primary-500`,
  secondary: apply`bg-primary-100 text-red-500`,
  tertiary: apply`text-gray-600 border hover:bg-gray-100`,
  ghost: apply`hover:bg-gray-100`,
}

const Button = ({ type, children, loading, className, ...rest }) => {
  /*
   * returns the children to be rendered
   *
   * @returns
   */
  const computedChildren = useMemo(() => {
    if (loading) {
      return <span className={tw`animate-spin`}>
        <Icon>
          <LoaderIcon />
        </Icon>
      </span>
    }

    return children;
  }, [loading, children]);

  const instanceStyles = apply`
    ${baseStyles}
    ${buttonStylesMap[type]}`;

  return (
    <button className={tw(instanceStyles, className)}
      {...rest}
    >
      {computedChildren}
    </button>
  );
};

export default Button;

and I am using custom twind.config.js:

const { apply } = require('twind');

/** @type {import('twind').Configuration} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          100: '#e6f5ff',
          200: '#ccebff',
          300: '#99d6ff',
          400: '#99d6ff',
          500: '#0099ff',
          600: '#008ae6',
          700: '#006bb3',
          800: '#008ae6',
        },
      },
    },
  },
};

The above snippet does not work but if i use any other color other than the custom color ( say bg-red-500 instead of bg-primary-500 ), its works perfectly then. Am i missing anything or is it a bug?

[jsartisan]

Also, one thing I forgot to mention, I am doing all of this in nextjs app. and one weird behavior is everything starts working when I navigate from one page to another but does not work on the first render. Maybe it's an issue with SSR?

[jacobdubail]

Also, one thing I forgot to mention, I am doing all of this in nextjs app. and one weird behavior is everything starts working when I navigate from one page to another but does not work on the first render. Maybe it's an issue with SSR?

Exact same issue here. Did you resolve it somehow?

[sastan]

This will be most likely solved with twind v1. I haven't had the time to add a nextjs integration but that is up next.

Please give it a try. Here are some links to get you started:

• The v1 branch
• Reference until the website is ready
• Examples — the CDN example could be a good start

[davidPetLab]

Any update on this one since?

[sastan]

I have tested this with twind v1 and could not reproduce the issue. I used the https://github.com/tw-in-js/twind/tree/main/examples/with-next example and added your code to the index.jsx.

Please re-open if you still have this issue.