@storefront-ui/tw-plugin-peer-next

`peer-next` class for first next sibling.

---

#TechForUkraine

Russia’s military aggression against Ukraine.

How can you support Ukrainian civil society?

All help is needed. If you are not able to help locally, by sheltering a fellow Ukrainian, you can also:

• Support the Ukraine Armed forces directly by sending funding to the special accounts.
  NBU Special Account to Raise Funds for Ukraine’s Armed Forces
• Help the ICRC (Red Cross) with donations.
  Ukrainian Red Cross Society
• Donate to the United Help Ukraine.
  United Help Ukraine
• Donate to Voices of Children
  Voices of Children

---

SF Typography

Extend of peer tailwind class but with + (first next sibling). Original peer class is for ~ (every following sibling).

Made with ❤️ by Vue Storefront team and contributors.

Why?

Targeting next siblings with ~ is not suitable for HTML structure when pairing input and label, every label after changed input will also change. Of course we can wrap such groups but having in mind how browser works, nesting and making deeper HTML structure does affect performance of rendering HTML by browser.

Installation

npm install --save-dev @storefront-ui/tw-plugin-peer-next

// tailwind.config.ts

import sfPeerNext from '@storefront-ui/tw-plugin-peer-next';

export default {
  content: ['your-components-source-directory/*.ts'],
  plugins: [sfPeerNext]
};

How to use it

Plugin extends Tailwindcss peer class and allows to use it as an adjacent sibling combinator.

<form>
  <label class="block">
    <span class="block text-sm font-medium text-slate-700">Email</span>
    <input type="email" class="peer-next ..."/>
    <p class="invisible mt-2 text-sm text-pink-600 peer-next-invalid:visible">
      Please provide a valid email address.
    </p>
  </label>
</form>

Looking for a library to accelerate your ecommerce development?

Make sure to check out StorefrontUI! Read the documentation at https://docs.storefrontui.io/v2/ 🚀