skills.rest
landfolk
landfolkOFFICIAL
Explore all skills by this author →
WebsiteGitHub

tx-styling

Automate Tailwind class usage in React/Next.js components with tx grouping syntax.

2|Updated Jan 23, 2026
Search Tags:#linting#React#Next.js#Tailwind#grouping#tx
One-click install
npx skills add https://github.com/landfolk/tx --skill tx-styling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tx-styling
Source: https://github.com/landfolk/tx/tree/main/skills
Command: npx skills add https://github.com/landfolk/tx --skill tx-styling

SYSTEM DOCUMENTATION & REQUIREMENTS

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)" />.

Frequently Asked Questions about tx-styling

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I group Tailwind classes in React components to keep className strings clean?▼

Group Tailwind classes in React components by using the tx prop with grouping syntax like hover:(bg-blue-500 text-white) to replace verbose className strings with clean, deterministic utility outputs.

What is the tx prop in Next.js and how does it transform Tailwind utilities?▼

The tx prop in Next.js is a syntax that leverages an SWC plugin to rewrite grouped Tailwind utilities into standard className strings at compile-time, ensuring deterministic styling output during the build process.

How do I set up Tailwind class linting and validation in a Next.js project?▼

Set up Tailwind class linting and validation by installing the @landfolk/tx packages, configuring the Next.js SWC plugin, and enabling ESLint rules to ensure proper grouping and config-validated classes.

Can I use the tx styling workflow with conditional styles in React components?▼

Yes, the tx styling workflow supports conditional styles in React components by standardizing Tailwind class usage through grouped utilities, streamlining styling for dashboards and marketing pages.

Do I need a Tailwind config integration to use the tx prop for class extraction?▼

Yes, you need Tailwind config integration for reliable class extraction, alongside installing @landfolk/tx packages and configuring the Next.js SWC plugin to ensure compile-time transformation works correctly.

Related Skills

Explore More Software Engineering Skills→
shaharKeisarAppsshaharKeisarApps

gradle-expert

Configure Gradle Kotlin DSL for Kotlin Multiplatform projects with version catalogs.

Community
Advanced
avvaleavvale

tailwind-4

Standardize Tailwind CSS 4 class usage in React and Vue components.

Official
Intermediate
Veloxia-agencyVeloxia-agency

ckm:ui-styling

Create accessible React interfaces with shadcn/ui and Tailwind CSS.

Community
Advanced
giruclawbotgiruclawbot

tailwind-4

Codify Tailwind CSS className usage with cn() and semantic classes.

Community
Intermediate