Styles Demo for Tailwind

Below are some commonly-used style classes in Tailwind and what they look like when rendered.

Tailwind Documentation

Aspect Ratio

  • aspect-auto, aspect-ratio: auto

  • aspect-square, aspect-ratio: 1 / 1

  • aspect-video, aspect-ratio: 16 / 9

Border Radius

Based on browser default font-size of 16px

Border on all sides

  • rounded-none, 0px

  • rounded-sm, 0.125rem / 2px

  • rounded, 0.25rem / 4px

  • rounded-md, 0.375rem / 6px

  • rounded-mg, 0.5rem / 8px

  • rounded-xl, 0.75rem / 12px

  • rounded-2xl, 1rem / 16px

  • rounded-3xl, 1.5rem / 24px

  • rounded-full, 9999px

Border on top left and top right

Back to top of section

  • rounded-t-none, 0px

  • rounded-t-sm, 0.125rem / 2px

  • rounded-t, 0.25rem / 4px

  • rounded-t-md, 0.375rem / 6px

  • rounded-t-mg, 0.5rem / 8px

  • rounded-t-xl, 0.75rem / 12px

  • rounded-t-2xl, 1rem / 16px

  • rounded-t-3xl, 1.5rem / 24px

  • rounded-t-full, 9999px

Border on right side

Back to top of section

  • rounded-r-none, 0px

  • rounded-r-sm, 0.125rem / 2px

  • rounded-r, 0.25rem / 4px

  • rounded-r-md, 0.375rem / 6px

  • rounded-r-mg, 0.5rem / 8px

  • rounded-r-xl, 0.75rem / 12px

  • rounded-r-2xl, 1rem / 16px

  • rounded-r-3xl, 1.5rem / 24px

  • rounded-r-full, 9999px

Border on bottom right and left sides

Back to top of section

  • rounded-b-none, 0px

  • rounded-b-sm, 0.125rem / 2px

  • rounded-b, 0.25rem / 4px

  • rounded-b-md, 0.375rem / 6px

  • rounded-b-mg, 0.5rem / 8px

  • rounded-b-xl, 0.75rem / 12px

  • rounded-b-2xl, 1rem / 16px

  • rounded-b-3xl, 1.5rem / 24px

  • rounded-b-full, 9999px

Border on left side

Back to top of section

  • rounded-l-none, 0px

  • rounded-l-sm, 0.125rem / 2px

  • rounded-l, 0.25rem / 4px

  • rounded-l-md, 0.375rem / 6px

  • rounded-l-mg, 0.5rem / 8px

  • rounded-l-xl, 0.75rem / 12px

  • rounded-l-2xl, 1rem / 16px

  • rounded-l-3xl, 1.5rem / 24px

  • rounded-l-full, 9999px

Border on top left corner

Back to top of section

  • rounded-tl-none, 0px

  • rounded-tl-sm, 0.125rem / 2px

  • rounded-tl, 0.25rem / 4px

  • rounded-tl-md, 0.375rem / 6px

  • rounded-tl-mg, 0.5rem / 8px

  • rounded-tl-xl, 0.75rem / 12px

  • rounded-tl-2xl, 1rem / 16px

  • rounded-tl-3xl, 1.5rem / 24px

  • rounded-tl-full, 9999px

Border on top right corner

Back to top of section

  • rounded-tr-none, 0px

  • rounded-tr-sm, 0.125rem / 2px

  • rounded-tr, 0.25rem / 4px

  • rounded-tr-md, 0.375rem / 6px

  • rounded-tr-mg, 0.5rem / 8px

  • rounded-tr-xl, 0.75rem / 12px

  • rounded-tr-2xl, 1rem / 16px

  • rounded-tr-3xl, 1.5rem / 24px

  • rounded-tr-full, 9999px

Border on bottom left corner

Back to top of section

  • rounded-bl-none, 0px

  • rounded-bl-sm, 0.125rem / 2px

  • rounded-bl, 0.25rem / 4px

  • rounded-bl-md, 0.375rem / 6px

  • rounded-bl-mg, 0.5rem / 8px

  • rounded-bl-xl, 0.75rem / 12px

  • rounded-bl-2xl, 1rem / 16px

  • rounded-bl-3xl, 1.5rem / 24px

  • rounded-bl-full, 9999px

