Trapfether / tailwind-raw-reorder

An opinionated Tailwind CSS class sorter built for Visual Studio Code

Tailwind Raw Reorder

Tailwind Raw Reorder is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

Tailwind Raw Reorder runs on save, will remove duplicate classes and can even sort entire workspaces.

---

Usage

You can install Tailwind Raw Reorder via the VS Code Marketplace, or package it yourself using vsce. Tailwind Raw Reorder works globally once installed and will run on save if a tailwind.config.js file is present within your working directory.

You can also trigger Tailwind Raw Reorder by:

• Pressing ALT + Shift + T on Mac
• Pressing CTRL + ALT + T on Windows
• Pressing CTRL + ALT + T on Linux

Tailwind Raw Reorder can sort individual files by running 'Sort Tailwind CSS Classes' via the Command Palette.

Workspaces can also be sorted by running 'Sort Tailwind CSS Classes on Entire Workspace'.

Your current selection can be sorted by running 'sort Tailwind CSS Classes on Selection'. You should select only the classes you want to sort, and not the entire line or surrounding qoutes / whitespace.

Any unknown classes will be moved to the start of the class list, whilst duplicate classes will be removed.

tailwind-raw-reorder.classRegex:

An object with language IDs as keys and their values determining the regex to search for Tailwind CSS classes. The default is located in package.json but this can be customized to suit your needs.

There can be multiple capturing groups, that should only contain a string with Tailwind CSS classes (without any apostrophies etc.). If a new group, which doesn't contain the class string, is created, ensure that it is non-capturing by using (?:).

Example from package.json:

"tailwind-raw-reorder.classRegex": {
    "html": "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']",
    "javascriptreact": "(?:\\bclassName\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\'])|(?:\\btw\\s*`([_a-zA-Z0-9\\s\\-\\:\\/]*)`)"
}

Multi-step Regex

A multi-step regex can be specified by using an array of regexes to be executed in order.

Example from package.json:

"tailwind-raw-reorder.classRegex": {
    "javascript": [
        "(?:\\bclass(?:Name)?\\s*=\\s*(?:{([\\w\\d\\s_\\-:/${}()[\\]\"'`,]+)})|([\"'`][\\w\\d\\s_\\-:/]+[\"'`]))|(?:\\btw\\s*(`[\\w\\d\\s_\\-:/]+`))",
        "(?:[\"'`]([\\w\\d\\s_\\-:/${}()[\\]\"']+)[\"'`])"
    ],
}

The first regex will look for JSX class or className attributes or twin.macro usage.

The second regex will then look for class names to be sorted within these matches.

Configuration Object

Optionally a configuration object can be passed to specify additional options for sorting class names.

• regex - specifies the regex to be used to find class names
• separator - regex pattern that is used to separate class names (default: "\\s+")
• replacement - string used to replace separator matches (default: " ")

Example from package.json:

"tailwind-raw-reorder.classRegex": {
    "jade": [
        {
            "regex": "\\.([\\._a-zA-Z0-9\\-]+)",
            "separator": "\\.",
            "replacement": "."
        },
        "\\bclass\\s*=\\s*[\\\"\\']([_a-zA-Z0-9\\s\\-\\:\\/]+)[\\\"\\']"
    ],
}

Debugging Custom Regex:

To debug custom classRegex, you can use the code below:

// Your test string here
const editorText = `
  export const Layout = ({ children }) => (
    <div class="h-screen">
      <div className="w-64 h-full bg-blue-400 relative"></div>
      <div>{children}</div>
    </div>
  )
`
// Your Regex here
const regex = /(?:\b(?:class|className)?\s*=\s*{?[\"\']([_a-zA-Z0-9\s\-\:/]+)[\"\']}?)/
const classWrapperRegex = new RegExp(regex, 'gi')

let classWrapper
while ((classWrapper = classWrapperRegex.exec(editorText)) !== null) {
  const wrapperMatch = classWrapper[0]
  const valueMatchIndex = classWrapper.findIndex((match, idx) => idx !== 0 && match)
  const valueMatch = classWrapper[valueMatchIndex]

  console.log('classWrapper', classWrapper)
  console.log('wrapperMatch', wrapperMatch)
  console.log('valueMatchIndex', valueMatchIndex)
  console.log('valueMatch', valueMatch)
}

The result of valueMatch should be the class text exactly, with no other characters.

Good example value: valueMatch w-64 h-full bg-blue-400 relative

Note: Changes made to Tailwind Raw Reorder's JSON configuration options may not take effect immediately. When experimenting with custom classRegex, after each change you should open the control pallete (Ctrl/Cmd + Shift + P) and run Developer: Reload Window to ensure changes are applied.

---

tailwind-raw-reorder.IgnoreConfigNotFound:

Tailwind Raw Reorder will show an error message by default, Tailwind Raw Reorder: Tailwind config not found if tailwind.config.* is missing. This can be toggled on to hide and off to show the error message.

"tailwind-raw-reorder.IgnoreConfigNotFound": true

tailwind-raw-reorder.runOnSave:

Tailwind Raw Reorder will run on save by default (if a tailwind.config.* file is present within your working directory). This can be toggled on or off.

"tailwind-raw-reorder.runOnSave": false

tailwind-raw-reorder.tailwindConfigPath:

Tailwind Raw Reorder will look for a tailwind.config.* file within your working directory by default. This can be customized to look for a tailwind.config.* file in a different location. You can use a relative path from the workspace root or an absolute path. You will need to reload the window after changing this setting.

"tailwind-raw-reorder.tailwindConfigPath": "path/to/tailwind.config.js"

Contributing

Tailwind Raw Reorder is open-source and contributions are always welcome. If you're interested in submitting a pull request, please take a moment to review CONTRIBUTING.md.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Forked from [heybourn/headwind]

This project was forked from [heybourn/headwind] to continue development. Old repo is inactive as of 2023 Oct 6th.

Thanks to all the contributors of the original project.

License

Tailwind Raw Reorder is open-source software licensed under the MIT license.