Tailwind class works when passed as prop but doesn't when applied directly

Question

I have this component:

export const TextInput = ({
  label,
  wrapperClassName = "",
  inputClassName = "",
  labelClassName = "",
  placeholder = "",
  ...props
}: InputProps & FieldHookConfig<string>) => {
  const [field, meta] = useField(props);

  return (
    <div className={wrapperClassName}>
      <label
        className={`block mb-2 text-lg font-medium text-dark ${labelClassName}`}
        htmlFor={props.id || props.name}
      >
        {label}
      </label>
      <input
        className={`bg-gray-50 border border-primary text-secondary text-md rounded-lg
        focus:ring-primary p-2 ${inputClassName}`}
        placeholder={placeholder}
        {...field}
      />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </div>
  );
};

Now focus only on the classNames of the tag. When I apply the text-dark className it doesn't work for some reason and it doesn't appear at all in my devtools styles tab. If i pass the text-dark className via the labelClassName prop it works perfectly fine. Can you spot the flaw?

This is my tailwind config file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      screens: {
        sm: "480px",
        md: "768px",
        lg: "976px",
        xl: "1440px",
      },
      colors: {
        primary: "#FF0000",
        secondary: "#414141",
        dark: "#252525",
        light: "#F9F5EB",
        orange: "#AF0404",
      },
  },
  plugins: [],
};

A funny and weird thing is that the text-secondary specifically works in both cases but no other class (even the default tailwind ones) don't work.

Thank you in advance.

Answer 1

Ensure that the file that the component is in is covered by the content file globs. The symptoms you describe sound like Tailwind is not scanning the file and thus it does not "see" the class names and thus does not generate the CSS rules that you expect.