className additions to components not always successful

[adamscarberry]

Example:

<Table dense grid>
      <TableHead>
        <TableRow>
          <TableHeader colSpan={3}></TableHeader>
          <TableHeader
            colspan={3}
            className="text-center bg-gray-100"
          >
            Change in Stage
          </TableHeader>
          <TableHeader>NWS Flood Stage</TableHeader>
        </TableRow>
        <TableRow>
          <TableHeader className="font-bold">Location</TableHeader>
          <TableHeader>Timestamp</TableHeader>
          <TableHeader>Value</TableHeader>
          <TableHeader>1 hr</TableHeader>
          <TableHeader>6 hr</TableHeader>
          <TableHeader>24 hr</TableHeader>
        </TableRow>
      </TableHead>

produces the following:

Expectation was that "Change in Stage" would have a darker background and the Location table header should have been bold.

Should we implement both clsx and twMerge as mentioned here: https://stackoverflow.com/questions/69390216/how-to-properly-join-tailwind-css-classes-using-clsx

Or I have had luck only using the clsx method, but just putting the className prop in the function last:

className={clsx('default-styles-here`, className)}

@willbreitkreutz

[willbreitkreutz]

@adamscarberry you are correct, to monkeypatch the classes, className needs to come last. I copied much of the table code from the taiwind catalyst and it kind of looks like they weren't wanting or expecting you to override their styles, but i agree we need that. We'll probably want to go through at some point and make sure we have the className override in all the components.

[willbreitkreutz]

@adamscarberry give the PR a review, it should do what we need.

[adamscarberry]

@willbreitkreutz This appears to allow the table components to set classNames correctly. Thanks!