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

#TechForUkraine

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>