Border on bottom right corner

Back to top of section

  • rounded-br-none, 0px

  • rounded-br-sm, 0.125rem / 2px

  • rounded-br, 0.25rem / 4px

  • rounded-br-md, 0.375rem / 6px

  • rounded-br-mg, 0.5rem / 8px

  • rounded-br-xl, 0.75rem / 12px

  • rounded-br-2xl, 1rem / 16px

  • rounded-br-3xl, 1.5rem / 24px

  • rounded-br-full, 9999px

Border Style

  • border-solid

  • border-dashed

  • border-dotted

  • border-double

  • border-hidden

  • border-none

Border Width

Based on browser default font-size of 16px

Border on all sides

  • border-0, 0px

  • border, 1px

  • border-2, 2px

  • border-4, 4px

  • border-8, 8px

Border on left and right

Back to top of section

  • border-x-0, 0px

  • border-x, 1px

  • border-x-2, 2px

  • border-x-4, 4px

  • border-x-8, 8px

Border on top and bottom

Back to top of section

  • border-y-0, 0px

  • border-y, 1px

  • border-y-2, 2px

  • border-y-4, 4px

  • border-y-8, 8px

Border on top

Back to top of section

  • border-t-0, 0px

  • border-t, 1px

  • border-t-2, 2px

  • border-t-4, 4px

  • border-t-8, 8px

Border on right

Back to top of section

  • border-r-0, 0px

  • border-r, 1px

  • border-r-2, 2px

  • border-r-4, 4px

  • border-r-8, 8px

Border on bottom

Back to top of section

  • border-b-0, 0px

  • border-b, 1px

  • border-b-2, 2px

  • border-b-4, 4px

  • border-b-8, 8px

Border on left

Back to top of section

  • border-l-0, 0px

  • border-l, 1px

  • border-l-2, 2px

  • border-l-4, 4px

  • border-l-8, 8px

Font Size

Based on browser default font-size of 16px

  • text-[0.67rem], default h6 size in most browsers

  • text-xs, 0.75rem<

  • text-[0.83rem], default h5 size in most browsers

  • text-sm, 0.875rem

  • text-base, also the default h4 size in most browsers

  • text-lg, 1.125rem

  • text-[1.17rem], default h3 size in most broewsers

  • text-xl, 1.25rem

  • text-2xl, 1.5rem - default h2 size in most browsers

  • text-3xl, 1.875rem

  • text-[2rem], default h1 size in most browsers

  • text-4xl, 2.25rem

  • text-5xl, 3rem

  • text-6xl, 3.75rem

  • text-7xl, 4.5rem

  • text-8xl, 6rem

  • text-9xl, 8rem

Font Weight

  • font-thin, font-weight 100

  • font-extralight, font-weight 200

  • font-light, font-weight 300

  • font-normal, font-weight 400

  • font-medium, font-weight 500

  • font-semibold, font-weight 600

  • font-bold, font-weight 700

  • font-extrabold, font-weight 800

  • font-black, font-weight 900

Margin

The text inside each element has a green background color to help show the amount of margin.

Margin on all sides

  • m-0, 0px

  • m-px, 1px

  • m-0.5, 0.125rem, 2px

  • m-1, 0.25rem, 4px

  • m-1.5, 0.375rem, 6px

  • m-2, 0.5rem, 8px

  • m-2.5, 0.625rem, 10px

  • m-3, 0.75rem, 12px

  • m-3.5, 0.875rem, 14px

  • m-4, 1rem, 16px

  • m-5, 1.25rem, 20px

  • m-6, 1.5rem, 24px

  • m-7, 1.75rem, 28px

  • m-8, 2rem, 32px

  • m-9, 2.25rem, 36px

  • m-10, 2.5rem, 40px

  • m-11, 2.75rem, 44px

  • m-12, 3rem, 48px

  • m-14, 3.5rem, 56px

  • m-16, 4rem, 64px

  • m-20, 5rem, 80px

  • m-24, 6rem, 96px

  • m-28, 7rem, 112px

  • m-32, 8rem, 128px

  • m-36, 9rem, 144px

  • m-40, 10rem, 160px

  • m-44, 11rem, 176px

  • m-48, 12rem, 192px

  • m-52, 13rem, 208px

  • m-56, 14rem, 224px

  • m-60, 15rem, 240px

  • m-64, 16rem, 256px

  • m-72, 18rem, 288px

  • m-80, 20rem, 320px

  • m-96, 24rem, 384px

