Mapped responsive classes not working

[rnwathon]

What version of Tailwind CSS are you using?
v3.3.0

What build tool (or framework if it abstracts the build tool) are you using?
NextJS 14.0.4

What version of Node.js are you using?
v18.19

What browser are you using?
Chrome

What operating system are you using?
MacOS Ventura

---

Hi, I'm trying to make a utility function to turn responsive props into tailwind classes, but the responsive class doesn't work.

Here is the utility function

import { WithResponsiveType } from "../types/Responsive.type";

// into tailwind responsive prefix
const withBreakpoints = (
  value: WithResponsiveType<string>, // value to check
  valueMap: Record<string, string>, // An object to map props values to a different tailwind classes
) => {
  const classes: string[] = [];

  if (value === "") return "";

  if (typeof value === "object") {
    for (const [bp, val] of Object.entries(value)) {
      const className = bp === "initial" ? `${valueMap[val]}` : `${bp}:${valueMap[val]}`;
      classes.push(className);
    }
  }

  if (typeof value === "string") {
    const className = `${valueMap[value]}`;
    classes.push(className);
  }

  return classes.join(" ");
};

export default withBreakpoints;

Here is the mapValue:

export const FLEX_DIRECTION = {
  row: "flex-row",
  "row-reverse": "flex-row-reverse",
  col: "flex-col",
  "col-reverse": "flex-col-reverse",
};

Here is my component

const Flex = React.forwardRef<FlexElement, FlexProps>((props, ref) => {
  const { children, className, direction = "", ...rest } = props;
  const flex = ["flex", withBreakpoints(direction, FLEX_DIRECTION)];

  return (
    <div ref={ref} className={cnx(flex, className)} {...rest}>
      {children}
    </div>
  );
});

Here is the usage of the component with responsive props:

 <Flex direction={{ initial: "row", md: "col" }}>
    <div className="w-10 h-10 bg-red-800"></div>
    <div className="w-10 h-10 bg-red-800 md:bg-blue-800"></div>
    <div className="w-10 h-10 bg-red-800"></div>
  </Flex>

Basically it just turns '{ initial: "row", md: "col" }' into 'flex-row md:flex-col'.
the intital works, but not the md. Is there something that I'm doing wrong?

[wongjn]

As per the documentation:

The most important implication of how Tailwind extracts class names is that it will only find classes that exist as complete unbroken strings in your source files.

If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS:

Don’t construct class names dynamically

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

In the example above, the strings text-red-600 and text-green-600 do not exist, so Tailwind will not generate those classes.
Instead, make sure any class names you’re using exist in full:

Always use complete class names

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

Thus, the way you're trying to construct the class names fundamentally clashes with how Tailwind looks for class names. A work-around is to add the classes you'd like to generate to the safelist in the Tailwind configuration.

Furthermore, the initial value "works" because the default value for flex-direction is row which is the same as the declaration applied by flex-row anyway.