prettier-plugin-twin.macro

Prettier for twin.macro

Sort your Tailwind and twin.macro classes based on recommended class order of Tailwind using Prettier.

Features

• Format inline Tailwind CSS classes
• Format twin.macro template literals inside all style-components
• Support JavaScript, Flow, Typescript and JSX
• Ascend parent directories from current directory to find tailwind.config.js
• Groupify classes with bracket group
• Add !important to bracket groups

How to install

Install prettier-plugin-twin.macro as a dev-dependency:

npm i --save-dev prettier-plugin-twin.macro prettier

or

yarn add -D prettier-plugin-twin.macro prettier

How to use

Create a prettier.config.js file in the root directory and add the plugin.

module.exports = {
  plugins: [require("prettier-plugin-twin.macro")],
};

Then format your code using Prettier CLI.

prettier --write  ./src/index.js

Examples

Short CSS and arbitrary classes should have their position preserved

<div tw="display[block] inline inline1 [display:block]" />
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
<div tw="inline1 inline display[block] [display:block]" />

Groupify classes based on their variant with bracket group

<div tw="sm:bg-red-100 sm:[display:inline] sm:hover:w-10 sm:hover:mt-4 sm:hover:before:p-4" />
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
<div tw="sm:(bg-red-100 [display:inline] hover:(mt-4 w-10 before:p-4))" />

Add !important sign to bracket groups

<div tw="!display[block] !inline" />
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
<div tw="(inline display[block])!" />