Margin on top side

Back to top of section

  • mt-0, 0px

  • mt-px, 1px

  • mt-0.5, 0.125rem, 2px

  • mt-1, 0.25rem, 4px

  • mt-1.5, 0.375rem, 6px

  • mt-2, 0.5rem, 8px

  • mt-2.5, 0.625rem, 10px

  • mt-3, 0.75rem, 12px

  • mt-3.5, 0.875rem, 14px

  • mt-4, 1rem, 16px

  • mt-5, 1.25rem, 20px

  • mt-6, 1.5rem, 24px

  • mt-7, 1.75rem, 28px

  • mt-8, 2rem, 32px

  • mt-9, 2.25rem, 36px

  • mt-10, 2.5rem, 40px

  • mt-11, 2.75rem, 44px

  • mt-12, 3rem, 48px

  • mt-14, 3.5rem, 56px

  • mt-16, 4rem, 64px

  • mt-20, 5rem, 80px

  • mt-24, 6rem, 96px

  • mt-28, 7rem, 112px

  • mt-32, 8rem, 128px

  • mt-36, 9rem, 144px

  • mt-40, 10rem, 160px

  • mt-44, 11rem, 176px

  • mt-48, 12rem, 192px

  • mt-52, 13rem, 208px

  • mt-56, 14rem, 224px

  • mt-60, 15rem, 240px

  • mt-64, 16rem, 256px

  • mt-72, 18rem, 288px

  • mt-80, 20rem, 320px

  • mt-96, 24rem, 384px

Margin on bottom side

Back to top of section

  • mb-0, 0px

  • mb-px, 1px

  • mb-0.5, 0.125rem, 2px

  • mb-1, 0.25rem, 4px

  • mb-1.5, 0.375rem, 6px

  • mb-2, 0.5rem, 8px

  • mb-2.5, 0.625rem, 10px

  • mb-3, 0.75rem, 12px

  • mb-3.5, 0.875rem, 14px

  • mb-4, 1rem, 16px

  • mb-5, 1.25rem, 20px

  • mb-6, 1.5rem, 24px

  • mb-7, 1.75rem, 28px

  • mb-8, 2rem, 32px

  • mb-9, 2.25rem, 36px

  • mb-10, 2.5rem, 40px

  • mb-11, 2.75rem, 44px

  • mb-12, 3rem, 48px

  • mb-14, 3.5rem, 56px

  • mb-16, 4rem, 64px

  • mb-20, 5rem, 80px

  • mb-24, 6rem, 96px

  • mb-28, 7rem, 112px

  • mb-32, 8rem, 128px

  • mb-36, 9rem, 144px

  • mb-40, 10rem, 160px

  • mb-44, 11rem, 176px

  • mb-48, 12rem, 192px

  • mb-52, 13rem, 208px

  • mb-56, 14rem, 224px

  • mb-60, 15rem, 240px

  • mb-64, 16rem, 256px

  • mb-72, 18rem, 288px

  • mb-80, 20rem, 320px

  • mb-96, 24rem, 384px

Margin on left side

