Tailwind_formatter screenshot

Tailwind_formatter

Author Avatar Theme by 100phlecs
Updated: 12 Jan 2025
123 Stars

Sorts tailwind classes within elixir projects

Overview:

TailwindFormatter is a mix format plugin designed to sort TailwindCSS classes used in HEEx templates and ~H sigils. This tool, inspired by Tailwind’s official Prettier plugin, enhances code organization by following a set of rules while formatting TailwindCSS classes. The formatter requires Elixir v1.15 or later to function properly.

Features:

  • Opinionated Sorting: TailwindFormatter sorts classes based on specific rules, enhancing code readability.
  • Installation Assistance: Provides clear guidelines for adding TailwindFormatter to Elixir projects.
  • Custom TailwindCSS Configuration Support: Allows appending custom TailwindCSS configurations for tailored formatting.
  • Usage Convenience: Performing automatic formatting of Tailwind classes by simply running mix format.
  • Divergence from Original Formatter: Highlights differences in sorting algorithm from the original Tailwind Prettier plugin for Elixir use cases.

Installation:

To install TailwindFormatter, follow these steps:

  1. Add tailwind_formatter to the list of dependencies in mix.exs.
  2. Update the .formatter.exs file to include TailwindFormatter configuration.
  3. Customize TailwindCSS configuration if using the standalone tailwind module.
  4. Run mix tailwind default and mix compile to enable TailwindFormatter for organizing custom classes.
  5. After setup, simply run mix format for automatic sorting of TailwindCSS classes.

Summary:

TailwindFormatter is an efficient tool that simplifies and enhances the formatting of TailwindCSS classes in Elixir projects. By following a set of rules inspired by the original Tailwind Prettier plugin, this formatter improves code organization and readability. Its compatibility with Elixir v1.15 or later and support for custom configurations make it a valuable asset for developers working with TailwindCSS in their projects.