Cannot apply unknown utility class: md:min-w-0 in NodeJS API call

[joe223]

What version of Tailwind CSS are you using?

v4.0.11

What version of Node.js are you using?

v18.18.2

What operating system are you using?

macOS

Describe your issue

    test('string class', async () => {
        expect(
            await compileCss(css`
                @tailwind utilities;

                .root {
                    @apply flex md:min-w-0 flex-row flex-wrap;
                }
            `)
        ).toEqual(css`".root {
            display: flex;
            min-width: 0px;
            flex-direction: row;
            flex-wrap: wrap;
        }"`)
    })

[RobinMalfait]

Hey!

This is because the min-w-0 relies on the --spacing theme value to be available but you didn't include any theme variables.

You can add:

  @tailwind utilities;

+ @theme {
+   --spacing: 0.25rem;
+ }

That said, note that the compileCss function is considered private/internal and there are not semver guarantees to keep them working in the same way.

What is your use case for calling these directly?

[joe223]

Hi @RobinMalfait , really appreciate!

I'v wrote a css file:

/* src/index.css */
.root {
	@apply relative flex-shrink-0 flex-grow-0;
}

and trying to transform it to regular css which can be used in browser directly, then I checked tailwindcss source code, found compile function in test case

tailwindcss/packages/tailwindcss/src/index.test.ts

Lines 58 to 82 in d0a9746

	test('that only CSS variables are allowed', () => {
	return expect(
	compileCss(
	css`
	@theme {
	--color-primary: red;
	.foo {
	--color-primary: blue;
	}
	}
	@tailwind utilities;
	`,
	['bg-primary'],
	),
	).rejects.toThrowErrorMatchingInlineSnapshot(`
	[Error: \`@theme\` blocks must only contain custom properties or \`@keyframes\`.
	@theme {
	> .foo {
	> --color-primary: blue;
	> }
	}
	]
	`)
	})

tailwindcss/packages/tailwindcss/src/test-utils/run.ts

Lines 4 to 11 in d0a9746

	export async function compileCss(
	css: string,
	candidates: string[] = [],
	options: Parameters<typeof compile>[1] = {},
	) {
	let { build } = await compile(css, options)
	return optimizeCss(build(candidates)).trim()
	}

So, here is my consulting question:
How can I turn src/index.css to regular css with NodeJS API via tailwindcss? 🙏

[adamwathan]

Also need to make sure you define an md breakpoint:

  @tailwind utilities;

+ @theme {
+   --spacing: 0.25rem;
+   --breakpoint-md: 48rem;
+ }

[joe223]

Also need to make sure you define an md breakpoint:

  @tailwind utilities;

+ @theme {
+   --spacing: 0.25rem;
+   --breakpoint-md: 48rem;
+ }

🙏 @adamwathan. Seem that we have to define the basic tokens in @theme {. Do we have default theme in tailwind? For example:

+ @tailwind theme;
   @tailwind utilities;

[joe223]

Oh, I should using import { compile } from '@tailwindcss/node' rather than import { compile } from 'tailwindcss