Tailwind is cool, but it’s hard to edit strings.

Instead, use classnames to split them while editing.

className={cx([
  'font-bold',
  'leading-10',
  'mb-2',
  'mr-0',
  'mt-2',
  'text-3xl-large',
  'tightest',

  'md:col-start-1',
  'md:row-start-1',
  'md:self-end',
  'md:mb-0',

  'xl:self-start',
  'xl:mt-0',
])}

When you’re done, convert them to a string.

className="font-bold leading-10 mb-2 md:col-start-1 md:mb-0 md:row-start-1 md:self-end mr-0 mt-2 text-3xl-large tightest xl:mt-0 xl:self-start"

You can write a webpack plugin or, if you have things to do, use a Vim macro.

f[v%:s/\%V\/\/.*//ge^Mvi[:sort u<cr>va[Jva[:s/\%V', '/ /g^MV:s/\%V{cx(\[ '/"^MV:s/\%V', ])}/"^M:w^M

The ^M above are actually the CR. I just added them separately here cause I can’t get MD to work with it. http://vimdoc.sourceforge.net/htmldoc/digraph.html#digraph-table

Explanation

  • f[ - find the next [
  • v% - visually select […]
  • :s/\%V\/\/.*//ge^M - delete //..., ignoring unfound
  • vi[ - select inside […]
  • :sort u^M - sort uniquely
  • va[ - visually select […]
  • J - join into one line
  • va[ - visually select […] (redundant, but 🤷‍♂️
  • :s/\%V', '/ /g^M - substitute in selection, essentially joining array into string
  • V - select the line
  • :s/\%V{cx(\[ '/"^M - replace the first part
  • V - select the line
  • :s/\%V', ])}/"^M - replace the end
  • :w^M - write file