Skip to content

Latest commit

 

History

History
68 lines (48 loc) · 1.67 KB

README.md

File metadata and controls

68 lines (48 loc) · 1.67 KB
Raw

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])!" />