tobiaspickel

This gist may be your full solution or just the starting point for making your Tailwind v4 projects backwards compatible.

Convert @property rules into good old CSS vars
Pre-compute oklab() functions
Pre-compute color-mix() functions (+ replace CSS vars inside them beforehand)
Remove advanced instructions (colorspace) from gradients
Provide support for nested CSS (used by dark mode or custom variants with &)
Transform translate, scale, rotate properties to their transform: ... notation
Add whitespace to var fallbacks var(--var,) > var(--var, ) to help older browsers understand

	// While using [this solution](https://github.com/testing-library/react-testing-library/issues/1209#issuecomment-2400054404),
	// I encountered a timeout issue caused by API calls in my components. Each component was waiting for its
	// API call to complete before rendering, which led to delays and affected the flow to subsequent components.
	// To resolve this, I refactored the logic so that the API calls are initiated in parallel.
	// Then, the function waits for all components to finish rendering.


	import { render } from "@testing-library/react";
	import React, {
	Children,