@revealui/biome-tailwindcss

Biome-compatible Tailwind CSS class sorting tool. Automatically sorts and organizes Tailwind CSS classes in your codebase to match Biome's formatting preferences.

Installation

npm install @revealui/biome-tailwindcss
# or
pnpm add @revealui/biome-tailwindcss
# or
yarn add @revealui/biome-tailwindcss

Usage

CLI

npx biome-tailwindcss [options] [files...]

Options:

• --write: Write changes to files (default: dry run)
• --check: Check if files need formatting (exit code 1 if changes needed)
• --help: Show help message

Examples:

# Format all TypeScript/TSX files in current directory
npx biome-tailwindcss --write "**/*.{ts,tsx}"

# Check specific files
npx biome-tailwindcss --check src/components/*.tsx

# Format specific files
npx biome-tailwindcss --write src/components/Button.tsx

Programmatic API

import { sortTailwindClasses } from '@revealui/biome-tailwindcss';

const sorted = sortTailwindClasses('flex items-center justify-between p-4');
// Returns: 'flex items-center justify-between p-4' (sorted)

Features

• ✅ Biome Compatible: Works seamlessly with Biome formatter
• ✅ Tailwind CSS Sorting: Sorts classes according to Tailwind best practices
• ✅ TypeScript/TSX Support: Handles TypeScript and JSX files
• ✅ CLI Tool: Easy to use from command line
• ✅ Programmatic API: Use in your own tools

Integration with Biome

This tool is designed to work alongside Biome. Use it to sort Tailwind classes before or after Biome formatting:

// package.json
{
  "scripts": {
    "format": "biome format --write . && biome-tailwindcss --write \"**/*.{ts,tsx}\""
  }
}

License

MIT

Repository

https://github.com/RevealUIStudio/reveal

Support

For issues and questions, please open an issue on GitHub: https://github.com/RevealUIStudio/reveal/issues