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