Arbitrary values in react component does not render the class name in the output CSS

[peterpalkovic]

Hi @barvian,

Thank you for this plugin, great work!

Everything works but I'm having an issue with arbitrary values in a Next.js 14 app and also in a Storybook 8 React project.

"fluid-tailwind": "^0.1.6",
"tailwindcss": "^3.4.3"

Inside react component the following does not render the class name in the output CSS:

<div className="~p-[4rem]/[8rem]">Hello</div>

or

<div className="~min-[20rem]/lg:~text-base/4xl">Hello</div>

However, when used in a CSS file with @apply, it works as expected:

input

<div className="test">Hello</div>

.test {
	@apply ~p-[2rem]/[8rem];
}

output

.test {
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113/ var(--tw-bg-opacity));
  padding: clamp(2rem, -2.29rem + 10.71vw, 8rem);
}

Do you have any idea what the problem could be?

Thank you.

[barvian]

Hey @peterpalkovic, thanks for filing. I'm not able to reproduce with this similar setup but the fact that it's working with @apply makes it sound like it could be related to the extractor. Could you post the content option from your Tailwind config?

[peterpalkovic]

Sure. Here it is:

import type { Config } from "tailwindcss";
import {
	fluidExtractor,
	fluidCorePlugins,
	defaultThemeScreensInRems,
	defaultThemeFontSizeInRems,
} from "fluid-tailwind";

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}",
	],
	extract: fluidExtractor(),
	theme: {
		fontSize: defaultThemeFontSizeInRems,
		screens: defaultThemeScreensInRems,
		extend: {},
	},
	plugins: [require("tailwindcss-react-aria-components"), fluidCorePlugins],
};
export default config;

[peterpalkovic]

I got it! I have an error in my config.
After the change:

import type { Config } from "tailwindcss";
import {
	fluidExtractor,
	fluidCorePlugins,
	defaultThemeScreensInRems,
	defaultThemeFontSizeInRems,
} from "fluid-tailwind";

const config: Config = {
	content: {
		files: [
			"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
			"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
			"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
		],
		extract: fluidExtractor(),
	},
	theme: {
		fontSize: defaultThemeFontSizeInRems,
		screens: defaultThemeScreensInRems,
		extend: {},
	},
	plugins: [require("tailwindcss-react-aria-components"), fluidCorePlugins],
};
export default config;

It works!
You can close this issue.
Thank you a lot.

[barvian]

No problem! I'm going to update the docs to draw more attention to these changes.