prettier-plugin-tailwind-css

<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 prettierPluginTailwindCss from 'https://cdn.skypack.dev/prettier-plugin-tailwind-css';
</script>

README

Prettier Tailwind

Prettier Tailwind Plugin

code style: prettier npm version semantic release

"Make it work, make it right, make it fast"

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 the following languages:

  1. html
  2. js
  3. jsx
  4. ts
  5. tsx
  6. vue

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

Install prettier-plugin-tailwind-css:

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

yarn add -D prettier-plugin-tailwind-css

Configuration

Prettier for Tailwind supports the following options.

Name Default Description
removeDuplicatesClasses true If set to "true", all duplicate classes found will be deleted
classRegex ./src/regex.json See file
classSorter ./src/sorter.json See file