Custom Extractor

[jamesarosen]

The README says

TODO
Create custom PurgeCSS Extractor to optimize for production
Will require a custom PurgeCSS extractor / function

This issue is intended as a place to discuss that work.

[jamesarosen]

Tailwind no longer uses PurgeCSS itself, but it does support custom extraction logic.

This works conceptually:

function transformChakraProps(content) {
  return content.replace(/\btextAlign="([^"]+)"/, `chakra-textAlign="tw-text-$1"`);
}

// tailwind.config.js
{
  content: {
    files: […],
    transform: {
      jsx: transformChakraProps,
      tsx: transformChakraProps,
    }
  }
}

It works by converting Chakra-style textAlign="start" to Tailwind-compatible chakra-textAlign="start". The latter has no meaning in the actual React components; it's just there to teach Tailwind about the class.

Limitations:

• it only supports textAlign
• it only supports string literal inputs, not <Box textAlign={{ base: "left", md: "center" }}>
• it isn't typesafe