TailwindCSS container query not working on dynamic addition

Question

I am trying to convert my tailwind css queries to container queries where it will take the string of className modify it and place that modified version back. The issue I am having is that this is not being set to the component. The other styles are working perfectly only the container queries are not working properly. Am I missing something?

I am aware of the dynamic updation issue of tailwind css. Any approach to achieve what I want?

INPUT : " 4xl:bg-black flex min-h-[40rem] w-full flex-col items-center justify-center sm:bg-green-600 md:flex-row "

This is extracted from the css of a component

OUTPUT : " @4xl:bg-black flex min-h-[40rem] w-full flex-col items-center justify-center @sm:bg-green-600 @md:flex-row "

useEffect(()=>{
    handleStyling()
},[element])
  const handleStyling = () => {
    const tempStyle = element.styles.reduce((acc, style) => {
      return acc + " " + style;
    }, "");
    const queryList: Array<ContainerQueryLabels> = [
      "sm",
      "md",
      "lg",
      "xl",
      "2xl",
      "3xl",
      "4xl",
      "5xl",
      "6xl",
      "7xl",
    ];
    var modifiedTempStyle = tempStyle;

    queryList.map((item) => {
      modifiedTempStyle = transformToContainerQueries(modifiedTempStyle, item);
      return modifiedTempStyle;
    });
    console.log(modifiedTempStyle);

    setStyling(modifiedTempStyle);
  };

    function transformToContainerQueries(
    inputString: string,
    queryFind: ContainerQueryLabels,
  ) {
    const regEx: Record<ContainerQueryLabels, RegExp> = {
      sm: /sm:/g,
      md: /md:/g,
      lg: /lg:/g,
      xl: /\bxl:/g,
      "2xl": /\b2xl:/g,
      "3xl": /\b3xl:/g,
      "4xl": /\b4xl:/g,
      "5xl": /\b5xl:/g,
      "6xl": /\b6xl:/g,
      "7xl": /\b7xl:/g,
    };
    if (inputString.includes(queryFind)) {
      // If "@md:" is present in the string, replace it with "md:"

      let reversedString = inputString.replace(
        regEx[queryFind],
        `@${queryFind}:`,
      );
      return reversedString;
    } else {
      // If "@md:" is not present, return the original string
      return inputString;
    }
  }

  return(
<div
className={`${styling}`}
{...rest}
id={element.id}
onMouseEnter={() => {
  handleHover(true);
}}
onMouseLeave={() => {
  handleHover(false);
}}
onClick={(e: React.MouseEvent) => {
  handleElementSelection(e);
}}
>
{textValue}
</div>
)

I have the config set properly.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/package/**/*.{js,ts,jsx,tsx,mdx}",
    // REMOVE THIS LATER
    "./src/context/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
        //...
      containers: {
        sm: "420px",
        md: "650px",
        lg: "800px",
      },
    },
    screens: {
      lg: "1000px",
      md: "800px",
      sm: "400px",
    },
  },
  plugins: [require("@tailwindcss/container-queries")],
  safelist: [
    {
      pattern:
        /(bg|text|border|ring)-(aui_primary|aui_text|aui_text_secondary|aui_accent|aui_accent_hover|aui_text_accent|aui_accent_secondary|aui_border)/,
      variants: ["hover", "focus", "@sm", "@lg", "@md"],
    },
  ],
};
export default config;

Rico · Accepted Answer · 2024-02-28 16:02:59Z

0

Just to reiterate,

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

However, there is an official plugin for container queries for Tailwind that you can use. The syntax is very similar to what you've written. From their docs:

<div class="@container">
  <div class="@lg:underline">
    <!-- This text will be underlined when the container is larger than `32rem` -->
  </div>
</div>

Keep in mind, this won't allow you to create dynamic class names. You'll have to update the classes you want to have container queries manually.

answered Feb 28, 2024 at 16:02

Rico

2,3522 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TailwindCSS container query not working on dynamic addition

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related