I am importing tailwind class string from utils to index page in app folder but it is not working. Using directly as classnames in app folder works

utils/responsiveBox

const responsiveBoxClass = "border-2 border-[red] xxsmScr:border-tahitiii xsmScr:border-[blue] smScr:border-[green] midScr:border-[orange] bigScr:border-[white] biggerScr:border-[brown] biggestScr:border-[grey]";
export default responsiveBoxClass;

app/page.tsx

import { AvatarContainer } from "@/components/home/avatarContainer";
import { RenderBox } from "@/components/home/renderBox";
import responsiveBoxClass from "@/utils/responsiveBox";

export default function Home() {
  return (
    <div className="w-screen h-[300vh]" style={{ backgroundImage: `url("/home/gvHomeBg.svg")`, backgroundSize: 'cover', backgroundRepeat: 'no-repeat' }}>
      <div className="flex justify-center items-start w-screen">
        <RenderBox className={`bg-primary ${responsiveBoxClass} my-[40px] h-[800px]`}>
          <AvatarContainer />
        </RenderBox>
      </div>

    </div>
  );
}

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}"
  ],
  theme: {
    screens: {
      'xxsmScr': "360px",
      // => @media (min-width: 360px and max-width: 449px) { ... }
      'xsmScr': "450px",
      // => @media (min-width: 450px and max-width: 639px) { ... }
      'smScr': "640px",
      // => @media (min-width: 640px and max-width: 767px) { ... }

      'midScr': "768px",
      // => @media (min-width: 768px and max-width: 1023px) { ... }

      'bigScr': "1024px",
      // => @media (min-width: 1024px and max-width: 1279px) { ... }

      'biggerScr': "1280px",
      // => @media (min-width: 1280px and max-width: 1535px) { ... }

      'biggestScr': "1536px",
      // => @media (min-width: 1536px) { ... }
    },
    extend: {
      backgroundImage: {
        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
        "gradient-conic":
          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
      },
      colors: {
        primary: {
          foreground: "white",
          DEFAULT: "black",
        },
        tahitiii: {
          foreground: "#FF5733",
          DEFAULT: "#20575A",
        }
      }
    },
  },
  plugins: [],
};

export default config;

I am expecting the string className from utils to work when I wrap it under className of html elements in app component file but it is not working.But using the tailwind class name string directly in the class Name of the html element works. Why cannot I use the class names string as imported asset in template literals?

Tailwind generates CSS rules for class names it "sees". It only looks in files that match the content file globs. It does not execute any code, and is not aware of imports. It sees all files as plain text files, think of it like if they all had the .txt extension.

So, to get it working, we'd add the utils/responsiveBox file to your content file globs, so that Tailwind scans this file for the class name it contains:

/** @type {import('tailwindcss').Config} */
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}"
    "utils/responsiveBox",
  ],

Also, in case you mislabelled the file name and it has some sort of file extension – like .ts – you'd want to include that too like:

/** @type {import('tailwindcss').Config} */
import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}"
    "utils/responsiveBox.ts",
  ],