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

Instead, use classnames to split them while editing.




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


  • 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