# tailwindlabs/prettier-plugin-tailwindcss

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/tailwindlabs-prettier-plugin-tailwindcss).**

7,010 stars · 174 forks · TypeScript · mit

## Links

- GitHub: https://github.com/tailwindlabs/prettier-plugin-tailwindcss
- awesome-repositories: https://awesome-repositories.com/repository/tailwindlabs-prettier-plugin-tailwindcss.md

## Description

This project is a Prettier plugin and Tailwind CSS class sorter that automatically organizes utility classes into a consistent and recommended order. It functions as a frontend styling formatter and CSS utility organizer, removing duplicate classes and sorting style attributes across HTML and JavaScript files.

The tool ensures consistent markup formatting by ordering utility classes within HTML attributes, template literals, JavaScript expressions, and custom framework props. It integrates with Tailwind CSS configuration files and stylesheets to synchronize sorting behavior with custom theme definitions and design tokens.

The system handles class list cleanup to remove unnecessary whitespace and provides a programmable interface for exposing sorting logic to external tools.

## Tags

### Development Tools & Productivity

- [Markup Class Sorters](https://awesome-repositories.com/f/development-tools-productivity/markup-class-sorters.md) — Sorts classes in HTML attributes according to a consistent order to improve maintainability. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/README.md))
- [Prettier Plugins](https://awesome-repositories.com/f/development-tools-productivity/prettier-plugins.md) — Functions as a Prettier plugin to apply automated class sorting and cleanup during the document printing phase.
- [Style Formatters](https://awesome-repositories.com/f/development-tools-productivity/ast-transformation-tools/ast-to-source-conversion/source-code-rewriting/style-formatters.md) — Automatically rewrites utility class sequences in source code to adhere to a consistent visual and structural style.
- [Build Pipeline Plugins](https://awesome-repositories.com/f/development-tools-productivity/build-pipeline-plugins.md) — Hooks into the Prettier formatting lifecycle to transform class strings during the print phase.
- [CSS Class Organizers](https://awesome-repositories.com/f/development-tools-productivity/css-class-organizers.md) — Provides automated sorting and deduplication of CSS utility classes to ensure consistent markup formatting.
- [Class List Sanitizers](https://awesome-repositories.com/f/development-tools-productivity/class-list-sanitizers.md) — Removes duplicate classes and unnecessary whitespace from strings to maintain tidy HTML output. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme))
- [Frontend Workflow Accelerators](https://awesome-repositories.com/f/development-tools-productivity/frontend-workflow-accelerators.md) — Reduces manual effort in managing long lists of utility classes by automating their organization.

### User Interface & Experience

- [Attribute Class Sorting](https://awesome-repositories.com/f/user-interface-experience/component-props-management/prop-transformations/prop-sorting/attribute-class-sorting.md) — Reorders utility classes found within non-standard attributes or framework props. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme))
- [Class Sorters](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/class-sorters.md) — Automatically organizes Tailwind CSS utility classes into a recommended order across HTML and JavaScript files.
- [Configuration Synchronization](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/configuration-synchronization.md) — Reads custom theme and utility settings from Tailwind configuration files to ensure correct sorting. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme))
- [Template Literal Class Sorters](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes/template-literal-class-sorters.md) — Orders utility classes inside function calls or template literals. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/README.md))
- [Utility Class Sorters](https://awesome-repositories.com/f/user-interface-experience/css-utility-classes/utility-class-sorters.md) — Organizes Tailwind CSS utility classes in markup and style files based on a recommended order. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme))
- [Expression Class Sorting](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/class-based-styling/css-class-based-styling/class-merging/expression-class-sorting.md) — Reorders utility classes located within JavaScript expressions or class-merging functions. ([source](https://github.com/tailwindlabs/prettier-plugin-tailwindcss#readme))
- [Tailwind Class Organizers](https://awesome-repositories.com/f/user-interface-experience/tailwind-class-organizers.md) — Automatically sorts Tailwind CSS utility classes in HTML and framework files to maintain a predictable order.
- [Theme Customization](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/design-utilities/design-systems/theme-architecture-frameworks/theme-customization.md) — Orders utility classes based on custom design tokens and theme values defined in the configuration.
- [Markup Formatting Standards](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/accessible-content-structuring/semantic-markup-standards/markup-formatting-standards.md) — Ensures a consistent sequence of CSS classes across a project to improve readability and code reviews.

### Web Development

- [Utility Class Priority Mapping](https://awesome-repositories.com/f/web-development/modular-architectures/css-style-modules/class-mapping/utility-class-priority-mapping.md) — Reads theme files to create weighted priority lists for sorting both standard and custom utility classes.

### Software Engineering & Architecture

- [Pure Functional Logic Implementations](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/design-patterns/functional-design-patterns/pure-functional-logic-implementations.md) — Implements sorting logic as pure functions to ensure deterministic results across different execution environments.
- [AST Traversal Engines](https://awesome-repositories.com/f/software-engineering-architecture/ast-traversal-engines.md) — Implements a traversal engine to walk the abstract syntax tree and identify strings containing utility classes.
- [Regular Expression-Based Parsing](https://awesome-repositories.com/f/software-engineering-architecture/regular-expression-based-parsing.md) — Uses regular expressions to extract individual utility classes from complex template literals and attributes.

### Part of an Awesome List

- [Development Tools](https://awesome-repositories.com/f/awesome-lists/devtools/development-tools.md) — Official plugin for automatic class sorting in Prettier.