prettier-plugin-tailwind-multiline weekly downloads statistics

prettier-plugin-tailwind-multiline

A Prettier plugin that automatically formats Tailwind classes into multiple lines to improve code readability.

Features

• Automatically splits Tailwind classes into multiple lines when there are more than X classes (configurable) • Maintains all Prettier existing functionality • Compatible with React (JSX/TSX), Vue, Angular, and other frameworks • Compatible with HTML files • Compatible with Vue and Svelte components • Easy to install and configure • Zero additional dependencies • Better code readability and maintainability

Installation

or

Usage in your project

1. Automatic installation

Once installed, Prettier will automatically detect and use this plugin. No additional configuration is required if you already have Prettier set up in your project.

2. Configuration in different environments

In projects with a Prettier configuration file

If you have a .prettierrc, .prettierrc.json, or .prettierrc.js file in your project, you can configure the plugin by adding:

In projects with package.json

You can also configure Prettier directly in your package.json:

In projects with ESLint + Prettier

If you're using the eslint-plugin-prettier, make sure to include this plugin in your ESLint configuration:

In VsCode with Prettier extension

If you use VS Code with the Prettier extension, no additional configuration is needed. The plugin will be automatically detected as long as it's installed in your project dependencies.

3. Usage with npm scripts

You can set up a script in your package.json to format all your files:

And then run it with:

4. Usage with formatting tools in CI/CD

To use in CI/CD environments, you can verify that all code is properly formatted:

Example

Before:

After:

HTML Before:

HTML After:

Vue Before:

Vue After:

Svelte Before:

Svelte After:

Configuration

You can adjust the minimum number of classes needed to trigger multiline formatting:

• tailwindClassThreshold: (default: 2) Number of classes after which formatting will be applied in multiple lines

Troubleshooting

If the plugin doesn't seem to be working:

1. Make sure Prettier is correctly configured 2. Verify that the plugin is installed in the current project 3. Confirm there are no conflicts with other Prettier plugins

Compatibility

• Prettier v3.0.0 or higher • JavaScript/TypeScript/JSX/TSX • Projects with React, Vue, Angular, etc. • HTML files

How it works

The plugin uses regular expressions to identify className attributes with multiple Tailwind classes and converts them into multiline template strings. The process occurs during Prettier's preprocessing phase, before standard formatting is applied.

Contributions

Contributions are welcome. To contribute:

1. Fork the repository 2. Create a new branch (git checkout -b feature/amazing-feature) 3. Commit your changes (git commit -m 'Add some amazing feature') 4. Push to the branch (git push origin feature/amazing-feature) 5. Open a Pull Request

License

MIT

Author

Ivan Lynch

Description from the npm listing.