What is the strategy for common component?

[devhyunjae]

Demo

https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-riz53?file=/src/components/app.js

question

Hi guys, I want to know what is the best practices when making common component via tailwindcss

example common <Card /> component

const Card = ({ css, wrapperClassName }) => {
  const className = `p-4 bg-gray-50 ${wrapperClassName}`;
  return (
    <div className={className} style={css}>
      <div className="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
        <div>
          <div className="text-xl font-medium text-black">Tailwind css</div>
          <p className="text-gray-500">hello world</p>
        </div>
      </div>
    </div>
  );
};

using card component

<Card />
<Card css={{ backgroundColor: "pink" }} />
<Card wrapperClassName="bg-gray-500 ml-10" />

rendered result

I made 2 options to add custom css styling

1. using css prop with classic inline styling....doesnt look good haha
2. using wrapperClassName prop for tailwind style styling. Looks better than no1 but doesnt look super fancy either.

Any good ideas?

[DonHuskini]

I use it two ways mainly.

I pass the className before my default classes so they have higher specificity and overrides default ones. Make sure to use the right typings so you'll get Tailwind hints when writing the classes if you're using the extension.

const Component: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
  return <div className={cn(props.className, "bg-red-500")}>test gabriel</div>;
};

<Component className="bg-yellow-400" />

Another option is to create lookup tables so you can keep inputs consistent. You can even use both together.

const BgColors = {
  green: "bg-green-400",
  red: "bg-red-400",
  yellow: "bg-yellow-400",
};

type Component2Props = {
  bgColor?: keyof typeof BgColors;
};

const Component2: FC<Component2Props> = ({ bgColor = "red" }) => {
  return <div className={BgColors[bgColor]}>test gabriel</div>;
};

<Component2 bgColor="green" />
<Component2 />

[simonswiss]

I love using lookup tables like you did here, personally. It limits the "choices" available for a consistent UI.

Re: your first example – the order in which the classes are defined doesn't impact specificity at all - it's the order in which they appear in the generated CSS files that does.

<div className="bg-red-500 bg-yellow-500">
<div className="bg-yellow-500 bg-red-500">

Both these will result in the same background color being applied (the one who is defined last in the CSS source order!

[DonHuskini]

Thanks for the correction. Appreciate it!