tqwewe / prettier-plugin-tailwind

Sort tailwind classes in HTML with Prettier.

⚠️ WARNING: this package is no longer maintained. ⚠️
Please use the official prettier-plugin-tailwindcss package instead.

It was a pleasure developing this package and I hope it served you all well (:

---

Prettier Plugin Tailwind

Sort tailwind classes with Prettier.

Supports

• HTML
• CSS (@apply directive)
• ReactJS (JSX, TSX)
• VueJS
• twin.macro

Go from this:

<div class="z-50 z-10 container  text-left md:text-center justify-center">
	...
</div>

To this:

<div class="container justify-center text-left z-10 z-50 md:text-center">
	...
</div>

This plugin reads your tailwind.config.js to sort tailwind classes in your project.

Installation VSCode

Install Prettier and the plugin into your project locally:

yarn add --dev prettier prettier-plugin-tailwind

Other IDE's are supported.

Note: Prettier 2.0.0 or greater is required as a peer dependency.

Prettier Options

These options can be set in your .prettierrc file to change the behavious of this plugin.

• twConfig - Path to tailwind config relative to the root of the project.
• twPluginsOrder - Comma separated order of tailwind plugins to sort classes by.
• twClassesPosition - Position of component and utility classes.
• twUnknownClassesPosition - Position of unknown classes.
• twJsxClassAttributes - Comma separated list of JSX attributes to sort tailwind classes in.
• twSortFunctions - Comma separated list of function names to sort classes in arguments.

More details can be found in OPTIONS.md

Contributing 🙌

Contributions are more than welcome. If you see any changes fit, go ahead and open an issue or PR.

---

Any support is a huge motivation, thank you very much!

prettier-plugin-tailwind's Issues

Twig file support

Hi there,

Is there a simple way of handling twig files?
I'm already using the melody plugin to handle twig formatting.

Is it a configuration thing or do you need to change something at the core?
Maybe for a future enhancement...

Thanx.

Does not compatible with Prettier 2.3.0

Describe the bug
When upgrading to the latest Prettier(2.3.0)

"could not find a copy of prettier to link in <>/node_modules/prettier-plugin-tailwind/node_modules"

To Reproduce

$ yarn add -D prettier

Versions:

• prettier-plugin-tailwind version: 2.2.10
• Operating system: macOS
• NPM/Yarn version: 1.22.10

Apply tailwind sort order on variable strings

I would like to be able to sort all the classes that are defined in a variable, this already works with autosuggest in the Visual Studio Code tailwind plugin. I think it would be very smart to use the exact same options for this as are available in the Visual Studio Code extension.

Example:

import React from 'react';

const className = {
  root: `last:border-0 border-l border-gray-200`,
};

const Component = ({ children }) => {
  return <div className={className.root}>{children}</div>;
};

export default Component;

As already stated above, for the Visual Studio Code tailwind extension, the autocomplete and autosuggestions work. So there is a decent way to figure out this pattern. I would recommend checking how it works in that plugin and copy it to this plugin.

Doesn't support `dark` prefix

The plugin doesn't seem to support/know about the dark: prefix used with dark mode.

To Reproduce

1. Write the following CSS:

@layer base {
  body {
    @apply text-gray-900 bg-gray-100 dark:text-gray-100 dark:bg-gray-900;
  }
}

2. Save it and have this plugin sort it, and you end up with this:

@layer base {
  body {
    @apply dark:text-gray-100 text-gray-900 bg-gray-100 dark:bg-gray-900;
  }
}

Expected behavior
Sorting should've taken dark: into account. Either put them together at the end, or after it's "sibling":

// Last
@apply text-gray-900 bg-gray-100 dark:text-gray-100 dark:bg-gray-900;

// Sibling
@apply text-gray-900 dark:text-gray-100 bg-gray-100 dark:bg-gray-900;

Versions:

• prettier-plugin-tailwind version: 2.2.10

Add Pug files support

Would be great to add support for Pug .pug files.

There is already a prettier-pug plugin which works great. But it doesn't do anything with Tailwind

aspnetcore razor (.cshtml) not support

Dotnetcore razor .cshtml not support

prettier 2.3.1

Describe the bug
nothing is happening while running prettier by cli or by webstorm.

To Reproduce
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Versions:

• prettier-plugin-tailwind version:
• Operating system:
• NPM/Yarn version:

Additional context
Add any other context about the problem here.

Error: Cannot find module 'svelte-prettier-plugin'

I've just installed this plugin using npm install --save-dev prettier-plugin-tailwind. I'm not using Svelte at all but when I run prettier I get the following error:

▶ npm run format

> vietnamcoracle-next@ format /Users/ben/Code/vietnamcoracle-next
> prettier --write "src/**/*.{js,jsx}"

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'svelte-prettier-plugin'
Require stack:
- /Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/languages/svelte.js
- /Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/languages/index.js
- /Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/index.js
- /Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/prettier-plugin-tailwind.js
- /Users/ben/Code/vietnamcoracle-next/node_modules/prettier/index.js
- /Users/ben/Code/vietnamcoracle-next/node_modules/prettier/bin-prettier.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/languages/svelte.js:3:34)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/languages/svelte.js',
    '/Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/languages/index.js',
    '/Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/lib/index.js',
    '/Users/ben/Code/vietnamcoracle-next/node_modules/prettier-plugin-tailwind/prettier-plugin-tailwind.js',
    '/Users/ben/Code/vietnamcoracle-next/node_modules/prettier/index.js',
    '/Users/ben/Code/vietnamcoracle-next/node_modules/prettier/bin-prettier.js'
  ]
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vietnamcoracle-next@ format: `prettier --write "src/**/*.{js,jsx}"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vietnamcoracle-next@ format script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ben/.npm/_logs/2020-12-03T03_04_06_288Z-debug.log

Error: Cannot find module 'node_modules\tailwindcss\lib\util\processPlugins'

Describe the bug
Getting the following error on running prettier after installing the plugin.

Error: Cannot find module 'D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\tailwindcss\lib\util\processPlugins'
Require stack:
- D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\tailwind-classes-sorter\lib\index.js
- D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\prettier-plugin-tailwind\lib\index.js
- D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\prettier-plugin-tailwind\prettier-plugin-tailwind.js
- D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\prettier\index.js
- D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\prettier\bin-prettier.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at new TWClassesSorter (D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\tailwind-classes-sorter\lib\index.js:28:31)
    at Object.<anonymous> (D:\DEV\js-ts\codedamn\1-quiz-app\node_modules\prettier-plugin-tailwind\lib\index.js:10:25)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'D:\\DEV\\js-ts\\codedamn\\1-quiz-app\\node_modules\\tailwind-classes-sorter\\lib\\index.js',
    'D:\\DEV\\js-ts\\codedamn\\1-quiz-app\\node_modules\\prettier-plugin-tailwind\\lib\\index.js',
    'D:\\DEV\\js-ts\\codedamn\\1-quiz-app\\node_modules\\prettier-plugin-tailwind\\prettier-plugin-tailwind.js',
    'D:\\DEV\\js-ts\\codedamn\\1-quiz-app\\node_modules\\prettier\\index.js',
    'D:\\DEV\\js-ts\\codedamn\\1-quiz-app\\node_modules\\prettier\\bin-prettier.js'
  ]

To Reproduce
Steps to reproduce the behavior:

1. npm i prettier prettier-plugin-tailwind tailwindcss -D
2. create index.html file in src folder
3. npx prettier -c src

Expected behavior
No error

Versions:

• prettier-plugin-tailwind version: 2.2.12
• prettier version: 2.5.1
• Operating system: Windows 10
• NPM/Yarn version: npm v8,1,2

No longer maintained - Looking for maintainers

Hi 👋
I made this project a little while ago and it seemed to get a whole lot more attention than expected!
Unfortunately I've been busy working with Rust in the world of backend systems and haven't spent much time on frontend, and therefore haven't had time to maintain this project.

For the sake of everyone waiting for issues to be resolved and support for updates to prettier & tailwind, I am looking for maintainers.

If you have time and are willing to help out with this project, please get in touch here and I'll happy add you as a maintainer.

Prettier hasn't added official support for plugins like this one, so the implementation is a little hacky and not ideal. I was waiting for prettier to eventually add support for overriding but it doesn't seem to be a priority for them sadly. See issue prettier/prettier#4424.

On a side note, I apologise to the issues I may have missed or forgot to reply to, and I hope you understand 🙏

Support override comments for unknown strings, like // prettier-tailwind

Why?

There are plenty of situations where a developer might have a string containing tailwindcss class names outside of the standard props.

This would allow developers to use a comment to opt-in to sort their strings containing tailwindcss for a given part of the AST, similar to how // prettier-ignore allows developers to opt-out of a given part of the AST.

How?

Functionally

I suspect it would primarily be some modifications in src/parsers/typescript.ts, src/parsers/babel.ts, src/parsers/vue.ts.

I don't really see the need to modify CSS or HTML parsers.

Behaviorally

It should behave similarly to // prettier-ignore.

// prettier-ignore on a new line affects the next item in the AST,

so for prettier-tailwind it could be like this:

before

const small =     "rounded    py-1.5 text-xs   px-2.5";

// prettier-tailwind
const large =     "rounded-md py-3   text-base px-6";

after

const small = "rounded    py-1.5 text-xs   px-2.5";

// prettier-tailwind
const large = "px-6 py-3 text-base rounded-md";

Note they both had incorrect spacing after the assignment operator which both got corrected by prettier, however, only of the strings was corrected by prettier-plugin-tailwind

and // prettier-ignore at the end of a line affects the previous item in the AST,

so for prettier-tailwind, it could be like this:

before

const small =     "rounded    py-1.5 text-xs   px-2.5"; // prettier-tailwind


const large =     "rounded-md py-3   text-base px-6";

after

const small = "px-2.5 py-1.5 text-xs rounded"; // prettier-tailwind


const large = "rounded-md py-3   text-base px-6";

Same here as above: note they both had incorrect spacing after the assignment operator which both got corrected by prettier, however, only of the strings was corrected by prettier-plugin-tailwind

Additional Details

A consequence of focusing on the AST is being able to define it for a function

before

// prettier-tailwind
function  Button({size, ...props}: ButtonProps) {
    const small =  "rounded    py-1.5 text-xs   px-2.5"; 
 const large =     "rounded-md py-3   text-base px-6";
  
   return (
  <button className={  size === 'small' ? small : large} {...props}/>
  )
}

after

// prettier-tailwind
function Button({ size, ...props }: ButtonProps) {
  const small = "px-2.5 py-1.5 text-xs rounded";
  const large = "px-6 py-3 text-base rounded-md";

  return <button className={size === "small" ? small : large} {...props} />;
}

Any guidance on how/where to get started would be appreciated but I'll probably tinker with this at some point for fun anyway.

Svelte support

I would like this plugin to have support for Svelte files
The Svelte files are very similar to HTML

Add prettier config options

Currently there are no options such as:

pluginOrder: [
  'container',
  'display',
  ...
]

https://github.com/tailwindcss/tailwindcss/tree/master/src/plugins

Need a method of adjusting the order of classes.

Any chance for support of Sass (.scss) files?

Really like this in my react application. Any chance to incorporate support for sass .scss files as well?

Thanks!

Add support for @apply in css files

Would be nice to be able to sort classes used with @apply in CSS / SASS files.

JSX support

I'd love to see JSX support. Looking at the source it looks pretty simple so far.

How big do you estimate the effort to add JSX support?

Request: Wrap tailwind classes when there are more then X

See prettier/prettier#11827

Jest inline snapshot testing fails when prettier-plugin-tailwind is installed

Describe the bug

First of all, thanks for this wonderful plugin!

I'm running into some problems when using this plugin with Jest. Inline snapshot testing (toMatchInlineSnapshot) in Jest uses Prettier (https://jestjs.io/docs/en/snapshot-testing#inline-snapshots), tests using inline snapshot testing start to fail as soon as you install prettier-plugin-tailwind, tests that use non-inline snapshot testing or no snapshot testing at all work just fine.

 FAIL  src/landing-page/landing-page-paths.test.ts
  ● Test suite failed to run

    TypeError: Cannot read property 'twJsxClassAttributes' of undefined

      at Object.parse (node_modules/prettier-plugin-tailwind/lib/parsers/typescript.js:19:40)
      at Object.parse (node_modules/prettier/index.js:13625:19)
      at coreFormat (node_modules/prettier/index.js:14899:14)
      at format (node_modules/prettier/index.js:15131:14)
      at node_modules/prettier/index.js:57542:12
      at Object.format (node_modules/prettier/index.js:57562:12)

I did a bit of debugging and it boils down to the options argument in the parse function being undefined when ran by Prettier in Jest: https://github.com/Acidic9/prettier-plugin-tailwind/blob/master/src/parsers/typescript.ts#L12.

I'm not yet sure if this is a bug with plugin-prettier-tailwind, Jest or Prettier. I'm hoping someone with more knowledge about the internal workings of these tools might shed some light on that :)

To Reproduce

https://codesandbox.io/s/nameless-river-f9fuy?file=/index.test.js

Expected behavior

Inline snapshots should be formatted with plugin-prettier-tailwind.

Versions:

• prettier-plugin-tailwind version: 2.2.9
• Operating system: macOS
• NPM/Yarn version: 6.14.5

VueJS Templates Support

Any plans to support VueJS? Tailwind is popular in VueJS community, I think it would be good point.

Sort classes deep inside `clsx` calls

#11 was implemented recently and it works like charm for simple cases. However, it doesn't sort class names within arrays and objects passed to clsx (and similar methods). For instance, classes in the following code should be auto-sorted deeply:

clsx(
  "relative focus:z-10 flex justify-between px-6 py-3 hover:bg-neutral-60 space-x-6",
  disabled
    ? "text-neutral-60"
    : [
        variant === "neutral" && {
          "hover:text-neutral-0": true,
          "text-neutral-0 bg-neutral-60": active,
          "text-neutral-20 bg-neutral-80": !active,
        },
        variant === "danger" && "text-danger-40 bg-neutral-80",
      ],
  className,
)

Thank you in for maintaining this wonderful library! 😊

Sort classes when using classnames library(way to handle long className strings)

Is there a way to sort tailwind classes if i am using classnames like this?

import classname from 'classnames';

 <div
  className={classname(
      'flex-col',
      'justify-start',
      'flex',
      'items-center',
      'bg-gray-300',
      'py-20',
  )}></div>

The idea is that i want to manage long className strings(to make them start from new line each), but also get autocompletion with Tailwind CSS IntelliSense and sort with prettier-pluging-tailwind. Maybe there is another way of doing this, could someone suggest me?

Support Svelte

Do you have plans to Support Svelte language?

Add prettier peer dependency

Since Prettier is recommended to be installed/used as an exact version, the lowest compatible version you support should be specified as a peer dependency. You may also want to specify this in the docs.

Here's an example of an active official plugin that uses this pattern:
https://github.com/prettier/plugin-pug/blob/master/package.json

Here's what I tested:
1.16.4 -- not working
1.19.1 -- working
2.0.0 -- working
2.2.0 -- working

Here's the error that I get with 1.16.4 in VSCode. It looks like at that time plugin support was still experimental.

["ERROR" - 10:02:55 PM] Error formatting document.
["ERROR" - 10:02:55 PM] Unexpected type string
Error: Unexpected type string
	at optionInfoToSchema (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:8872:13)
	at optionInfosToSchemas (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:8789:20)
	at normalizeOptions$1 (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:8749:17)
	at Object.normalizeApiOptions (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:8921:10)
	at normalize (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:10732:28)
	at formatWithCursor (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:14130:12)
	at /Users/jaronheard/temp/civic/node_modules/prettier/index.js:42399:15
	at Object.format (/Users/jaronheard/temp/civic/node_modules/prettier/index.js:42418:12)
	at t.default.<anonymous> (/Users/jaronheard/.vscode/extensions/esbenp.prettier-vscode-5.8.0/dist/extension.js:1:17599)
	at Generator.next (<anonymous>)
	at s (/Users/jaronheard/.vscode/extensions/esbenp.prettier-vscode-5.8.0/dist/extension.js:1:11597)

This error also occurs running the CLI, and occurs regardless of whether the twPluginsOrder is specified in the .prettierrc file.

Thanks for your work on this, it's very cool 😎

Sort classes inside 'clsx'/'classNames' functions

First of all, thank you for the great work on this plugin!

Considering migration from prettier-tailwind, I think that class string sorting inside clsx and classNames calls would greatly improve the authoring experience.

Prettier Plugin Tailwind not working with EJS

I have a Nodejs Express project. I am using EJS as the template partial language. This does not seem to work. Even after install this plugin and having prettier work, the automatic class sorting does not work.

Steps to reproduce the behavior:

1. Install prettier
2. Install prettier-plugin-prettier
3. Try to save file to format or running npx prettier --check views/
4. Does not work

Expected behavior
Sort my tailwind css classes

Screenshots
npx prettier --check views/ Checking formatting... [error] No supported files were found in the directory: "views/". All matched files use Prettier code style!

Versions:

• prettier-plugin-tailwind version: 4.0.0
• Operating system: Windows
• NPM/Yarn version: 8.1.2

tailwind presets' custom theme was treated as unknown classes

Describe the bug
I make my custom theme as a tailwind preset and require it in the tailwind.config.js. It results that the custom theme(here is bg-primary ) was treated as unknown class and was placed at the start by default.

config like:

// preset.js
module.exports = {
  theme: {
    colors: {
      primary: '#206EF7'
    }
  }
}

// tailwind.config.js
module.exports = {
  presets: [require('./preset.js')],
  ...
}

While just placing the custom theme in tailwind.config.js, it works as expected.

config like:

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#206EF7'
    }
  }
  ...
}

Expected behavior
The custom theme's classes should be recognized and sorted as known classes.

Versions:

• prettier-plugin-tailwind version: 2.2.10
• Operating system: wsl
• NPM/Yarn version: yarn v1.x

ESlint support ?

Hi !
I do actually use VScode's Headwind extension to format my classes.

I didn't found a way of doing this with basically any code editor/IDE. I was wondering if it's somehow planned to support formatting through ESlint, that way: my colleagues will have auto-formatted classes whatever the editor.

Not working after install

Hi there, sorry for the ambiguous title :) I'm not sure what I'm doing wrong here, but I'm trying to get this working with my CRA project with Prettier. I'm using Prettier 2.1.2

Setup
I added "prettier-plugin-tailwind": "2.2.0", to my package.json and installed. Verified in node_modules that I have the right package with the files (since I know this npm package name referred to something else before).

.prettierrc

{
  "semi": false
}

babel-plugin-macros.config.js

module.exports = {
  twin: {
    autoCssProp: true,
    config: "./src/tailwind.config.js",
    debug: false,
    debugPlugins: false,
    debugProp: true,
    preset: "styled-components",
  },
}

src/tailwind.config.js

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: {
    content: ["./src/**/*.html", "./src/**/*.tsx"],
  },
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Usage
I tried running Prettier CLI over all of these with no luck:

I use Twin Macro, so I first tried:

const Logo = tw.div`font-bold text-3xl font-hairline`

Then I tried the twin macro inline in styled-components:

const styles = styled.div`h1 { ${tw`font-sans text-3xl font-hairline`}}`

Then I tried just using className in JSX itself:

<div className="font-sans text-6xl font-hairline text-teal-500">

Any idea if there's an issue or something I'm doing wrong? Thanks!

Support Logical operators inside clsx

It's great to have inside support for functions like clsx!

<div
    className={clsx(
        "flex flex-col p-4 border-2 border-gray-200 rounded-lg shadow-md", // sorted
        session && "select-none opacity-50" // not sorted
    )}
>

However, using logical operators in this way does not align the second class. I think it's great that this is supported.

Getting error after installation

Hi there, after installing prettier-plugin-tailwind and running prettier I get:

> yarn lint
yarn run v1.22.5
$ prettier --check '**/*.*' && eslint . --ext js
no tailwind.config.js file found TypeError: pluginModule.default is not a function
    at /Users/vvo/Dev/turnshift/node_modules/tailwind-classes-sorter/lib/index.js:147:39
    at Array.forEach (<anonymous>)
    at TWClassesSorter.getAllSelectors (/Users/vvo/Dev/turnshift/node_modules/tailwind-classes-sorter/lib/index.js:136:34)
    at new TWClassesSorter (/Users/vvo/Dev/turnshift/node_modules/tailwind-classes-sorter/lib/index.js:35:37)
    at Object.<anonymous> (/Users/vvo/Dev/turnshift/node_modules/prettier-plugin-tailwind/lib/index.js:12:23)
    at Module._compile (internal/modules/cjs/loader.js:1015:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
Checking formatting...
All matched files use Prettier code style!
✨  Done in 10.89s.

> cat tailwind.config.js
const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", ...defaultTheme.fontFamily.sans],
      },
      spacing: {
        18: "4.5rem",
      },
    },
  },
  variants: {
    // useful for disabled input when not dirty
    opacity: ["responsive", "disabled"],
    cursor: ["responsive", "disabled", "focus"],
    pointerEvents: ["responsive", "disabled"],
    visibility: ["responsive", "group-hover"],
    borderStyle: ["responsive", "hover"],
    position: ["responsive", "group-hover"],
    zIndex: ["responsive", "group-hover"],
    textDecoration: ["responsive", "hover", "focus", "group-hover"],
  },
  plugins: [
    require("@tailwindcss/ui")({
      layout: "sidebar",
    }),
    require("@tailwindcss/typography"),
  ],
  purge: ["components/**/*.js", "pages/**/*.js"],
  future: {
    removeDeprecatedGapUtilities: true,
  },
};

Any idea on what's wrong?

Tailwind CSS v2 support

According to the dependencies of this package, it relies on Tailwind CSS v1.x

It's good to have v2 support.

Support custom media queries and variants

As seen in the Tailwind docs, custom screens may be defined as follows:

module.exports = {
  theme: {
    screens: {
      tablet: "640px",
      laptop: "1024px",
      desktop: "1440px",
    },
  },
};

They should be taken into consideration when building the preferred order of classes.

Similar logic could be applied to variants, which may be deduced from variantOrder.

prettier-plugin-tailwind conflicts with other typescript plugins

Describe the bug

I was using prettier-plugin-organize-imports in my project. After installing prettier-plugin-tailwind, prettier-plugin-organize-imports stopped working.

This is due to the fact that both plugins are redefining the typescript parser in their configuration, both importing prettier/parser-typescript to inherit from it.

prettier-plugin-organize-imports uses the preprocess property of the parser while prettier-plugin-tailwind uses the parse property, but the last plugin loaded by prettier completely overrides any previous one.

To Reproduce
Steps to reproduce the behavior:

1. install prettier-plugin-organize-imports, it works.
2. install prettier-plugin-tailwind, it works but 1. not longer works.

Expected behavior

Does anyone know if it is possible to have both plugin working together (something like merging their parser configuration together)?

Versions:

• prettier-plugin-tailwind version: 2.2.8
• prettier-plugin-organize-imports version: 1.1.1

Support for postcss files

Sorting in postcss files with @apply directive and nested classes would be very nice

Error when used with Tailwind 3.0.0

Describe the bug
The extensions fails when update to Tailwind v3. Both Prettier CLI and ESLint (with prettier plugin) CLI fails with the same error message.

To Reproduce
Steps to reproduce the behavior:

1. Open any Tailwind project.
2. Update Tailwind to v3.0.0.
3. Run prettier.

Stack trace

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/tailwindcss/lib/util/processPlugins'
Require stack:
- /home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/tailwind-classes-sorter/lib/index.js
- /home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier-plugin-tailwind/lib/index.js
- /home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier-plugin-tailwind/prettier-plugin-tailwind.js
- /home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier/index.js
- /home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier/bin-prettier.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at new TWClassesSorter (/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/tailwind-classes-sorter/lib/index.js:28:31)
    at Object.<anonymous> (/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier-plugin-tailwind/lib/index.js:10:25)
    at Module._compile (node:internal/modules/cjs/loader:1097:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1149:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/tailwind-classes-sorter/lib/index.js',
    '/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier-plugin-tailwind/lib/index.js',
    '/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier-plugin-tailwind/prettier-plugin-tailwind.js',
    '/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier/index.js',
    '/home/gedzeppelin/hdd/Code/TS/portfolio-front/node_modules/prettier/bin-prettier.js'
  ]
}

Versions:

• prettier-plugin-tailwind version: 2.2.12
• Operating system: Linux 64 bits
• NPM/Yarn version: Yarn 1.22.17
• Node.js: v17.1.0

Implement separator for unknown classes

It would be useful as a feedback for errors in usage. So ml-4 mr-99 will be transformed for example to ml-4 / mr-99 if 99 size is not defined in tailwind.config.js

Support pipe characters to separate media query classes

For example:

From this:

flex p-2 sm:p-4 md:m-2 m-0 md:p-6

To this:

flex m-0 p-2 | sm:p-4 | md:m-2 md:p-6

I do this a lot and find that it makes it a lot more readable.

Conflict with other prettier plugins

Prettier-plugin-tailwind conflicts with prettier-plugin-organize-imports plugin in Angular project
Prettier plugin does not:

• remove unused imports
• make right order of imports

To Reproduce
Steps to reproduce the behavior:

1. Create angular app with angular cli
2. Install prettier, prettier-plugin-tailwind, prettier-plugin-organize-imports
3. Create a component with different imports (angular-core, rxjs, etc)
4. Do not use all of components
5. Save a file
6. Pay attention to the Imports section

Expected behavior
Unused imports should be removed
Imports should be formated

Versions:

• prettier-plugin-tailwind version: 2.2.12
• prettier: 2.4.1
• NPM Yarn version: 6.14.15
• Angular: 12.6.1

prettier config
{ "trailingComma": "all", "tabWidth": 4, "semi": true, "singleQuote": true, "bracketSpacing": true, "printWidth": 100, "attributeGroups": [ "$CLASS", "$ID", "$ANGULAR_ELEMENT_REF", "$ANGULAR_STRUCTURAL_DIRECTIVE", "$ANGULAR_ANIMATION", "$ANGULAR_ANIMATION_INPUT", "$ANGULAR_TWO_WAY_BINDING", "$ANGULAR_INPUT", "$ANGULAR_OUTPUT", "$CODE_GUIDE" ], "overrides": [ { "files": "*.component.html", "options": { "parser": "angular" } }, { "files": "*.html", "options": { "parser": "html" } } ] }

group-hover class not in expected order

Describe the bug
I would've expected all group-hover classes to be grouped together but they are not in this case.

To Reproduce
Run prettier on code below

<div class="far fa-edit pl-px-2 group-hover:text-primary-500 ml-auto mt-px flex h-7 w-7 flex-shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-sm text-gray-400 transition-colors group-hover:border-gray-200 group-hover:bg-white"></div>

Expected behavior
Expected group-hover classes to be grouped together

package name on npm

Hi @acidic9 👋

Thanks for making this project ❤️.

I made an attempt to do this on https://github.com/fshareef/prettier-plugin-tailwind but failed miserably due to my limited knowledge of the prettier project.

Seems like this project does what I needed back when I wanted to work on this.

I have the package name prettier-plugin-tailwind publised on npm, but I can easily unpublish it since it has no dependants. Since prettier recommends that plugins be named prettier-plugin-x, I thought you would be interested in getting the name I published my package under.

Would you be interested in deprecating this package and republishing it under the name prettier-plugin-tailwind?

Also, Adam Wathan has stated on some issue (I don't remember but I can find it) that he would be willing to host a project like this under the Tailwind org. Might be a good idea to get in touch with him so that this project can get more exposure.

Prettier stops working when installing the plugin

Describe the bug
When installing the plugin, Prettier stops working. It had never happened to me before, today I decided to create a NextJS project and when I added prettier next to the plugin, the code formatting stopped working completely.

To Reproduce
Steps to reproduce the behaviour:

1. Install Prettier
2. Install prettier-plugin-tailwind
3. Press CTRL + S and format on save doesn't work

Expected behaviour
I expect to "format" the code on save, but this doesn't work. I already tested in other projects and works just fine.

Versions:

• prettier-plugin-tailwind version: 2.2.10
• Operating system: Ubuntu 20.04
• NPM/Yarn version: Yarn v1.22.10

Performance improvements

I'm wondering if there's some low-hanging fruit for performance improvements. I'm seeing a big performance slowdown after adding this extension on a real world project. Running prettier check takes 6.5x as long with this extension added on my Intel Macbook Pro. I tested using Node 12.16.1 and Node 14.6.0 with similar results.

I could dig around, but curious if others are seeing similar slowdowns. It seems like this plugin shouldn't be quite that computationally expensive.

Without extension

With extension