Back to top of section

  • ml-0, 0px

  • ml-px, 1px

  • ml-0.5, 0.125rem, 2px

  • ml-1, 0.25rem, 4px

  • ml-1.5, 0.375rem, 6px

  • ml-2, 0.5rem, 8px

  • ml-2.5, 0.625rem, 10px

  • ml-3, 0.75rem, 12px

  • ml-3.5, 0.875rem, 14px

  • ml-4, 1rem, 16px

  • ml-5, 1.25rem, 20px

  • ml-6, 1.5rem, 24px

  • ml-7, 1.75rem, 28px

  • ml-8, 2rem, 32px

  • ml-9, 2.25rem, 36px

  • ml-10, 2.5rem, 40px

  • ml-11, 2.75rem, 44px

  • ml-12, 3rem, 48px

  • ml-14, 3.5rem, 56px

  • ml-16, 4rem, 64px

  • ml-20, 5rem, 80px

  • ml-24, 6rem, 96px

  • ml-28, 7rem, 112px

  • ml-32, 8rem, 128px

  • ml-36, 9rem, 144px

  • ml-40, 10rem, 160px

  • ml-44, 11rem, 176px

  • ml-48, 12rem, 192px

  • ml-52, 13rem, 208px

  • ml-56, 14rem, 224px

  • ml-60, 15rem, 240px

  • ml-64, 16rem, 256px

  • ml-72, 18rem, 288px

  • ml-80, 20rem, 320px

  • ml-96, 24rem, 384px

Margin on right side

Back to top of section

  • mr-0, 0px

  • mr-px, 1px

  • mr-0.5, 0.125rem, 2px

  • mr-1, 0.25rem, 4px

  • mr-1.5, 0.375rem, 6px

  • mr-2, 0.5rem, 8px

  • mr-2.5, 0.625rem, 10px

  • mr-3, 0.75rem, 12px

  • mr-3.5, 0.875rem, 14px

  • mr-4, 1rem, 16px

  • mr-5, 1.25rem, 20px

  • mr-6, 1.5rem, 24px

  • mr-7, 1.75rem, 28px

  • mr-8, 2rem, 32px

  • mr-9, 2.25rem, 36px

  • mr-10, 2.5rem, 40px

  • mr-11, 2.75rem, 44px

  • mr-12, 3rem, 48px

  • mr-14, 3.5rem, 56px

  • mr-16, 4rem, 64px

  • mr-20, 5rem, 80px

  • mr-24, 6rem, 96px

  • mr-28, 7rem, 112px

  • mr-32, 8rem, 128px

  • mr-36, 9rem, 144px

  • mr-40, 10rem, 160px

  • mr-44, 11rem, 176px

  • mr-48, 12rem, 192px

  • mr-52, 13rem, 208px

  • mr-56, 14rem, 224px

  • mr-60, 15rem, 240px

  • mr-64, 16rem, 256px

  • mr-72, 18rem, 288px

  • mr-80, 20rem, 320px

  • mr-96, 24rem, 384px

Margin on left and right sides

Back to top of section

  • mx-0, 0px

  • mx-px, 1px

  • mx-0.5, 0.125rem, 2px

  • mx-1, 0.25rem, 4px

  • mx-1.5, 0.375rem, 6px

  • mx-2, 0.5rem, 8px

  • mx-2.5, 0.625rem, 10px

  • mx-3, 0.75rem, 12px

  • mx-3.5, 0.875rem, 14px

  • mx-4, 1rem, 16px

  • mx-5, 1.25rem, 20px

  • mx-6, 1.5rem, 24px

  • mx-7, 1.75rem, 28px

  • mx-8, 2rem, 32px

  • mx-9, 2.25rem, 36px

  • mx-10, 2.5rem, 40px

  • mx-11, 2.75rem, 44px

  • mx-12, 3rem, 48px

  • mx-14, 3.5rem, 56px

  • mx-16, 4rem, 64px

  • mx-20, 5rem, 80px

  • mx-24, 6rem, 96px

  • mx-28, 7rem, 112px

  • mx-32, 8rem, 128px

  • mx-36, 9rem, 144px

  • mx-40, 10rem, 160px

  • mx-44, 11rem, 176px

  • mx-48, 12rem, 192px

  • mx-52, 13rem, 208px

  • mx-56, 14rem, 224px

  • mx-60, 15rem, 240px

  • mx-64, 16rem, 256px

  • mx-72, 18rem, 288px

  • mx-80, 20rem, 320px

  • mx-96, 24rem, 384px

Margin on top and bottom sides

