Skills
.Work. You
Rest

tx-styling

Official

Streamline Tailwind with tx in React/Next.js.

Software Engineering#linting#React#Next.js#Tailwind#grouping#tx
Authorlandfolk
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides guidance for using the @landfolk/tx styling workflow to replace verbose className strings with grouped, deterministic Tailwind utilities in React/Next.js projects.

Core Features & Use Cases

  • Grouping syntax: write hover:(bg-blue-500 text-white) and similar patterns to produce clean className output.
  • Compile-time transformation: SWC plugin rewrites tx props to className during build.
  • Linting & validation: ESLint rules ensure proper grouping and config-validated classes.
  • Use Case: streamline component styling for dashboards and marketing pages with consistent Tailwind usage.

Quick Start

Install the tx tooling packages, configure Next.js SWC plugin, and enable the Tailwind transformer and linting rules. Then begin using tx in components, for example: <div tx="hover:(bg-blue-500 text-white)" />.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: tx-styling
Download link: https://github.com/landfolk/tx/archive/main.zip#tx-styling

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.