Question:

Hi, I’m fairly new to frontend development, especially with React and JavaScript frameworks like Next.js and Tailwind CSS. I’ve started working on a couple of small projects to improve my understanding, one of which is a UI kit that includes components like buttons, alerts, dropdowns, and autocomplete fields.

One of the challenges I’ve been working on is implementing dynamic positioning for DropDownContent and AutoCompleteContent components. I wanted to pass a position prop to these components to control the absolute positioning of the content div (e.g., bottom-center, top-right, right-middle, etc.). Additionally, I wanted to incorporate conditional animation classes that control how the content opens and closes.

The functionality works, but I’m having trouble when trying to abstract the logic into a reusable function. Here’s an example of the function I created for dynamically assigning these classes:

export function getShowDynamicAbsolutePosition(
  position: AbsolutePositionProps,
  prefixShow: string,
): string {
  let result: string = prefixShow + "DynamicContentShow";

  if (position === "bottom-center" || position === "top-center") {
    result = prefixShow + "DynamicContentShowCenter";
  } else if (position === "left-middle" || position === "right-middle") {
    result = prefixShow + "DynamicContentShowMiddle";
  }

  return result;
}

For example, here’s how I’m using it in the AutoCompleteContent component:

function getAutoCompleteContentStyle(props: AutoCompleteContentProps): string {
  const radius: string = getRadius(props.radius);
  const shadow: string = getShadow(props.shadow);
  const bgColor: string = getColor(
    false,
    props.color,
    props.variant,
    props.blurProps,
  );
  const position: AbsolutePositionProps = props.position
    ? props.position
    : "bottom-center";
  const showDynamicPosition: string = getShowDynamicAbsolutePosition(
    position,
    "peer-[.focus]:",
  );
  const hideDynamicPosition: string = getHideDynamicAbsolutePosition(
    position,
    "peer-[.notfocus]:",
  );

  return (
    radius +
    " " +
    shadow +
    " " +
    bgColor +
    " " +
    showDynamicPosition +
    " " +
    hideDynamicPosition +
    " " +
    position
  );
}

The Issue:

When I manually include the showDynamicPosition value directly in the className, like this:

className={
  "h-fit absolute p-2 peer-[.focus]:DynamicContentShowCenter peer-[.notfocus]:DynamicContentHiddenCenter " +
  style +
  " " +
  props.className
}

Everything works perfectly. The Tailwind CSS classes are generated correctly, and the animations are applied as expected.

However, when the class value is coming from the getAutoCompleteContentStyle function, Tailwind doesn’t generate the necessary styles for those classes.

Browser Inspector Differences:

• When directly included in className:
  Tailwind generates the appropriate classes in the inspector:

  .peer.notfocus ~ .peer-[.notfocus]:DynamicContentHiddenCenter {
      visibility: hidden;
      animation: fadeOutToNoneCenter 0.2s ease-in-out;
  }
  
  .peer.focus ~ .peer-[.focus]:DynamicContentShowCenter {
      visibility: visible;
      animation: fadeInFromNoneCenter 0.2s ease-in-out;
  }
  

• When coming from the getAutoCompleteContentStyle function:
  The classes aren’t generated at all. Tailwind doesn’t apply any of the dynamic styles, even though the elements have the same class names when inspecting them in the browser.

Question:

Why does Tailwind fail to generate the necessary dynamic styles when applied via the getAutoCompleteContentStyle function? How can I fix this so that Tailwind generates the classes correctly when they are applied through a function like this?

tailwind.config.js:

my tailwind config maybe needed so :

import type { Config } from "tailwindcss";

const config: Config = {
mode: "jit",
darkMode: "selector",
content: [
  "./app/**/*.{js,ts,jsx,tsx,mdx}",
  "./pages/**/*.{js,ts,jsx,tsx,mdx}",
  "./components/**/*.{js,ts,jsx,tsx,mdx}",
  "./future-ui/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
  extend: {
    colors: {...},
  },
},
plugins: [],
};

export default config;

Any help or insights would be greatly appreciated! Thanks!

Initially, I thought the issue might be related to the timing of when Tailwind’s Just-in-Time (JIT) mode compiles the styles. I suspected that the className was being applied too late for Tailwind to detect and compile the necessary styles. To resolve this, I attempted to optimize the code execution, ensuring that the className was assigned faster or in sync with Tailwind’s compilation process. However, these efforts didn’t seem to have any effect, and the issue persisted.