-
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
Extend of peer
tailwind class but with +
(first next sibling). Original peer
class is for ~
(every following sibling).
Made with ❤️ by Alokai team and contributors.
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.
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]
};
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>
Make sure to check out StorefrontUI! Read the documentation at https://docs.storefrontui.io/v2/ 🚀