Guia rápido para padding Tailwind
Neste artigo, discutiremos a propriedade padding do Tailwind e seus vários usos com exemplos .
Padding é uma propriedade CSS que permite adicionar espaço entre o conteúdo de um elemento e sua borda.
Ele define o espaço dentro da borda de um elemento e pode ser aplicado a todos os quatro lados de um elemento ou individualmente aos lados superior, direito, inferior ou esquerdo.
Índice-
O que é o Tailwind Padding?
O padding Tailwind refere-se ao espaço entre o conteúdo de um elemento e sua borda. Em outras palavras, preenchimento é o espaço dentro de um elemento.
As classes de preenchimento Tailwind são projetadas para fornecer uma maneira rápida e fácil de adicionar preenchimento a um elemento.
As classes de preenchimento Tailwind são aplicadas usando o prefixo p e um número que representa o tamanho de preenchimento desejado.
Classes de Padding Tailwind
A tabela a seguir fornece uma lista abrangente de classes de preenchimento do Tailwind:
| Aulas | Visão geral |
| p-0 | Usado para definir o preenchimento em todos os lados de um elemento como 0. |
| px-0 | Usado para definir o preenchimento horizontal de um elemento como 0. |
| py-0 | Usado para definir o preenchimento vertical de um elemento como 0. |
| pt-0 | Usado para definir o preenchimento na parte superior de um elemento como 0. |
| pr-0 | Usado para definir o preenchimento no lado direito de um elemento como 0. |
| pb-0 | Usado para definir o preenchimento na parte inferior de um elemento como 0. |
| pl-0 | Usado para definir o preenchimento no lado esquerdo de um elemento como 0. |
| p-px | Esta classe é usada para definir o preenchimento como 1px em todos os lados de um elemento. |
| px-px | Esta classe é usada para definir o preenchimento como 1px ao longo do eixo x de um elemento. |
| py-px | Esta classe é usada para definir o preenchimento como 1px ao longo do eixo y de um elemento. |
| pt-px | Esta classe é usada para definir o preenchimento como 1px no topo de um elemento. |
| pr-px | Esta classe é usada para definir o preenchimento como 1px no lado direito de um elemento. |
| pb-px | Essa classe é usada para definir o preenchimento como 0 na parte inferior de um elemento. |
| pl-px | Esta classe é usada para definir o preenchimento como 0 no lado esquerdo de um elemento. |
| p-0,5 | Especifica o preenchimento em todos os lados de um elemento como 0,125 rem ou 2px. |
| px-0,5 | Especifica o preenchimento ao longo do eixo x de um elemento como 0,125 rem ou 2px. |
| py-0.5 | Especifica o preenchimento ao longo do eixo y de um elemento como 0,125 rem ou 2px. |
| pt-0,5 | Especifica o preenchimento na parte superior de um elemento como 0,125 rem ou 2px. |
| pr-0,5 | Especifica o preenchimento no lado direito de um elemento como 0,125 rem ou 2px. |
| pb-0,5 | Especifica o preenchimento na parte inferior de um elemento como 0,125 rem ou 2px. |
| pl-0,5 | Especifica o preenchimento no lado esquerdo de um elemento como 0,125 rem ou 2px. |
| p-1 | Nesse caso, o preenchimento em todos os lados de um elemento é definido como 0,25 rem ou 4px. |
| px-1 | Nesse caso, o preenchimento horizontal de um elemento é definido como 0,25rem ou 4px. |
| py-1 | Nesse caso, o preenchimento vertical de um elemento é definido como 0,25rem ou 4px. |
| pt-1 | Nesse caso, o preenchimento no topo de um elemento é definido como 0,25rem ou 4px. |
| pr-1 | Nesse caso, o preenchimento do lado direito de um elemento é definido como 0,25rem ou 4px. |
| pb-1 | Nesse caso, o preenchimento na parte inferior de um elemento é definido como 0,25 rem ou 4px. |
| pl-1 | Nesse caso, o preenchimento do lado esquerdo de um elemento é definido como 0,25rem ou 4px. |
| p-1.5 | Usando esta classe, o preenchimento em todos os lados de um elemento é definido como 0,375 rem ou 6px. |
| px-1.5 | Usando esta classe, o preenchimento horizontal de um elemento é definido como 0,375 rem ou 6px. |
| py-1.5 | Usando esta classe, o preenchimento vertical de um elemento é definido como 0,375 rem ou 6px. |
| pt-1.5 | Usando esta classe, o preenchimento na parte superior de um elemento é definido como 0,375 rem ou 6px. |
| pr-1,5 | Usando esta classe, o preenchimento no lado direito de um elemento é definido como 0,375 rem ou 6px. |
| pb-1.5 | Usando esta classe, o preenchimento na parte inferior de um elemento é definido como 0,375 rem ou 6px. |
| pl-1.5 | Usando esta classe, o preenchimento no lado esquerdo de um elemento é definido como 0,375 rem ou 6px. |
| p-2 | O objetivo desta classe é definir o preenchimento em todos os lados de um elemento como 0,5 rem ou 8px. |
| px-2 | O objetivo desta classe é definir o preenchimento ao longo do eixo x de um elemento como 0,5 rem ou 8px. |
| py-2 | O objetivo desta classe é definir o preenchimento ao longo do eixo y de um elemento como 0,5 rem ou 8px. |
| pt-2 | O objetivo desta classe é definir o preenchimento na parte superior de um elemento como 0,5 rem ou 8px. |
| pr-2 | O objetivo desta classe é definir o preenchimento no lado direito de um elemento como 0,5 rem ou 8px. |
| pb-2 | O objetivo desta classe é definir o preenchimento na parte inferior de um elemento como 0,5 rem ou 8px. |
| pl-2 | O objetivo desta classe é definir o preenchimento no lado esquerdo de um elemento como 0,5 rem ou 8px. |
| p-2.5 | Esta classe é usada para definir o preenchimento em todos os lados de um elemento como 0,625 rem ou 10px. |
| px-2.5 | Esta classe é usada para definir o preenchimento ao longo do eixo x de um elemento como 0,625 rem ou 10px. |
| py-2.5 | Esta classe é usada para definir o preenchimento ao longo do eixo y de um elemento como 0,625rem ou 10px. |
| pt-2.5 | Esta classe é usada para definir o preenchimento no topo de um elemento como 0,625rem ou 10px. |
| pr-2,5 | Esta classe é usada para definir o preenchimento no lado direito de um elemento como 0,625rem ou 10px. |
| pb-2.5 | Esta classe é usada para definir o preenchimento na parte inferior de um elemento como 0,625 rem ou 10px. |
| pl-2.5 | Esta classe é usada para definir o preenchimento no lado esquerdo de um elemento como 0,625rem ou 10px. |
| p-3 | Nesse caso, o preenchimento em todos os lados de um elemento é definido como 0,75 rem ou 12px. |
| px-3 | Nesse caso, o preenchimento horizontal de um elemento é definido como 0,75 rem ou 12px. |
| py-3 | Nesse caso, o preenchimento vertical em todos os lados de um elemento é definido como 0,75 rem ou 12px. |
| pt-3 | Nesse caso, o preenchimento na parte superior de um elemento é definido como 0,75 rem ou 12px. |
| pr-3 | Nesse caso, o preenchimento do lado direito de um elemento é definido como 0,75rem ou 12px. |
| pb-3 | Nesse caso, o preenchimento na parte inferior de um elemento é definido como 0,75 rem ou 12px. |
| pl-3 | Nesse caso, o preenchimento do lado esquerdo de um elemento é definido como 0,75rem ou 12px. |
| p-3.5 | Especifica o preenchimento em todos os lados de um elemento como 0,875 rem ou 14px. |
| px-3.5 | Especifica o preenchimento ao longo do eixo x de um elemento como 0,875 rem ou 14px. |
| py-3.5 | Especifica o preenchimento ao longo do eixo y de um elemento como 0,875 rem ou 14px. |
| pt-3.5 | Especifica o preenchimento na parte superior de um elemento como 0,875 rem ou 14px. |
| pr-3.5 | Especifica o preenchimento no lado direito de um elemento como 0,875 rem ou 14px. |
| pb-3.5 | Especifica o preenchimento na parte inferior de um elemento como 0,875 rem ou 14px. |
| pl-3.5 | Especifica o preenchimento no lado esquerdo de um elemento como 0,875 rem ou 14px. |
| p-4 | Esta classe é usada para definir o preenchimento em todos os lados de um elemento como 1rem ou 16px. |
| px-4 | Esta classe é usada para definir o preenchimento ao longo do eixo x de um elemento como 1rem ou 16px. |
| py-4 | Esta classe é usada para definir o preenchimento ao longo do eixo y de um elemento como 1rem ou 16px. |
| pt-4 | Esta classe é usada para definir o preenchimento no topo de um elemento como 1rem ou 16px. |
| pr-4 | Esta classe é usada para definir o preenchimento no lado direito de um elemento como 1rem ou 16px. |
| pb-4 | Esta classe é usada para definir o preenchimento na parte inferior de um elemento como 1rem ou 16px. |
| pl-4 | Esta classe é usada para definir o preenchimento no lado esquerdo de um elemento como 1rem ou 16px. |
| p-5 | Usado para definir o preenchimento em todos os lados de um elemento para 1,25 rem ou 20px. |
| px-5 | Usado para definir o preenchimento horizontal de um elemento para 1,25 rem ou 20px. |
| py-5 | Usado para definir o preenchimento vertical de um elemento para 1,25 rem ou 20px. |
| pt-5 | Usado para definir o preenchimento na parte superior de um elemento para 1,25 rem ou 20px. |
| pr-5 | Usado para definir o preenchimento no lado direito de um elemento para 1,25 rem ou 20px. |
| pb-5 | Usado para definir o preenchimento na parte inferior de um elemento para 1,25 rem ou 20px. |
| pl-5 | Usado para definir o preenchimento à esquerda de um elemento para 1,25 rem ou 20px. |
| p-6 | Nesse caso, o preenchimento em todos os lados de um elemento é definido como 1,5 rem ou 24px. |
| px-6 | Nesse caso, o preenchimento ao longo do eixo x de um elemento é definido como 1,5 rem ou 24px. |
| py-6 | Nesse caso, o preenchimento ao longo do eixo y de um elemento é definido como 1,5 rem ou 24px. |
| pt-6 | Nesse caso, o preenchimento na parte superior de um elemento é definido como 1,5 rem ou 24px. |
| pr-6 | Nesse caso, o preenchimento do lado direito de um elemento é definido como 1,5 rem ou 24px. |
| pb-6 | Nesse caso, o preenchimento na parte inferior de um elemento é definido como 1,5 rem ou 24px. |
| pl-6 | Nesse caso, o preenchimento do lado esquerdo de um elemento é definido como 1,5 rem ou 24px. |
| p-7 | Esta classe aplica um preenchimento de 1,75 rem ou 28px em todos os lados de um elemento. |
| px-7 | Esta classe aplica um preenchimento de 1,75 rem ou 28px ao longo do eixo x de um elemento. |
| py-7 | Esta classe aplica um preenchimento de 1,75 rem ou 28px ao longo do eixo y de um elemento. |
| pt-7 | Esta classe aplica um padding de 1,75rem ou 28px na parte superior de um elemento. |
| pr-7 | Esta classe aplica um padding de 1,75rem ou 28px no lado direito de um elemento. |
| pb-7 | Esta classe aplica um preenchimento de 1,75 rem ou 28px na parte inferior de um elemento. |
| pl-7 | Esta classe aplica um padding de 1,75rem ou 28px no lado esquerdo de um elemento. |
| p-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px em todos os lados. |
| px-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px ao longo do eixo x. |
| py-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px ao longo do eixo y. |
| pt-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px na parte superior. |
| pr-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px no lado direito. |
| pb-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px na parte inferior. |
| pl-8 | O objetivo desta classe é definir o preenchimento de um elemento como 2rem ou 32px no lado esquerdo. |
| p-9 | Aplica um preenchimento de 2,25 rem ou 36px em todos os lados de um elemento. |
| px-9 | Aplica um preenchimento de 2,25 rem ou 36px ao longo do eixo x de um elemento. |
| py-9 | Aplica um preenchimento de 2,25 rem ou 36 px ao longo do eixo y de um elemento. |
| pt-9 | Aplica um preenchimento de 2,25 rem ou 36px na parte superior de um elemento. |
| pr-9 | Aplica um padding de 2,25rem ou 36px no lado direito de um elemento. |
| pb-9 | Aplica um preenchimento de 2,25 rem ou 36px na parte inferior de um elemento. |
| pl-9 | Aplica um padding de 2,25rem ou 36px no lado esquerdo de um elemento. |
| p-10 | Esta classe é usada para especificar o preenchimento em todos os lados de um elemento como 2,5 rem ou 40px. |
| px-10 | Esta classe é usada para especificar o preenchimento ao longo do eixo x de um elemento como 2,5 rem ou 40px. |
| py-10 | Esta classe é usada para especificar o preenchimento ao longo do eixo y de um elemento como 2,5 rem ou 40px. |
| pt-10 | Esta classe é usada para especificar o preenchimento na parte superior de um elemento como 2,5 rem ou 40px. |
| pr-10 | Esta classe é usada para especificar o preenchimento no lado direito de um elemento como 2,5 rem ou 40px. |
| pb-10 | Esta classe é usada para especificar o preenchimento na parte inferior de um elemento como 2,5 rem ou 40px. |
| pl-10 | Esta classe é usada para especificar o preenchimento no lado esquerdo de um elemento como 2,5 rem ou 40px. |
| p-11 | Esta classe define o preenchimento em todos os lados de um elemento como 2,75 rem ou 44px. |
| px-11 | Essa classe define o preenchimento ao longo do eixo x de um elemento como 2,75 rem ou 44px. |
| py-11 | Essa classe define o preenchimento ao longo do eixo y de um elemento como 2,75 rem ou 44px. |
| pt-11 | Essa classe define o preenchimento na parte superior de um elemento como 2,75 rem ou 44px. |
| pr-11 | Essa classe define o preenchimento no lado direito de um elemento como 2,75 rem ou 44px. |
| pb-11 | Essa classe define o preenchimento na parte inferior de um elemento como 2,75 rem ou 44px. |
| pl-11 | Essa classe define o preenchimento no lado esquerdo de um elemento como 2,75 rem ou 44px. |
| p-12 | O preenchimento em todos os lados de um elemento é definido como 3rem ou 48px usando esta classe. |
| px-12 | O preenchimento horizontal de um elemento é definido como 3rem ou 48px usando esta classe. |
| py-12 | O preenchimento vertical de um elemento é definido como 3rem ou 48px usando esta classe. |
| pt-12 | O preenchimento na parte superior de um elemento é definido como 3rem ou 48px usando esta classe. |
| pr-12 | O preenchimento no lado direito de um elemento é definido como 3rem ou 48px usando esta classe. |
| pb-12 | O preenchimento na parte inferior de um elemento é definido como 3rem ou 48px usando esta classe. |
| pl-12 | O preenchimento no lado esquerdo de um elemento é definido como 3rem ou 48px usando esta classe. |
| p-14 | Especifica o preenchimento em todos os lados de um elemento como 3,5 rem ou 56px. |
| px-14 | Especifica o preenchimento ao longo do eixo x de um elemento como 3,5 rem ou 56px. |
| py-14 | Especifica o preenchimento ao longo do eixo y de um elemento como 3,5 rem ou 56px. |
| pt-14 | Especifica o preenchimento na parte superior de um elemento como 3,5 rem ou 56px. |
| pr-14 | Especifica o preenchimento no lado direito de um elemento como 3,5 rem ou 56px. |
| pb-14 | Especifica o preenchimento na parte inferior de um elemento como 3,5 rem ou 56px. |
| pl-14 | Especifica o preenchimento no lado esquerdo de um elemento como 3,5 rem ou 56px. |
| p-16 | Nesse caso, o preenchimento em todos os lados de um elemento é definido como 4rem ou 64px. |
| px-16 | Nesse caso, o preenchimento horizontal de um elemento é definido como 4rem ou 64px. |
| py-16 | Nesse caso, o preenchimento vertical em todos os lados de um elemento é definido como 4rem ou 64px. |
| pt-16 | Nesse caso, o preenchimento na parte superior de um elemento é definido como 4rem ou 64px. |
| pr-16 | Nesse caso, o preenchimento no lado direito de um elemento é definido como 4rem ou 64px. |
| pb-16 | Nesse caso, o preenchimento na parte inferior de um elemento é definido como 4rem ou 64px. |
| pl-16 | Nesse caso, o preenchimento em todos os lados de um elemento é definido como 4rem ou 64px. |
| p-20 | Essa classe garante que o preenchimento em todos os lados de um elemento seja definido como 5rem ou 80px. |
| px-20 | Essa classe garante que o preenchimento ao longo do eixo x de um elemento seja definido como 5rem ou 80px. |
| py-20 | Essa classe garante que o preenchimento ao longo do eixo y de um elemento seja definido como 5rem ou 80px. |
| pt-20 | Essa classe garante que o preenchimento na parte superior de um elemento seja definido como 5rem ou 80px. |
| pr-20 | Essa classe garante que o preenchimento no lado direito de um elemento seja definido como 5rem ou 80px. |
| pb-20 | Essa classe garante que o preenchimento na parte inferior de um elemento seja definido como 5rem ou 80px. |
| pl-20 | Essa classe garante que o preenchimento no lado esquerdo de um elemento seja definido como 5rem ou 80px. |
| p-24 | Aplica um preenchimento de 6rem ou 96px em todos os lados de um elemento. |
| px-24 | Aplica um preenchimento de 6rem ou 96px ao longo do eixo x de um elemento. |
| py-24 | Aplica um preenchimento de 6rem ou 96px ao longo do eixo y de um elemento. |
| pt-24 | Aplica um preenchimento de 6rem ou 96px na parte superior de um elemento. |
| pr-24 | Aplica um padding de 6rem ou 96px no lado direito de um elemento. |
| pb-24 | Aplica um preenchimento de 6rem ou 96px na parte inferior de um elemento. |
| pl-24 | Aplica um preenchimento de 6rem ou 96px no lado esquerdo de um elemento. |
| p-28 | Esta classe define o preenchimento em todos os lados de um elemento como 7rem ou 112px. |
| px-28 | Esta classe define o preenchimento horizontal de um elemento como 7rem ou 112px. |
| py-28 | Esta classe define o preenchimento vertical de um elemento como 7rem ou 112px. |
| pt-28 | Esta classe define o preenchimento no topo de um elemento como 7rem ou 112px. |
| pr-28 | Esta classe define o preenchimento no lado direito de um elemento como 7rem ou 112px. |
| pb-28 | Esta classe define o preenchimento na parte inferior de um elemento como 7rem ou 112px. |
| pl-28 | Esta classe define o preenchimento no lado esquerdo de um elemento como 7rem ou 112px. |
| p-32 | Essa classe garante que o preenchimento em todos os lados de um elemento seja definido como 8rem ou 128px. |
| px-32 | Essa classe garante que o preenchimento horizontal de um elemento seja definido como 8rem ou 128px. |
| py-32 | Essa classe garante que o preenchimento vertical de um elemento seja definido como 8rem ou 128px. |
| pt-32 | Essa classe garante que o preenchimento na parte superior de um elemento seja definido como 8rem ou 128px. |
| pr-32 | Essa classe garante que o preenchimento no lado direito de um elemento seja definido como 8rem ou 128px. |
| pb-32 | Essa classe garante que o preenchimento na parte inferior de um elemento seja definido como 8rem ou 128px. |
| pl-32 | Essa classe garante que o preenchimento no lado esquerdo de um elemento seja definido como 8rem ou 128px. |
| p-36 | O preenchimento em todos os lados de um elemento é definido como 9rem ou 144px usando esta classe. |
| px-36 | O preenchimento ao longo do eixo x de um elemento é definido como 9rem ou 144px usando esta classe. |
| py-36 | O preenchimento ao longo do eixo y de um elemento é definido como 9rem ou 144px usando esta classe. |
| pt-36 | O preenchimento na parte superior de um elemento é definido como 9rem ou 144px usando esta classe. |
| pr-36 | O preenchimento no lado direito de um elemento é definido como 9rem ou 144px usando esta classe. |
| pb-36 | O preenchimento na parte inferior de um elemento é definido como 9rem ou 144px usando esta classe. |
| pl-36 | O preenchimento no lado esquerdo de um elemento é definido como 9rem ou 144px usando esta classe. |
| p-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px em todos os lados. |
| px-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px ao longo do eixo x. |
| py-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px ao longo do eixo y. |
| pt-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px na parte superior. |
| pr-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px no lado direito. |
| pb-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px na parte inferior. |
| pl-40 | O objetivo desta classe é definir o preenchimento de um elemento como 10rem ou 160px no lado esquerdo. |
| p-44 | Esta classe define o preenchimento em todos os lados de um elemento como 11rem ou 176px. |
| px-44 | Essa classe define o preenchimento ao longo do eixo x de um elemento como 11rem ou 176px. |
| py-44 | Esta classe define o preenchimento ao longo do eixo y de um elemento como 11rem ou 176px. |
| pt-44 | Essa classe define o preenchimento na parte superior de um elemento como 11rem ou 176px. |
| pr-44 | Esta classe define o preenchimento no lado direito de um elemento como 11rem ou 176px. |
| pb-44 | Essa classe define o preenchimento na parte inferior de um elemento como 11rem ou 176px. |
| pl-44 | Esta classe define o preenchimento no lado esquerdo de um elemento como 11rem ou 176px. |
| p-48 | Aplica um padding de 12rem ou 192px em todos os lados de um elemento. |
| px-48 | Aplica um preenchimento de 12rem ou 192px ao longo do eixo x de um elemento. |
| py-48 | Aplica um preenchimento de 12 rem ou 192 px ao longo do eixo y de um elemento. |
| pt-48 | Aplica um padding de 12rem ou 192px na parte superior de um elemento. |
| pr-48 | Aplica um padding de 12rem ou 192px no lado direito de um elemento. |
| pb-48 | Aplica um padding de 12rem ou 192px na parte inferior de um elemento. |
| pl-48 | Aplica um padding de 12rem ou 192px no lado esquerdo de um elemento. |
| p-52 | Essa classe garante que o preenchimento em todos os lados de um elemento seja definido como 13rem ou 208px. |
| px-52 | Essa classe garante que o preenchimento horizontal de um elemento seja definido como 13rem ou 208px. |
| py-52 | Essa classe garante que o preenchimento vertical em todos os lados de um elemento seja definido como 13rem ou 208px. |
| pt-52 | Essa classe garante que o preenchimento na parte superior de um elemento seja definido como 13rem ou 208px. |
| pr-52 | Essa classe garante que o preenchimento no lado direito de um elemento seja definido como 13rem ou 208px. |
| pb-52 | Essa classe garante que o preenchimento na parte inferior de um elemento seja definido como 13rem ou 208px. |
| pl-52 | Essa classe garante que o preenchimento no lado esquerdo de um elemento seja definido como 13rem ou 208px. |
| p-56 | Esta classe é usada para aplicar um padding de 14rem ou 224px em todos os lados de um elemento. |
| px-56 | Essa classe é usada para aplicar um preenchimento de 14 rem ou 224 px ao longo do eixo x de um elemento. |
| py-56 | Essa classe é usada para aplicar um preenchimento de 14 rem ou 224 px ao longo do eixo y de um elemento. |
| pt-56 | Esta classe é usada para aplicar um padding de 14rem ou 224px no topo de um elemento. |
| pr-56 | Esta classe é usada para aplicar um padding de 14rem ou 224px no lado direito de um elemento. |
| pb-56 | Esta classe é usada para aplicar um padding de 14rem ou 224px na parte inferior de um elemento. |
| pl-56 | Esta classe é usada para aplicar um padding de 14rem ou 224px no lado esquerdo de um elemento. |
| p-60 | Esta classe define o preenchimento em todos os lados de um elemento como 15rem ou 240px. |
| px-60 | Esta classe define o preenchimento ao longo do eixo x de um elemento como 15rem ou 240px. |
| py-60 | Esta classe define o preenchimento ao longo do eixo y de um elemento como 15rem ou 240px. |
| pt-60 | Esta classe define o preenchimento no topo de um elemento como 15rem ou 240px. |
| pr-60 | Esta classe define o preenchimento no lado direito de um elemento como 15rem ou 240px. |
| pb-60 | Esta classe define o preenchimento na parte inferior de um elemento como 15rem ou 240px. |
| pl-60 | Esta classe define o preenchimento no lado esquerdo de um elemento como 15rem ou 240px. |
| p-64 | Aplica um padding de 16rem ou 256px em todos os lados de um elemento. |
| px-64 | Aplica um preenchimento horizontal de 16rem ou 256px de um elemento. |
| py-64 | Aplica um preenchimento vertical de 16 rem ou 256 px em todos os lados de um elemento. |
| pt-64 | Aplica um padding de 16rem ou 256px na parte superior de um elemento. |
| pr-64 | Aplica um padding de 16rem ou 256px no lado direito de um elemento. |
| pb-64 | Aplica um padding de 16rem ou 256px na parte inferior de um elemento. |
| pl-64 | Aplica um padding de 16rem ou 256px no lado esquerdo de um elemento. |
| p-72 | Nesse caso, o preenchimento em todos os lados de um elemento é definido como 18rem ou 288px. |
| px-72 | Nesse caso, o preenchimento ao longo do eixo x de um elemento é definido como 18rem ou 288px. |
| py-72 | Nesse caso, o preenchimento ao longo do eixo y de um elemento é definido como 18rem ou 288px. |
| pt-72 | Nesse caso, o preenchimento na parte superior de um elemento é definido como 18rem ou 288px. |
| pr-72 | Nesse caso, o preenchimento no lado direito de um elemento é definido como 18rem ou 288px. |
| pb-72 | Nesse caso, o preenchimento na parte inferior de um elemento é definido como 18rem ou 288px. |
| pl-72 | Nesse caso, o preenchimento no lado esquerdo de um elemento é definido como 18rem ou 288px. |
| p-80 | Esta classe é usada para aplicar um padding de 20rem ou 320px no topo de um elemento. |
| px-80 | Esta classe é usada para aplicar um padding horizontal de 20rem ou 320px no topo de um elemento. |
| py-80 | Esta classe é utilizada para aplicar um padding vertical de 20rem ou 320px de um elemento. |
| pt-80 | Esta classe é usada para aplicar um padding de 20rem ou 320px no topo de um elemento. |
| pr-80 | Esta classe é usada para aplicar um padding de 20rem ou 320px no lado direito de um elemento. |
| pb-80 | Esta classe é usada para aplicar um padding de 20rem ou 320px na parte inferior de um elemento. |
| pl-80 | Esta classe é usada para aplicar um padding de 20rem ou 320px no lado esquerdo de um elemento. |
| p-96 | Esta classe especifica o preenchimento em todos os lados de um elemento como 24rem ou 384px. |
| px-96 | Esta classe especifica o preenchimento ao longo do eixo x de um elemento como 24rem ou 384px. |
| py-96 | Esta classe especifica o preenchimento ao longo do eixo y de um elemento como 24rem ou 384px. |
| pt-96 | Esta classe especifica o preenchimento no topo de um elemento como 24rem ou 384px. |
| pr-96 | Esta classe especifica o preenchimento no lado direito de um elemento como 24rem ou 384px. |
| pb-96 | Esta classe especifica o preenchimento na parte inferior de um elemento como 24rem ou 384px. |
| pl-96 | Esta classe especifica o preenchimento no lado esquerdo de um elemento como 24rem ou 384px. |
Sintaxe
<element class="p-0">...</element>
Para usar as classes de preenchimento do Tailwind em suas páginas da Web, você precisa adicionar a classe ao elemento HTML ao qual deseja aplicar o preenchimento.
O exemplo abaixo fornece uma implementação prática das classes de preenchimento Tailwind que aplicam preenchimento em todos os quatro lados de um elemento:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Padding class in Tailwind CSS
class="flex justify-center flex-wrap gap-2 mt-4 font-medium"
class="p-0 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-amber-400 w-16 h-16"
p-0
class="p-4 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-fuchsia-400 w-16 h-16"
p-4
class="p-8 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-blue-400 w-16 h-16"
p-8
class="p-12 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-green-500 w-16 h-16"
p-12
O exemplo a seguir mostra uma aplicação prática das classes de padding horizontal e vertical no Tailwind:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Padding class in Tailwind CSS
class="flex justify-center flex-wrap gap-4 mt-4 font-medium text-gray-200"
class="px-3 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-indigo-700 w-16 h-16"
px-3
class="py-4 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-red-600 w-16 h-16"
py-4
class="px-6 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-slate-700 w-16 h-16"
px-6
class="py-7 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-neutral-500 w-16 h-16"
py-7
O exemplo abaixo demonstra as classes de preenchimento usadas para aplicar preenchimento em lados individuais de um elemento:
Example:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Padding class in Tailwind CSS
class="flex justify-center flex-wrap gap-4 mt-4 font-medium text-gray-200"
class="pt-6 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-indigo-700 w-16 h-16"
pt-6
class="pr-5 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-red-600 w-16 h-16"
pr-5
class="pb-7 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-slate-700 w-16 h-16"
pb-7
class="pl-8 bg-gray-300 w-fit h-fit rounded"
class="border-2 border-black
bg-neutral-500 w-16 h-16"
pl-8
Conclusão
O preenchimento Tailwind é um recurso essencial que simplifica o processo de criação de designs visualmente atraentes. Com as classes de preenchimento Tailwind, você pode facilmente adicionar preenchimento a elementos em suas páginas da Web, criando espaço entre o conteúdo e a borda.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
