OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Automatic splitting of long Tailwind strings in VSCode

  • Thread starter Thread starter Igniter
  • Start date Start date
I

Igniter

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

Code:
<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:

Code:
<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?
<p>I'm looking for a neat way to split this Mississippi River:</p>
<pre class="lang-js prettyprint-override"><code><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)}
/>
</code></pre>
<p>into something more digestible when scrolling through big repos.<br />
Currently I'm using this approach for splitting strings:</p>
<pre class="lang-js prettyprint-override"><code><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)}
/>
</code></pre>
<p>But there should be more convenient way, so how do you handle long rules, fellow Tailwinders?</p>
Continue reading...
 
Top