@storefront-ui/tw-plugin-peer-next v2.3.3
#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>
Looking for a library to accelerate your ecommerce development?
Make sure to check out StorefrontUI! Read the documentation at https://docs.storefrontui.io/v2/ 🚀
3 days ago
1 month ago
11 months ago
11 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago