A Prettier plugin for sorting Tailwind CSS classes on twin.macro
npm install prettier-plugin-twin.macroSort your Tailwind and twin.macro classes based on recommended class order of Tailwind using Prettier.
- 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
Install prettier-plugin-twin.macro as a dev-dependency:
``bash`
npm i --save-dev prettier-plugin-twin.macro prettier
or
`bash`
yarn add -D prettier-plugin-twin.macro prettier
Create a prettier.config.js file in the root directory and add the plugin.
`js`
module.exports = {
plugins: [require("prettier-plugin-twin.macro")],
};
Then format your code using Prettier CLI.
`
prettier --write ./src/index.js
Short CSS and arbitrary classes should have their position preserved
`js`
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
Groupify classes based on their variant with bracket group
`js`
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
Add !important sign to bracket groups
`js``
// ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