Estoy buscando una forma ordenada de dividir este río Mississippi:
<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)} /> en algo más digerible cuando se desplaza a través de grandes repositorios.
Actualmente estoy usando este enfoque para dividir cadenas:
<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)} />Pero debería haber una forma más conveniente, entonces, ¿cómo manejan las reglas largas, compañeros Tailwinders?
La única forma de salir de esto es usar twin.macro , pero incluso entonces las reglas largas serán más o menos las mismas.
Los agruparía en grupos lógicos si fuera usted y los pondría en un archivo común:
styles.js :
const form = 'block h-12 px-3 py-1 focus:outline-none focus: ....'; const button = 'rounded-lg border border-gray-300';Su archivo entonces se convierte en:
import { form, button, input, grey } from 'styles'; ... classNames(`${form} ${button} ${input} ${grey}`)