On authoring components that passes through classname

[cvpcasada]

How do you implement a reusable component that passes through classNames which may not be tailwind utility classes?

From the docs, the recommendation is to pass through component consumer's className to the tw function:

const Button = (props) => {
	const instanceStyles = apply(`ban-red ...`)
	return  <button  {...props} className={tw(instanceStyles, props.className)}>
} 

...

// my issue:

// doesn't work
<Button className={ tw( apply(`text-white ...`) ) } />

// works but users are confused whether to use `tw` here or not
<Button className="text-white ...." />	

My problem with this is that the consumers of this component has to use tailwind's classes for this component to work, and. also introduces confusion on when to use tw or not.

Right now, what I do is to just do concat ( or clsx ) on these components.

// this is how I do it right now
const Button = props => <button {...props}  className={`${tw(apply`bg-red ...`)} ${props.className}`} />

// now I know that this will just be passed through the component
<Button className={tw`text-white`} />

This is way less confusing for me as a user of this component as I know that If I wanted to use tailwind classes, I just use the tw function.

[itsMapleLeaf]

The last example you have is what I'd have done as well. By the way, this may interest you: https://github.com/tw-in-js/twind-jsx-preprocessor

[sastan]

Have you taken a look at twind/style and its companion @twind/react ? Both support passing className through and add the tw prop which are tokens/class names that are passed to the tw function.

[danielweck]

@cvpcasada That's not how style() works. See https://twind.dev/docs/modules/twind_style.html

Here is the corrected snippet (I have preserved your code structure, but this is of course a very naive / simplistic logic that be implemented differently, for example with apply(), or even just a plain class combinator):

import { tw, style } from "twind/style";

const styles = {
  h: style({ base: 'text-4xl font-semibold p-2', variants: { color: { red: 'text-red-500', blue: 'text-blue-500'} } })
};

export default function App() {

  return (
    <div className={tw`text-center`}>
      <h1 className={tw(styles.h({ color: 'red' }))}>
        This should have {redStyle}
      </h1>
      <h1 className={tw(styles.h({ color: 'blue' }))}>
        This should have {blueStyle}
      </h1>
    </div>
  );
}

Your original code:

import { tw, style, apply } from "twind/style";

const styles = {
  h: style({ base: apply`text-4xl font-semibold p-2` })
};

export default function App() {
  const redStyle = tw`text-red-500`;
  const blueStyle = tw`text-blue-500`;

  return (
    <div className={tw`text-center`}>
      <h1 className={tw(styles.h({ className: redStyle }))}>
        This should have {redStyle}
      </h1>
      <h1 className={tw(styles.h({ className: blueStyle }))}>
        This should have {blueStyle}
      </h1>
    </div>
  );
}

[cvpcasada]

Thanks @danielweck, my intent for the codesanbox above was to have consumers of a component to pass through a classname further customize the style of it more than the variants it can provide... I guess the tw property would serve me the best here.. e.g.

import { styled, apply, tw } from "@twind/react";

const Button = styled("button", {
  base: apply([
    `text-sm py-1.5 px-5 rounded`,
    `focus:outline-none focus:ring-blue-600 cursor-pointer`
  ]),
  variants: {
    variant: {
      primary: apply`focus:ring-2 hover:shadow-sm text-white bg-blue-500 hover:bg-blue-300`,
      outline: apply`focus:(ring-1 border-blue-600) hover:(shadow-sm bg-blue-50) border border-blue-600 `,
      ghost: apply`focus:ring-2 text-muted hover:border-blue-600`
    }
  },
  defaults: {
    variant: "primary"
  }
});

export default function App() {

  return (
    <div className={tw`text-center p-5`}>
      { /* using tw instead of className works well */ }
      <Button variant="outline" tw={`p-4 mr-5`}>Outline button</Button>
      <Button variant="primary" tw={`m-30`}>Blue button</Button>
    </div>
  );
}

[sastan]

That is almost perfect 👍🏾 Just a few minor changes:

1. You do not need apply within style/styled
2. You can use multiline template literals.
3. For the surrounding div you could use a Box component (optional, just showing as an example)

import { styled } from "@twind/react";

// defaults to a div - use `as` for other tags -> `<Box as="span">...</span>`
const Box = styled()

const Button = styled("button", {
  base: `
     text-sm py-1.5 px-5 rounded
     focus:outline-none focus:ring-blue-600 cursor-pointer
  `,
  variants: {
    variant: {
      primary: `focus:ring-2 hover:shadow-sm text-white bg-blue-500 hover:bg-blue-300`,
      outline: `focus:(ring-1 border-blue-600) hover:(shadow-sm bg-blue-50) border border-blue-600 `,
      ghost:  `focus:ring-2 text-muted hover:border-blue-600`
    }
  },
  defaults: {
    variant: "primary"
  }
});

export default function App() {
  return (
    <Box tw="text-center p-5">
      { /* using tw instead of className works well */ }
      <Button variant="outline" tw="p-4 mr-5">Outline button</Button>
      <Button variant="primary" tw="m-30">Blue button</Button>
    </Box>
  );
}

As a side note: The tw property accepts everything the tw function would accept. You can pass strings, arrays and objects.

[sastan]

@danielweck Nice pattern!

[sastan]

Totally forgot: There is a css property as well:

<Box css={{ width: '...' }}>
<Button css={{ width: '...' }}>