Back to top of section

  • my-0, 0px

  • my-px, 1px

  • my-0.5, 0.125rem, 2px

  • my-1, 0.25rem, 4px

  • my-1.5, 0.375rem, 6px

  • my-2, 0.5rem, 8px

  • my-2.5, 0.625rem, 10px

  • my-3, 0.75rem, 12px

  • my-3.5, 0.875rem, 14px

  • my-4, 1rem, 16px

  • my-5, 1.25rem, 20px

  • my-6, 1.5rem, 24px

  • my-7, 1.75rem, 28px

  • my-8, 2rem, 32px

  • my-9, 2.25rem, 36px

  • my-10, 2.5rem, 40px

  • my-11, 2.75rem, 44px

  • my-12, 3rem, 48px

  • my-14, 3.5rem, 56px

  • my-16, 4rem, 64px

  • my-20, 5rem, 80px

  • my-24, 6rem, 96px

  • my-28, 7rem, 112px

  • my-32, 8rem, 128px

  • my-36, 9rem, 144px

  • my-40, 10rem, 160px

  • my-44, 11rem, 176px

  • my-48, 12rem, 192px

  • my-52, 13rem, 208px

  • my-56, 14rem, 224px

  • my-60, 15rem, 240px

  • my-64, 16rem, 256px

  • my-72, 18rem, 288px

  • my-80, 20rem, 320px

  • my-96, 24rem, 384px

Outline Offset

The text inside each element has a green background color to help show the outline.

  • outline-offset-0, outline-offset: 0px

  • outline-offset-1, outline-offset: 1px

  • outline-offset-2, outline-offset: 2px

  • outline-offset-4, outline-offset: 4px

  • outline-offset-8, outline-offset: 8px

Outline Style

The text inside each element has a green background color to help show the outline.

  • outline-none

  • outline

  • outline-dashed

  • outline-dotted

  • outline-double

Outline Width

The text inside each element has a green background color to help show the outline.

  • outline-0, outline-width: 0px

  • outline-1, outline-width: 1px

  • outline-2, outline-width: 2px

  • outline-4, outline-width: 4px

  • outline-8, outline-width: 8px

Padding

The text inside each element has a green background color to help show the amount of padding.

Padding on all sides

  • p-0, 0px

  • p-px, 1px

  • p-0.5, 0.125rem, 2px

  • p-1, 0.25rem, 4px

  • p-1.5, 0.375rem, 6px

  • p-2, 0.5rem, 8px

  • p-2.5, 0.625rem, 10px

  • p-3, 0.75rem, 12px

  • p-3.5, 0.875rem, 14px

  • p-4, 1rem, 16px

  • p-5, 1.25rem, 20px

  • p-6, 1.5rem, 24px

  • p-7, 1.75rem, 28px

  • p-8, 2rem, 32px

  • p-9, 2.25rem, 36px

  • p-10, 2.5rem, 40px

  • p-11, 2.75rem, 44px

  • p-12, 3rem, 48px

  • p-14, 3.5rem, 56px

  • p-16, 4rem, 64px

  • p-20, 5rem, 80px

  • p-24, 6rem, 96px

  • p-28, 7rem, 112px

  • p-32, 8rem, 128px

  • p-36, 9rem, 144px

  • p-40, 10rem, 160px

  • p-44, 11rem, 176px

  • p-48, 12rem, 192px

  • p-52, 13rem, 208px

  • p-56, 14rem, 224px

  • p-60, 15rem, 240px

  • p-64, 16rem, 256px

  • p-72, 18rem, 288px

  • p-80, 20rem, 320px

  • p-96, 24rem, 384px

Padding on top side

Back to top of section

  • pt-0, 0px

  • pt-px, 1px

  • pt-0.5, 0.125rem, 2px

  • pt-1, 0.25rem, 4px

  • pt-1.5, 0.375rem, 6px

  • pt-2, 0.5rem, 8px

  • pt-2.5, 0.625rem, 10px

  • pt-3, 0.75rem, 12px

  • pt-3.5, 0.875rem, 14px

  • pt-4, 1rem, 16px

  • pt-5, 1.25rem, 20px

  • pt-6, 1.5rem, 24px

  • pt-7, 1.75rem, 28px

  • pt-8, 2rem, 32px

  • pt-9, 2.25rem, 36px

  • pt-10, 2.5rem, 40px

  • pt-11, 2.75rem, 44px

  • pt-12, 3rem, 48px

  • pt-14, 3.5rem, 56px

  • pt-16, 4rem, 64px

  • pt-20, 5rem, 80px

  • pt-24, 6rem, 96px

  • pt-28, 7rem, 112px

  • pt-32, 8rem, 128px

  • pt-36, 9rem, 144px

  • pt-40, 10rem, 160px

  • pt-44, 11rem, 176px

  • pt-48, 12rem, 192px

  • pt-52, 13rem, 208px

  • pt-56, 14rem, 224px

  • pt-60, 15rem, 240px

  • pt-64, 16rem, 256px

  • pt-72, 18rem, 288px

  • pt-80, 20rem, 320px

  • pt-96, 24rem, 384px

