landfolk/tx

Overview

This skill provides practical guidance for using @landfolk/tx styling in React and Next.js projects. It covers the tx prop and tagged templates, the grouping syntax, the compile-time SWC transform, the Tailwind transformer, and the ESLint rule for class validation and sorting. The goal is predictable, linted, and JIT-friendly Tailwind output at build time.

How this skill works

The SWC plugin rewrites tx props and tagged tx templates into className strings during compilation, optionally wrapping them with a dev-only conflict checker. A Tailwind transformer expands grouped syntax (like hover:(...)) so the JIT extractor sees every generated utility. The ESLint rule inspects tx usage, expands groups, sorts classes to Tailwind order, and optionally validates names against your Tailwind config.

When to use it

• When editing components that accept a tx prop or use tx`` tagged templates
• When integrating @landfolk/tx into a new or existing React/Next.js app
• When you need compile-time expansion of grouped Tailwind classes for JIT extraction
• When you want automated sorting and validation of Tailwind classes via ESLint
• When troubleshooting class grouping, nesting, or runtime conflicts in dev

Best practices

• Prefer tx over className; let the SWC transform produce className at compile time
• Use arrays for conditional styles instead of string concatenation to keep transformations predictable
• Use grouping syntax (e.g., hover:(bg-blue-500 text-white)) and nest groups when needed
• Do not forward tx props through components; forward className only and merge className into tx for styleable components
• Register the dev conflict checker once in development with import '@landfolk/tx/checkConflicts' if you want runtime conflict warnings

Example use cases

• Convert component library props from className to tx for consistent compile-time optimization
• Use tx`` tagged templates to compute classes with JS values while keeping Tailwind JIT extraction intact
• Apply conditional styles with arrays: tx={[isActive && 'bg-blue-500', 'text-sm']} to produce clean class lists
• Run the ESLint rule in CI to ensure all Tailwind classes are sorted, normalized, and optionally validated
• Enable the Tailwind transformer in your build to expand grouped classes so JIT generates all necessary utilities