Prettier Plugin for EJS with TailwindCSS

A Prettier plugin that formats EJS templates and automatically sorts TailwindCSS classes within class attributes. Combine beautiful structure with consistent utility class order.

Features

• EJS Support: Formats Embedded JavaScript (EJS) templates seamlessly.
• TailwindCSS Class Sorting: Automatically sorts TailwindCSS utility classes within class attributes.

Installation

npm install --save-dev prettier-plugin-ejs-tailwindcss

To use this plugin, ensure you have prettier and prettier-plugin-tailwindcss installed in your project:

npm install --save-dev prettier prettier-plugin-tailwindcss

Usage

Add the plugin to your Prettier configuration:

{
  "plugins": ["prettier-plugin-ejs-tailwindcss"]
}

{
  "overrides": {
    "files": "*.ejs",
    "options": {
      "parser": "html",
      "plugins": ["prettier-plugin-ejs-tailwindcss"]
    }
  }
}

Run Prettier as usual:

npx prettier --write "your-template.ejs"

Example

Input

<div>
  <div><% if (condition) { %> <% } else if (condition) { %> <% } %></div>

  <div class="<%= red %>"><%= 1 > 0 %></div>

  <div class="items-center gap-4 flex">
    <code><%= text %></code>
    <pre><%= text %></pre>
  </div>
</div>

Output

<div>
  <div>
    <% if (condition) { %>
    <% } else if (condition) { %>
    <% } %>
  </div>

  <div class="<%= red %>"><%= 1 > 0 %></div>

  <div class="flex items-center gap-4">
    <code><%= text %></code>
    <pre><%= text %></pre>
  </div>
</div>

Development

To build the project:

npm run build

Acknowledgements

This project was inspired by and references the prettier-plugin-ejs package. Special thanks to the contributors of that project for their work on EJS formatting.

License

This project is licensed under the MIT License.

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

Links

• GitHub Repository
• Issues
• Prettier Documentation
• TailwindCSS Documentation