Widely available
This feature is well established and works across many devices and browser versions.
Chrome
Edge
Firefox
Safari
py-0padding-block: 0;py-1padding-block: .25rem;py-2padding-block: .5rem;py-3padding-block: .75rem;py-4padding-block: 1rem;py-5padding-block: 1.25rem;py-6padding-block: 1.5rem;py-7padding-block: 1.75rem;py-8padding-block: 2rem;py-9padding-block: 2.25rem;py-10padding-block: 2.5rem;py-11padding-block: 2.75rem;py-12padding-block: 3rem;py-13padding-block: 3.25rem;py-14padding-block: 3.5rem;py-15padding-block: 3.75rem;py-16padding-block: 4rem;py-17padding-block: 4.25rem;py-18padding-block: 4.5rem;py-19padding-block: 4.75rem;py-20padding-block: 5rem;py-21padding-block: 5.25rem;py-22padding-block: 5.5rem;py-23padding-block: 5.75rem;py-24padding-block: 6rem;py-25padding-block: 6.25rem;py-26padding-block: 6.5rem;py-27padding-block: 6.75rem;py-28padding-block: 7rem;py-29padding-block: 7.25rem;py-30padding-block: 7.5rem;py-31padding-block: 7.75rem;py-32padding-block: 8rem;py-33padding-block: 8.25rem;py-34padding-block: 8.5rem;py-35padding-block: 8.75rem;py-36padding-block: 9rem;py-37padding-block: 9.25rem;py-38padding-block: 9.5rem;py-39padding-block: 9.75rem;py-40padding-block: 10rem;py-41padding-block: 10.25rem;py-42padding-block: 10.5rem;py-43padding-block: 10.75rem;py-44padding-block: 11rem;py-45padding-block: 11.25rem;py-46padding-block: 11.5rem;py-47padding-block: 11.75rem;py-48padding-block: 12rem;py-49padding-block: 12.25rem;py-50padding-block: 12.5rem;py-51padding-block: 12.75rem;py-52padding-block: 13rem;py-53padding-block: 13.25rem;py-54padding-block: 13.5rem;py-55padding-block: 13.75rem;py-56padding-block: 14rem;py-57padding-block: 14.25rem;py-58padding-block: 14.5rem;py-59padding-block: 14.75rem;py-60padding-block: 15rem;py-61padding-block: 15.25rem;py-62padding-block: 15.5rem;py-63padding-block: 15.75rem;py-64padding-block: 16rem;py-65padding-block: 16.25rem;py-66padding-block: 16.5rem;py-67padding-block: 16.75rem;py-68padding-block: 17rem;py-69padding-block: 17.25rem;py-70padding-block: 17.5rem;py-71padding-block: 17.75rem;py-72padding-block: 18rem;py-73padding-block: 18.25rem;py-74padding-block: 18.5rem;py-75padding-block: 18.75rem;py-76padding-block: 19rem;py-77padding-block: 19.25rem;py-78padding-block: 19.5rem;py-79padding-block: 19.75rem;py-80padding-block: 20rem;py-81padding-block: 20.25rem;py-82padding-block: 20.5rem;py-83padding-block: 20.75rem;py-84padding-block: 21rem;py-85padding-block: 21.25rem;py-86padding-block: 21.5rem;py-87padding-block: 21.75rem;py-88padding-block: 22rem;py-89padding-block: 22.25rem;py-90padding-block: 22.5rem;py-91padding-block: 22.75rem;py-92padding-block: 23rem;py-93padding-block: 23.25rem;py-94padding-block: 23.5rem;py-95padding-block: 23.75rem;py-96padding-block: 24rem;py-97padding-block: 24.25rem;py-98padding-block: 24.5rem;py-99padding-block: 24.75rem;py-100padding-block: 25rem;py-101padding-block: 25.25rem;py-102padding-block: 25.5rem;py-103padding-block: 25.75rem;py-104padding-block: 26rem;py-105padding-block: 26.25rem;py-106padding-block: 26.5rem;py-107padding-block: 26.75rem;py-108padding-block: 27rem;py-109padding-block: 27.25rem;py-110padding-block: 27.5rem;py-111padding-block: 27.75rem;py-112padding-block: 28rem;py-113padding-block: 28.25rem;py-114padding-block: 28.5rem;py-115padding-block: 28.75rem;py-116padding-block: 29rem;py-117padding-block: 29.25rem;py-118padding-block: 29.5rem;py-119padding-block: 29.75rem;py-120padding-block: 30rem;py-121padding-block: 30.25rem;py-122padding-block: 30.5rem;py-123padding-block: 30.75rem;py-124padding-block: 31rem;py-125padding-block: 31.25rem;py-126padding-block: 31.5rem;py-127padding-block: 31.75rem;py-128padding-block: 32rem;py-129padding-block: 32.25rem;py-130padding-block: 32.5rem;py-131padding-block: 32.75rem;py-132padding-block: 33rem;py-133padding-block: 33.25rem;py-134padding-block: 33.5rem;py-135padding-block: 33.75rem;py-136padding-block: 34rem;py-137padding-block: 34.25rem;py-138padding-block: 34.5rem;py-139padding-block: 34.75rem;py-140padding-block: 35rem;py-141padding-block: 35.25rem;py-142padding-block: 35.5rem;py-143padding-block: 35.75rem;py-144padding-block: 36rem;py-145padding-block: 36.25rem;py-146padding-block: 36.5rem;py-147padding-block: 36.75rem;py-148padding-block: 37rem;py-149padding-block: 37.25rem;py-150padding-block: 37.5rem;py-151padding-block: 37.75rem;py-152padding-block: 38rem;py-153padding-block: 38.25rem;py-154padding-block: 38.5rem;py-155padding-block: 38.75rem;py-156padding-block: 39rem;py-157padding-block: 39.25rem;py-158padding-block: 39.5rem;py-159padding-block: 39.75rem;py-160padding-block: 40rem;py-161padding-block: 40.25rem;py-162padding-block: 40.5rem;py-163padding-block: 40.75rem;py-164padding-block: 41rem;py-165padding-block: 41.25rem;py-166padding-block: 41.5rem;py-167padding-block: 41.75rem;py-168padding-block: 42rem;py-169padding-block: 42.25rem;py-170padding-block: 42.5rem;py-171padding-block: 42.75rem;py-172padding-block: 43rem;py-173padding-block: 43.25rem;py-174padding-block: 43.5rem;py-175padding-block: 43.75rem;py-176padding-block: 44rem;py-177padding-block: 44.25rem;py-178padding-block: 44.5rem;py-179padding-block: 44.75rem;py-180padding-block: 45rem;py-181padding-block: 45.25rem;py-182padding-block: 45.5rem;py-183padding-block: 45.75rem;py-184padding-block: 46rem;py-185padding-block: 46.25rem;py-186padding-block: 46.5rem;py-187padding-block: 46.75rem;py-188padding-block: 47rem;py-189padding-block: 47.25rem;py-190padding-block: 47.5rem;py-191padding-block: 47.75rem;py-192padding-block: 48rem;py-193padding-block: 48.25rem;py-194padding-block: 48.5rem;py-195padding-block: 48.75rem;py-196padding-block: 49rem;py-197padding-block: 49.25rem;py-198padding-block: 49.5rem;py-199padding-block: 49.75rem;py-200padding-block: 50rem;py-201padding-block: 50.25rem;py-202padding-block: 50.5rem;py-203padding-block: 50.75rem;py-204padding-block: 51rem;py-205padding-block: 51.25rem;py-206padding-block: 51.5rem;py-207padding-block: 51.75rem;py-208padding-block: 52rem;py-209padding-block: 52.25rem;py-210padding-block: 52.5rem;py-211padding-block: 52.75rem;py-212padding-block: 53rem;py-213padding-block: 53.25rem;py-214padding-block: 53.5rem;py-215padding-block: 53.75rem;py-216padding-block: 54rem;py-217padding-block: 54.25rem;py-218padding-block: 54.5rem;py-219padding-block: 54.75rem;py-220padding-block: 55rem;py-221padding-block: 55.25rem;py-222padding-block: 55.5rem;py-223padding-block: 55.75rem;py-224padding-block: 56rem;py-225padding-block: 56.25rem;py-226padding-block: 56.5rem;py-227padding-block: 56.75rem;py-228padding-block: 57rem;py-229padding-block: 57.25rem;py-230padding-block: 57.5rem;py-231padding-block: 57.75rem;py-232padding-block: 58rem;py-233padding-block: 58.25rem;py-234padding-block: 58.5rem;py-235padding-block: 58.75rem;py-236padding-block: 59rem;py-237padding-block: 59.25rem;py-238padding-block: 59.5rem;py-239padding-block: 59.75rem;py-240padding-block: 60rem;py-241padding-block: 60.25rem;py-242padding-block: 60.5rem;py-243padding-block: 60.75rem;py-244padding-block: 61rem;py-245padding-block: 61.25rem;py-246padding-block: 61.5rem;py-247padding-block: 61.75rem;py-248padding-block: 62rem;py-249padding-block: 62.25rem;py-250padding-block: 62.5rem;py-251padding-block: 62.75rem;py-252padding-block: 63rem;py-253padding-block: 63.25rem;py-254padding-block: 63.5rem;py-255padding-block: 63.75rem;py-256padding-block: 64rem;py-257padding-block: 64.25rem;py-258padding-block: 64.5rem;py-259padding-block: 64.75rem;py-260padding-block: 65rem;py-261padding-block: 65.25rem;py-262padding-block: 65.5rem;py-263padding-block: 65.75rem;py-264padding-block: 66rem;py-265padding-block: 66.25rem;py-266padding-block: 66.5rem;py-267padding-block: 66.75rem;py-268padding-block: 67rem;py-269padding-block: 67.25rem;py-270padding-block: 67.5rem;py-271padding-block: 67.75rem;py-272padding-block: 68rem;py-273padding-block: 68.25rem;py-274padding-block: 68.5rem;py-275padding-block: 68.75rem;py-276padding-block: 69rem;py-277padding-block: 69.25rem;py-278padding-block: 69.5rem;py-279padding-block: 69.75rem;py-280padding-block: 70rem;py-281padding-block: 70.25rem;py-282padding-block: 70.5rem;py-283padding-block: 70.75rem;py-284padding-block: 71rem;py-285padding-block: 71.25rem;py-286padding-block: 71.5rem;py-287padding-block: 71.75rem;py-288padding-block: 72rem;py-289padding-block: 72.25rem;py-290padding-block: 72.5rem;py-291padding-block: 72.75rem;py-292padding-block: 73rem;py-293padding-block: 73.25rem;py-294padding-block: 73.5rem;py-295padding-block: 73.75rem;py-296padding-block: 74rem;py-297padding-block: 74.25rem;py-298padding-block: 74.5rem;py-299padding-block: 74.75rem;py-300padding-block: 75rem;py-301padding-block: 75.25rem;py-302padding-block: 75.5rem;py-303padding-block: 75.75rem;py-304padding-block: 76rem;py-305padding-block: 76.25rem;py-306padding-block: 76.5rem;py-307padding-block: 76.75rem;py-308padding-block: 77rem;py-309padding-block: 77.25rem;py-310padding-block: 77.5rem;py-311padding-block: 77.75rem;py-312padding-block: 78rem;py-313padding-block: 78.25rem;py-314padding-block: 78.5rem;py-315padding-block: 78.75rem;py-316padding-block: 79rem;py-317padding-block: 79.25rem;py-318padding-block: 79.5rem;py-319padding-block: 79.75rem;py-320padding-block: 80rem;py-321padding-block: 80.25rem;py-322padding-block: 80.5rem;py-323padding-block: 80.75rem;py-324padding-block: 81rem;py-325padding-block: 81.25rem;py-326padding-block: 81.5rem;py-327padding-block: 81.75rem;py-328padding-block: 82rem;py-329padding-block: 82.25rem;py-330padding-block: 82.5rem;py-331padding-block: 82.75rem;py-332padding-block: 83rem;py-333padding-block: 83.25rem;py-334padding-block: 83.5rem;py-335padding-block: 83.75rem;py-336padding-block: 84rem;py-337padding-block: 84.25rem;py-338padding-block: 84.5rem;py-339padding-block: 84.75rem;py-340padding-block: 85rem;py-341padding-block: 85.25rem;py-342padding-block: 85.5rem;py-343padding-block: 85.75rem;py-344padding-block: 86rem;py-345padding-block: 86.25rem;py-346padding-block: 86.5rem;py-347padding-block: 86.75rem;py-348padding-block: 87rem;py-349padding-block: 87.25rem;py-350padding-block: 87.5rem;py-351padding-block: 87.75rem;py-352padding-block: 88rem;py-353padding-block: 88.25rem;py-354padding-block: 88.5rem;py-355padding-block: 88.75rem;py-356padding-block: 89rem;py-357padding-block: 89.25rem;py-358padding-block: 89.5rem;py-359padding-block: 89.75rem;py-360padding-block: 90rem;py-361padding-block: 90.25rem;py-362padding-block: 90.5rem;py-363padding-block: 90.75rem;py-364padding-block: 91rem;py-365padding-block: 91.25rem;py-366padding-block: 91.5rem;py-367padding-block: 91.75rem;py-368padding-block: 92rem;py-369padding-block: 92.25rem;py-370padding-block: 92.5rem;py-371padding-block: 92.75rem;py-372padding-block: 93rem;py-373padding-block: 93.25rem;py-374padding-block: 93.5rem;py-375padding-block: 93.75rem;py-376padding-block: 94rem;py-377padding-block: 94.25rem;py-378padding-block: 94.5rem;py-379padding-block: 94.75rem;py-380padding-block: 95rem;py-381padding-block: 95.25rem;py-382padding-block: 95.5rem;py-383padding-block: 95.75rem;py-384padding-block: 96rem;py-autopadding-block: auto;py-pxpadding-block: 1px;Responsiveness
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
Target viewport sizes with breakpoint prefixes.
@sm:py-(value)Small≥640px
@md:py-(value)Medium≥768px
@lg:py-(value)Large≥1024px
@xxl:py-(value)Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:py-(value)