Padding on bottom side

Back to top of section

  • pb-0, 0px

  • pb-px, 1px

  • pb-0.5, 0.125rem, 2px

  • pb-1, 0.25rem, 4px

  • pb-1.5, 0.375rem, 6px

  • pb-2, 0.5rem, 8px

  • pb-2.5, 0.625rem, 10px

  • pb-3, 0.75rem, 12px

  • pb-3.5, 0.875rem, 14px

  • pb-4, 1rem, 16px

  • pb-5, 1.25rem, 20px

  • pb-6, 1.5rem, 24px

  • pb-7, 1.75rem, 28px

  • pb-8, 2rem, 32px

  • pb-9, 2.25rem, 36px

  • pb-10, 2.5rem, 40px

  • pb-11, 2.75rem, 44px

  • pb-12, 3rem, 48px

  • pb-14, 3.5rem, 56px

  • pb-16, 4rem, 64px

  • pb-20, 5rem, 80px

  • pb-24, 6rem, 96px

  • pb-28, 7rem, 112px

  • pb-32, 8rem, 128px

  • pb-36, 9rem, 144px

  • pb-40, 10rem, 160px

  • pb-44, 11rem, 176px

  • pb-48, 12rem, 192px

  • pb-52, 13rem, 208px

  • pb-56, 14rem, 224px

  • pb-60, 15rem, 240px

  • pb-64, 16rem, 256px

  • pb-72, 18rem, 288px

  • pb-80, 20rem, 320px

  • pb-96, 24rem, 384px

Padding on left side

Back to top of section

  • pl-0, 0px

  • pl-px, 1px

  • pl-0.5, 0.125rem, 2px

  • pl-1, 0.25rem, 4px

  • pl-1.5, 0.375rem, 6px

  • pl-2, 0.5rem, 8px

  • pl-2.5, 0.625rem, 10px

  • pl-3, 0.75rem, 12px

  • pl-3.5, 0.875rem, 14px

  • pl-4, 1rem, 16px

  • pl-5, 1.25rem, 20px

  • pl-6, 1.5rem, 24px

  • pl-7, 1.75rem, 28px

  • pl-8, 2rem, 32px

  • pl-9, 2.25rem, 36px

  • pl-10, 2.5rem, 40px

  • pl-11, 2.75rem, 44px

  • pl-12, 3rem, 48px

  • pl-14, 3.5rem, 56px

  • pl-16, 4rem, 64px

  • pl-20, 5rem, 80px

  • pl-24, 6rem, 96px

  • pl-28, 7rem, 112px

  • pl-32, 8rem, 128px

  • pl-36, 9rem, 144px

  • pl-40, 10rem, 160px

  • pl-44, 11rem, 176px

  • pl-48, 12rem, 192px

  • pl-52, 13rem, 208px

  • pl-56, 14rem, 224px

  • pl-60, 15rem, 240px

  • pl-64, 16rem, 256px

  • pl-72, 18rem, 288px

  • pl-80, 20rem, 320px

  • pl-96, 24rem, 384px

Padding on right side

