@landfolk/tx

Core utilities for the tx Tailwind styling system.

Install

pnpm add @landfolk/tx

Usage

import { expandClasses, transformer, checkConflicts } from '@landfolk/tx'

expandClasses('hover:(bg-red-500 text-white)')
// -> "hover:bg-red-500 hover:text-white"

transformer extracts tx="..." and tx\...`` content from files and expands grouped classes.

import { transformer } from '@landfolk/tx'

const classes = transformer('<div tx="sm:(p-4 text-xl)" />')
// -> "sm:p-4 sm:text-xl"

checkConflicts can warn on Tailwind class conflicts using tailwind-merge.

import { checkConflicts } from '@landfolk/tx'

checkConflicts('mt-2 mt-4')

Types

Add the tx prop to JSX types by importing:

import '@landfolk/tx/types'