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

npm install --save-dev prettier-plugin-tailwind-multiline

or

yarn add --dev prettier-plugin-tailwind-multiline

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:

{
  "tailwindClassThreshold": 2
}

In projects with package.json

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

{
  "prettier": {
    "tailwindClassThreshold": 2
  }
}

In projects with ESLint + Prettier

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

// .eslintrc.js
module.exports = {
  // ... other configurations
  extends: [
    // ... other extends
    'plugin:prettier/recommended'
  ],
  rules: {
    'prettier/prettier': ['error', {
      tailwindClassThreshold: 2,
    }]
  }
};

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:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,html,svelte,vue}\""
  }
}

And then run it with:

npm run format

4. Usage with formatting tools in CI/CD

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

npx prettier --check "src/**/*.{js,jsx,ts,tsx,html,svelte,vue}"

Example

Before:

<div className="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
  <h1>Hello World</h1>
</div>

After:

<div
  className={`
  flex
  flex-col
  items-center
  justify-center
  p-4
  bg-white
  rounded-lg
  shadow-md
  hover:shadow-lg
  transition-shadow
  duration-300
`}
>
  <h1>Hello World</h1>
</div>

HTML Before:

<div class="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
  <h1>Hello World</h1>
</div>

HTML After:

<div
  class="
  flex
  flex-col
  items-center
  justify-center
  p-4
  bg-white
  rounded-lg
  shadow-md
  hover:shadow-lg
  transition-shadow
  duration-300
"
>
  <h1>Hello World</h1>
</div>

Vue Before:

<template>
  <div class="bg-white shadow-xl rounded-lg overflow-hidden">
    <div class="bg-gradient-to-r from-blue-500 to-indigo-600 px-6 py-4">
      <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-white">Dashboard</h2>
      </div>
    </div>
  </div>
</template>

Vue After:

<template>
  <div class="
  bg-white
  shadow-xl
  rounded-lg
  overflow-hidden
">
    <div class="
  bg-gradient-to-r
  from-blue-500
  to-indigo-600
  px-6
  py-4
">
      <div class="
  flex
  items-center
  justify-between
">
        <h2 class="
  text-2xl
  font-bold
  text-white
">Dashboard</h2>
      </div>
    </div>
  </div>
</template>

Svelte Before:

<button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-full shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
  Incrementar
</button>

Svelte After:

<button class="
  bg-blue-500
  hover:bg-blue-600
  text-white
  font-medium
  py-2
  px-6
  rounded-full
  shadow-md
  hover:shadow-lg
  transition-all
  duration-300
  focus:outline-none
  focus:ring-2
  focus:ring-blue-500
  focus:ring-opacity-50
">
  Incrementar
</button>

Configuration

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

{
  "tailwindClassThreshold": 2
}

• 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