prettier-tailwind

<div align="center"> <img alt="Prettier" src="https://raw.githubusercontent.com/prettier/prettier-logo/master/images/prettier-icon-light.png"> <img alt="Tailwind" height="180" hspace="25" vspace="15" src="https://i.pinimg.com/originals/61/f5/e0/61f5e0

Usage no npm install needed!

<script type="module">
  import prettierTailwind from 'https://cdn.skypack.dev/prettier-tailwind';
</script>

README

Prettier Tailwind

Prettier Tailwind Plugin

code style: prettier

Intro

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

This plugin adds support for the Tailwind CSS library.

How it works

This plugin will sort tailwind classes as headwind does and will also remove duplicates classes.

Actually the plugin works for html language and jsx language.

Input

<div class="mx-auto flex h-16 justify-between items-center max-w-6xl h-16">
  <p>Hello World</p>
</div>

Output

<div class="flex items-center justify-between h-16 max-w-6xl mx-auto">
  <p>Hello World</p>
</div>

Install

N/A