Automatic splitting of long Tailwind strings in VSCode-CodePudding

I'm looking for a neat way to split this Mississippi River:

<input
  value={props.profile.get('email') ?? ''}
  placeholder="Email Address"
  className="z-10 flex-shrink-0 w-12 h-12 px-3 py-1 rounded-lg border border-gray-300 placeholder-gray-300 focus:outline-none focus:ring-[5px] focus:ring-indigo-100 focus:border focus:border-indigo-400 hover:outline-none hover:ring-[5px] hover:ring-indigo-100 hover:border hover:border-indigo-200 transform-gpu transition-all duration-50"
  onChange={e => props.updateProfile('email', e.currentTarget.value)}
/>

into something more digestible when scrolling through big repos.
Currently I'm using this approach for splitting strings:

<input
  value={props.profile.get('email') ?? ''}
  placeholder="Email Address"
  className={classNames(
    "z-10 block w-full h-12 px-3 py-1 rounded-lg border border-gray-300 placeholder-gray-300",
    "focus:outline-none focus:ring-[5px] focus:ring-indigo-100 focus:border focus:border-indigo-400",
    "hover:outline-none hover:ring-[5px] hover:ring-indigo-100 hover:border hover:border-indigo-200",
    "transform-gpu transition-all duration-50",
  )}
  onChange={e => props.updateProfile('email', e.currentTarget.value)}
/>

But there should be more convenient way, so how do you handle long rules, fellow Tailwinders?

CodePudding user response：

The only way out of this is using twin.macro, but even then the long rules will be pretty much the same.

CodePudding user response：

I'd bundle these into logical groups if I were you and put them in a common file:

styles.js:

const form = 'block h-12 px-3 py-1 focus:outline-none focus: ....';
const button = 'rounded-lg border border-gray-300';

Your file then becomes:

import { form, button, input, grey } from 'styles';

...
classNames(`${form} ${button} ${input} ${grey}`)