Back to top of section

  • pr-0, 0px

  • pr-px, 1px

  • pr-0.5, 0.125rem, 2px

  • pr-1, 0.25rem, 4px

  • pr-1.5, 0.375rem, 6px

  • pr-2, 0.5rem, 8px

  • pr-2.5, 0.625rem, 10px

  • pr-3, 0.75rem, 12px

  • pr-3.5, 0.875rem, 14px

  • pr-4, 1rem, 16px

  • pr-5, 1.25rem, 20px

  • pr-6, 1.5rem, 24px

  • pr-7, 1.75rem, 28px

  • pr-8, 2rem, 32px

  • pr-9, 2.25rem, 36px

  • pr-10, 2.5rem, 40px

  • pr-11, 2.75rem, 44px

  • pr-12, 3rem, 48px

  • pr-14, 3.5rem, 56px

  • pr-16, 4rem, 64px

  • pr-20, 5rem, 80px

  • pr-24, 6rem, 96px

  • pr-28, 7rem, 112px

  • pr-32, 8rem, 128px

  • pr-36, 9rem, 144px

  • pr-40, 10rem, 160px

  • pr-44, 11rem, 176px

  • pr-48, 12rem, 192px

  • pr-52, 13rem, 208px

  • pr-56, 14rem, 224px

  • pr-60, 15rem, 240px

  • pr-64, 16rem, 256px

  • pr-72, 18rem, 288px

  • pr-80, 20rem, 320px

  • pr-96, 24rem, 384px

Padding on left and right sides

Back to top of section

  • px-0, 0px

  • px-px, 1px

  • px-0.5, 0.125rem, 2px

  • px-1, 0.25rem, 4px

  • px-1.5, 0.375rem, 6px

  • px-2, 0.5rem, 8px

  • px-2.5, 0.625rem, 10px

  • px-3, 0.75rem, 12px

  • px-3.5, 0.875rem, 14px

  • px-4, 1rem, 16px

  • px-5, 1.25rem, 20px

  • px-6, 1.5rem, 24px

  • px-7, 1.75rem, 28px

  • px-8, 2rem, 32px

  • px-9, 2.25rem, 36px

  • px-10, 2.5rem, 40px

  • px-11, 2.75rem, 44px

  • px-12, 3rem, 48px

  • px-14, 3.5rem, 56px

  • px-16, 4rem, 64px

  • px-20, 5rem, 80px

  • px-24, 6rem, 96px

  • px-28, 7rem, 112px

  • px-32, 8rem, 128px

  • px-36, 9rem, 144px

  • px-40, 10rem, 160px

  • px-44, 11rem, 176px

  • px-48, 12rem, 192px

  • px-52, 13rem, 208px

  • px-56, 14rem, 224px

  • px-60, 15rem, 240px

  • px-64, 16rem, 256px

  • px-72, 18rem, 288px

  • px-80, 20rem, 320px

  • px-96, 24rem, 384px

Padding on top and bottom sides

Back to top of section

  • py-0, 0px

  • py-px, 1px

  • py-0.5, 0.125rem, 2px

  • py-1, 0.25rem, 4px

  • py-1.5, 0.375rem, 6px

  • py-2, 0.5rem, 8px

  • py-2.5, 0.625rem, 10px

  • py-3, 0.75rem, 12px

  • py-3.5, 0.875rem, 14px

  • py-4, 1rem, 16px

  • py-5, 1.25rem, 20px

  • py-6, 1.5rem, 24px

  • py-7, 1.75rem, 28px

  • py-8, 2rem, 32px

  • py-9, 2.25rem, 36px

  • py-10, 2.5rem, 40px

  • py-11, 2.75rem, 44px

  • py-12, 3rem, 48px

  • py-14, 3.5rem, 56px

  • py-16, 4rem, 64px

  • py-20, 5rem, 80px

  • py-24, 6rem, 96px

  • py-28, 7rem, 112px

  • py-32, 8rem, 128px

  • py-36, 9rem, 144px

  • py-40, 10rem, 160px

  • py-44, 11rem, 176px

  • py-48, 12rem, 192px

  • py-52, 13rem, 208px

  • py-56, 14rem, 224px

  • py-60, 15rem, 240px

  • py-64, 16rem, 256px

  • py-72, 18rem, 288px

  • py-80, 20rem, 320px

  • py-96, 24rem, 384px

Text Transform

  • uppercase, text-transform: uppercase

  • lowercase, text-transform: lowercase

  • capitalize, text-transform: capitalize

  • normal-case, text-transform: none

Back to top