Will using tx-styling break Tailwind's JIT mode?

No, it includes a Tailwind transformer that expands the grouped syntax so the JIT engine can see and generate every necessary utility class.

Is this compatible with the Next.js SWC compiler?

Yes, it specifically utilizes an SWC plugin to rewrite tx attributes into standard classNames during the build process, making it highly compatible with modern Next.js setups.

Does it support class name validation?

Yes, through the integrated ESLint rule, it can validate class names against your Tailwind configuration and ensure they are sorted in a stable, predictable order.

How does it handle conditional styling?

The skill recommends using arrays for conditional styles within the tx prop, which avoids the messy string concatenation often found in standard Tailwind implementations.

What is the primary advantage of the tx prop?

The tx prop allows for grouping syntax, such as 'hover:(bg-blue-500 text-white)', which makes complex Tailwind configurations much more readable and maintainable.

Tx Styling for Tailwind

Name: Tx Styling for Tailwind
Author: landfolk

bylandfolk

•

Design Tools

Streamlines Tailwind CSS workflows in React and Next.js by enabling compile-time class grouping and automated linting via the tx prop.

The Tx Styling skill provides expert guidance for implementing the @landfolk/tx library, which optimizes how developers write Tailwind CSS in React and Next.js applications. It focuses on using the specialized tx prop to enable powerful grouping syntax—such as nesting variants—which is then transformed into standard class strings at compile-time via SWC. By integrating ESLint rules for class sorting and validation, this skill helps maintain a clean, performant, and consistent design system while ensuring full compatibility with Tailwind's JIT engine.

Key Features

01Support for conditional styling using clean array structures instead of string concatenation

02Automated class sorting and normalization via specialized ESLint rules

03SWC-based compile-time transformation of tx props into standard classNames

042 GitHub stars

05Advanced grouping syntax for nesting Tailwind variants like hover and focus

06JIT-friendly extraction ensuring all grouped classes are correctly detected by Tailwind

Use Cases

01Refactoring legacy className strings into maintainable, grouped tx attributes

02Organizing complex Tailwind variant groups in large-scale React or Next.js components

03Implementing automated design consistency through class validation and stable sorting

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add landfolk/tx skills

For use in Claude.ai and ChatGPT

Download Skill