CODEWITHSUNDEEP
reactjsnext.jstailwind-css
Krish Patel
Krish Patel

Reputation: 30

TailwindCSS container query not working on dynamic addition

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;

Upvotes: 1

Views: 593

Answers (1)

Rico
Rico

Reputation: 2047

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.

Upvotes: 0

Related Questions