pixelwind/pixelwind.css

Pixel-based utility-first CSS: spacing, gap, width/height (1–30px) with optional responsive variants.

/* Pixelwind – pixel-based utility classes (1–30px)
   margin:  m-, mt-, mr-, mb-, ml-
   padding: p-, pt-, pr-, pb-, pl-
   gap:     gap-
   size:    w-, h-
   responsive (min-width:1600px): suffix "-1600"
*/
.m-1px { margin: 1px; }
.mt-1px { margin-top: 1px; }
.mr-1px { margin-right: 1px; }
.mb-1px { margin-bottom: 1px; }
.ml-1px { margin-left: 1px; }
.p-1px { padding: 1px; }
.pt-1px { padding-top: 1px; }
.pr-1px { padding-right: 1px; }
.pb-1px { padding-bottom: 1px; }
.pl-1px { padding-left: 1px; }
.gap-1px { gap: 1px; }
.w-1px { width: 1px; }
.h-1px { height: 1px; }
.m-2px { margin: 2px; }
.mt-2px { margin-top: 2px; }
.mr-2px { margin-right: 2px; }
.mb-2px { margin-bottom: 2px; }
.ml-2px { margin-left: 2px; }
.p-2px { padding: 2px; }
.pt-2px { padding-top: 2px; }
.pr-2px { padding-right: 2px; }
.pb-2px { padding-bottom: 2px; }
.pl-2px { padding-left: 2px; }
.gap-2px { gap: 2px; }
.w-2px { width: 2px; }
.h-2px { height: 2px; }
.m-3px { margin: 3px; }
.mt-3px { margin-top: 3px; }
.mr-3px { margin-right: 3px; }
.mb-3px { margin-bottom: 3px; }
.ml-3px { margin-left: 3px; }
.p-3px { padding: 3px; }
.pt-3px { padding-top: 3px; }
.pr-3px { padding-right: 3px; }
.pb-3px { padding-bottom: 3px; }
.pl-3px { padding-left: 3px; }
.gap-3px { gap: 3px; }
.w-3px { width: 3px; }
.h-3px { height: 3px; }
.m-4px { margin: 4px; }
.mt-4px { margin-top: 4px; }
.mr-4px { margin-right: 4px; }
.mb-4px { margin-bottom: 4px; }
.ml-4px { margin-left: 4px; }
.p-4px { padding: 4px; }
.pt-4px { padding-top: 4px; }
.pr-4px { padding-right: 4px; }
.pb-4px { padding-bottom: 4px; }
.pl-4px { padding-left: 4px; }
.gap-4px { gap: 4px; }
.w-4px { width: 4px; }
.h-4px { height: 4px; }
.m-5px { margin: 5px; }
.mt-5px { margin-top: 5px; }
.mr-5px { margin-right: 5px; }
.mb-5px { margin-bottom: 5px; }
.ml-5px { margin-left: 5px; }
.p-5px { padding: 5px; }
.pt-5px { padding-top: 5px; }
.pr-5px { padding-right: 5px; }
.pb-5px { padding-bottom: 5px; }
.pl-5px { padding-left: 5px; }
.gap-5px { gap: 5px; }
.w-5px { width: 5px; }
.h-5px { height: 5px; }
.m-6px { margin: 6px; }
.mt-6px { margin-top: 6px; }
.mr-6px { margin-right: 6px; }
.mb-6px { margin-bottom: 6px; }
.ml-6px { margin-left: 6px; }
.p-6px { padding: 6px; }
.pt-6px { padding-top: 6px; }
.pr-6px { padding-right: 6px; }
.pb-6px { padding-bottom: 6px; }
.pl-6px { padding-left: 6px; }
.gap-6px { gap: 6px; }
.w-6px { width: 6px; }
.h-6px { height: 6px; }
.m-7px { margin: 7px; }
.mt-7px { margin-top: 7px; }
.mr-7px { margin-right: 7px; }
.mb-7px { margin-bottom: 7px; }
.ml-7px { margin-left: 7px; }
.p-7px { padding: 7px; }
.pt-7px { padding-top: 7px; }
.pr-7px { padding-right: 7px; }
.pb-7px { padding-bottom: 7px; }
.pl-7px { padding-left: 7px; }
.gap-7px { gap: 7px; }
.w-7px { width: 7px; }
.h-7px { height: 7px; }
.m-8px { margin: 8px; }
.mt-8px { margin-top: 8px; }
.mr-8px { margin-right: 8px; }
.mb-8px { margin-bottom: 8px; }
.ml-8px { margin-left: 8px; }
.p-8px { padding: 8px; }
.pt-8px { padding-top: 8px; }
.pr-8px { padding-right: 8px; }
.pb-8px { padding-bottom: 8px; }
.pl-8px { padding-left: 8px; }
.gap-8px { gap: 8px; }
.w-8px { width: 8px; }
.h-8px { height: 8px; }
.m-9px { margin: 9px; }
.mt-9px { margin-top: 9px; }
.mr-9px { margin-right: 9px; }
.mb-9px { margin-bottom: 9px; }
.ml-9px { margin-left: 9px; }
.p-9px { padding: 9px; }
.pt-9px { padding-top: 9px; }
.pr-9px { padding-right: 9px; }
.pb-9px { padding-bottom: 9px; }
.pl-9px { padding-left: 9px; }
.gap-9px { gap: 9px; }
.w-9px { width: 9px; }
.h-9px { height: 9px; }
.m-10px { margin: 10px; }
.mt-10px { margin-top: 10px; }
.mr-10px { margin-right: 10px; }
.mb-10px { margin-bottom: 10px; }
.ml-10px { margin-left: 10px; }
.p-10px { padding: 10px; }
.pt-10px { padding-top: 10px; }
.pr-10px { padding-right: 10px; }
.pb-10px { padding-bottom: 10px; }
.pl-10px { padding-left: 10px; }
.gap-10px { gap: 10px; }
.w-10px { width: 10px; }
.h-10px { height: 10px; }
.m-11px { margin: 11px; }
.mt-11px { margin-top: 11px; }
.mr-11px { margin-right: 11px; }
.mb-11px { margin-bottom: 11px; }
.ml-11px { margin-left: 11px; }
.p-11px { padding: 11px; }
.pt-11px { padding-top: 11px; }
.pr-11px { padding-right: 11px; }
.pb-11px { padding-bottom: 11px; }
.pl-11px { padding-left: 11px; }
.gap-11px { gap: 11px; }
.w-11px { width: 11px; }
.h-11px { height: 11px; }
.m-12px { margin: 12px; }
.mt-12px { margin-top: 12px; }
.mr-12px { margin-right: 12px; }
.mb-12px { margin-bottom: 12px; }
.ml-12px { margin-left: 12px; }
.p-12px { padding: 12px; }
.pt-12px { padding-top: 12px; }
.pr-12px { padding-right: 12px; }
.pb-12px { padding-bottom: 12px; }
.pl-12px { padding-left: 12px; }
.gap-12px { gap: 12px; }
.w-12px { width: 12px; }
.h-12px { height: 12px; }
.m-13px { margin: 13px; }
.mt-13px { margin-top: 13px; }
.mr-13px { margin-right: 13px; }
.mb-13px { margin-bottom: 13px; }
.ml-13px { margin-left: 13px; }
.p-13px { padding: 13px; }
.pt-13px { padding-top: 13px; }
.pr-13px { padding-right: 13px; }
.pb-13px { padding-bottom: 13px; }
.pl-13px { padding-left: 13px; }
.gap-13px { gap: 13px; }
.w-13px { width: 13px; }
.h-13px { height: 13px; }
.m-14px { margin: 14px; }
.mt-14px { margin-top: 14px; }
.mr-14px { margin-right: 14px; }
.mb-14px { margin-bottom: 14px; }
.ml-14px { margin-left: 14px; }
.p-14px { padding: 14px; }
.pt-14px { padding-top: 14px; }
.pr-14px { padding-right: 14px; }
.pb-14px { padding-bottom: 14px; }
.pl-14px { padding-left: 14px; }
.gap-14px { gap: 14px; }
.w-14px { width: 14px; }
.h-14px { height: 14px; }
.m-15px { margin: 15px; }
.mt-15px { margin-top: 15px; }
.mr-15px { margin-right: 15px; }
.mb-15px { margin-bottom: 15px; }
.ml-15px { margin-left: 15px; }
.p-15px { padding: 15px; }
.pt-15px { padding-top: 15px; }
.pr-15px { padding-right: 15px; }
.pb-15px { padding-bottom: 15px; }
.pl-15px { padding-left: 15px; }
.gap-15px { gap: 15px; }
.w-15px { width: 15px; }
.h-15px { height: 15px; }
.m-16px { margin: 16px; }
.mt-16px { margin-top: 16px; }
.mr-16px { margin-right: 16px; }
.mb-16px { margin-bottom: 16px; }
.ml-16px { margin-left: 16px; }
.p-16px { padding: 16px; }
.pt-16px { padding-top: 16px; }
.pr-16px { padding-right: 16px; }
.pb-16px { padding-bottom: 16px; }
.pl-16px { padding-left: 16px; }
.gap-16px { gap: 16px; }
.w-16px { width: 16px; }
.h-16px { height: 16px; }
.m-17px { margin: 17px; }
.mt-17px { margin-top: 17px; }
.mr-17px { margin-right: 17px; }
.mb-17px { margin-bottom: 17px; }
.ml-17px { margin-left: 17px; }
.p-17px { padding: 17px; }
.pt-17px { padding-top: 17px; }
.pr-17px { padding-right: 17px; }
.pb-17px { padding-bottom: 17px; }
.pl-17px { padding-left: 17px; }
.gap-17px { gap: 17px; }
.w-17px { width: 17px; }
.h-17px { height: 17px; }
.m-18px { margin: 18px; }
.mt-18px { margin-top: 18px; }
.mr-18px { margin-right: 18px; }
.mb-18px { margin-bottom: 18px; }
.ml-18px { margin-left: 18px; }
.p-18px { padding: 18px; }
.pt-18px { padding-top: 18px; }
.pr-18px { padding-right: 18px; }
.pb-18px { padding-bottom: 18px; }
.pl-18px { padding-left: 18px; }
.gap-18px { gap: 18px; }
.w-18px { width: 18px; }
.h-18px { height: 18px; }
.m-19px { margin: 19px; }
.mt-19px { margin-top: 19px; }
.mr-19px { margin-right: 19px; }
.mb-19px { margin-bottom: 19px; }
.ml-19px { margin-left: 19px; }
.p-19px { padding: 19px; }
.pt-19px { padding-top: 19px; }
.pr-19px { padding-right: 19px; }
.pb-19px { padding-bottom: 19px; }
.pl-19px { padding-left: 19px; }
.gap-19px { gap: 19px; }
.w-19px { width: 19px; }
.h-19px { height: 19px; }
.m-20px { margin: 20px; }
.mt-20px { margin-top: 20px; }
.mr-20px { margin-right: 20px; }
.mb-20px { margin-bottom: 20px; }
.ml-20px { margin-left: 20px; }
.p-20px { padding: 20px; }
.pt-20px { padding-top: 20px; }
.pr-20px { padding-right: 20px; }
.pb-20px { padding-bottom: 20px; }
.pl-20px { padding-left: 20px; }
.gap-20px { gap: 20px; }
.w-20px { width: 20px; }
.h-20px { height: 20px; }
.m-21px { margin: 21px; }
.mt-21px { margin-top: 21px; }
.mr-21px { margin-right: 21px; }
.mb-21px { margin-bottom: 21px; }
.ml-21px { margin-left: 21px; }
.p-21px { padding: 21px; }
.pt-21px { padding-top: 21px; }
.pr-21px { padding-right: 21px; }
.pb-21px { padding-bottom: 21px; }
.pl-21px { padding-left: 21px; }
.gap-21px { gap: 21px; }
.w-21px { width: 21px; }
.h-21px { height: 21px; }
.m-22px { margin: 22px; }
.mt-22px { margin-top: 22px; }
.mr-22px { margin-right: 22px; }
.mb-22px { margin-bottom: 22px; }
.ml-22px { margin-left: 22px; }
.p-22px { padding: 22px; }
.pt-22px { padding-top: 22px; }
.pr-22px { padding-right: 22px; }
.pb-22px { padding-bottom: 22px; }
.pl-22px { padding-left: 22px; }
.gap-22px { gap: 22px; }
.w-22px { width: 22px; }
.h-22px { height: 22px; }
.m-23px { margin: 23px; }
.mt-23px { margin-top: 23px; }
.mr-23px { margin-right: 23px; }
.mb-23px { margin-bottom: 23px; }
.ml-23px { margin-left: 23px; }
.p-23px { padding: 23px; }
.pt-23px { padding-top: 23px; }
.pr-23px { padding-right: 23px; }
.pb-23px { padding-bottom: 23px; }
.pl-23px { padding-left: 23px; }
.gap-23px { gap: 23px; }
.w-23px { width: 23px; }
.h-23px { height: 23px; }
.m-24px { margin: 24px; }
.mt-24px { margin-top: 24px; }
.mr-24px { margin-right: 24px; }
.mb-24px { margin-bottom: 24px; }
.ml-24px { margin-left: 24px; }
.p-24px { padding: 24px; }
.pt-24px { padding-top: 24px; }
.pr-24px { padding-right: 24px; }
.pb-24px { padding-bottom: 24px; }
.pl-24px { padding-left: 24px; }
.gap-24px { gap: 24px; }
.w-24px { width: 24px; }
.h-24px { height: 24px; }
.m-25px { margin: 25px; }
.mt-25px { margin-top: 25px; }
.mr-25px { margin-right: 25px; }
.mb-25px { margin-bottom: 25px; }
.ml-25px { margin-left: 25px; }
.p-25px { padding: 25px; }
.pt-25px { padding-top: 25px; }
.pr-25px { padding-right: 25px; }
.pb-25px { padding-bottom: 25px; }
.pl-25px { padding-left: 25px; }
.gap-25px { gap: 25px; }
.w-25px { width: 25px; }
.h-25px { height: 25px; }
.m-26px { margin: 26px; }
.mt-26px { margin-top: 26px; }
.mr-26px { margin-right: 26px; }
.mb-26px { margin-bottom: 26px; }
.ml-26px { margin-left: 26px; }
.p-26px { padding: 26px; }
.pt-26px { padding-top: 26px; }
.pr-26px { padding-right: 26px; }
.pb-26px { padding-bottom: 26px; }
.pl-26px { padding-left: 26px; }
.gap-26px { gap: 26px; }
.w-26px { width: 26px; }
.h-26px { height: 26px; }
.m-27px { margin: 27px; }
.mt-27px { margin-top: 27px; }
.mr-27px { margin-right: 27px; }
.mb-27px { margin-bottom: 27px; }
.ml-27px { margin-left: 27px; }
.p-27px { padding: 27px; }
.pt-27px { padding-top: 27px; }
.pr-27px { padding-right: 27px; }
.pb-27px { padding-bottom: 27px; }
.pl-27px { padding-left: 27px; }
.gap-27px { gap: 27px; }
.w-27px { width: 27px; }
.h-27px { height: 27px; }
.m-28px { margin: 28px; }
.mt-28px { margin-top: 28px; }
.mr-28px { margin-right: 28px; }
.mb-28px { margin-bottom: 28px; }
.ml-28px { margin-left: 28px; }
.p-28px { padding: 28px; }
.pt-28px { padding-top: 28px; }
.pr-28px { padding-right: 28px; }
.pb-28px { padding-bottom: 28px; }
.pl-28px { padding-left: 28px; }
.gap-28px { gap: 28px; }
.w-28px { width: 28px; }
.h-28px { height: 28px; }
.m-29px { margin: 29px; }
.mt-29px { margin-top: 29px; }
.mr-29px { margin-right: 29px; }
.mb-29px { margin-bottom: 29px; }
.ml-29px { margin-left: 29px; }
.p-29px { padding: 29px; }
.pt-29px { padding-top: 29px; }
.pr-29px { padding-right: 29px; }
.pb-29px { padding-bottom: 29px; }
.pl-29px { padding-left: 29px; }
.gap-29px { gap: 29px; }
.w-29px { width: 29px; }
.h-29px { height: 29px; }
.m-30px { margin: 30px; }
.mt-30px { margin-top: 30px; }
.mr-30px { margin-right: 30px; }
.mb-30px { margin-bottom: 30px; }
.ml-30px { margin-left: 30px; }
.p-30px { padding: 30px; }
.pt-30px { padding-top: 30px; }
.pr-30px { padding-right: 30px; }
.pb-30px { padding-bottom: 30px; }
.pl-30px { padding-left: 30px; }
.gap-30px { gap: 30px; }
.w-30px { width: 30px; }
.h-30px { height: 30px; }

@media (min-width: 1600px) {
  .m-1px-1600 { margin: 1px; }
  .p-1px-1600 { padding: 1px; }
  .gap-1px-1600 { gap: 1px; }
  .w-1px-1600 { width: 1px; }
  .h-1px-1600 { height: 1px; }
  .m-2px-1600 { margin: 2px; }
  .p-2px-1600 { padding: 2px; }
  .gap-2px-1600 { gap: 2px; }
  .w-2px-1600 { width: 2px; }
  .h-2px-1600 { height: 2px; }
  .m-3px-1600 { margin: 3px; }
  .p-3px-1600 { padding: 3px; }
  .gap-3px-1600 { gap: 3px; }
  .w-3px-1600 { width: 3px; }
  .h-3px-1600 { height: 3px; }
  .m-4px-1600 { margin: 4px; }
  .p-4px-1600 { padding: 4px; }
  .gap-4px-1600 { gap: 4px; }
  .w-4px-1600 { width: 4px; }
  .h-4px-1600 { height: 4px; }
  .m-5px-1600 { margin: 5px; }
  .p-5px-1600 { padding: 5px; }
  .gap-5px-1600 { gap: 5px; }
  .w-5px-1600 { width: 5px; }
  .h-5px-1600 { height: 5px; }
  .m-6px-1600 { margin: 6px; }
  .p-6px-1600 { padding: 6px; }
  .gap-6px-1600 { gap: 6px; }
  .w-6px-1600 { width: 6px; }
  .h-6px-1600 { height: 6px; }
  .m-7px-1600 { margin: 7px; }
  .p-7px-1600 { padding: 7px; }
  .gap-7px-1600 { gap: 7px; }
  .w-7px-1600 { width: 7px; }
  .h-7px-1600 { height: 7px; }
  .m-8px-1600 { margin: 8px; }
  .p-8px-1600 { padding: 8px; }
  .gap-8px-1600 { gap: 8px; }
  .w-8px-1600 { width: 8px; }
  .h-8px-1600 { height: 8px; }
  .m-9px-1600 { margin: 9px; }
  .p-9px-1600 { padding: 9px; }
  .gap-9px-1600 { gap: 9px; }
  .w-9px-1600 { width: 9px; }
  .h-9px-1600 { height: 9px; }
  .m-10px-1600 { margin: 10px; }
  .p-10px-1600 { padding: 10px; }
  .gap-10px-1600 { gap: 10px; }
  .w-10px-1600 { width: 10px; }
  .h-10px-1600 { height: 10px; }
  .m-11px-1600 { margin: 11px; }
  .p-11px-1600 { padding: 11px; }
  .gap-11px-1600 { gap: 11px; }
  .w-11px-1600 { width: 11px; }
  .h-11px-1600 { height: 11px; }
  .m-12px-1600 { margin: 12px; }
  .p-12px-1600 { padding: 12px; }
  .gap-12px-1600 { gap: 12px; }
  .w-12px-1600 { width: 12px; }
  .h-12px-1600 { height: 12px; }
  .m-13px-1600 { margin: 13px; }
  .p-13px-1600 { padding: 13px; }
  .gap-13px-1600 { gap: 13px; }
  .w-13px-1600 { width: 13px; }
  .h-13px-1600 { height: 13px; }
  .m-14px-1600 { margin: 14px; }
  .p-14px-1600 { padding: 14px; }
  .gap-14px-1600 { gap: 14px; }
  .w-14px-1600 { width: 14px; }
  .h-14px-1600 { height: 14px; }
  .m-15px-1600 { margin: 15px; }
  .p-15px-1600 { padding: 15px; }
  .gap-15px-1600 { gap: 15px; }
  .w-15px-1600 { width: 15px; }
  .h-15px-1600 { height: 15px; }
  .m-16px-1600 { margin: 16px; }
  .p-16px-1600 { padding: 16px; }
  .gap-16px-1600 { gap: 16px; }
  .w-16px-1600 { width: 16px; }
  .h-16px-1600 { height: 16px; }
  .m-17px-1600 { margin: 17px; }
  .p-17px-1600 { padding: 17px; }
  .gap-17px-1600 { gap: 17px; }
  .w-17px-1600 { width: 17px; }
  .h-17px-1600 { height: 17px; }
  .m-18px-1600 { margin: 18px; }
  .p-18px-1600 { padding: 18px; }
  .gap-18px-1600 { gap: 18px; }
  .w-18px-1600 { width: 18px; }
  .h-18px-1600 { height: 18px; }
  .m-19px-1600 { margin: 19px; }
  .p-19px-1600 { padding: 19px; }
  .gap-19px-1600 { gap: 19px; }
  .w-19px-1600 { width: 19px; }
  .h-19px-1600 { height: 19px; }
  .m-20px-1600 { margin: 20px; }
  .p-20px-1600 { padding: 20px; }
  .gap-20px-1600 { gap: 20px; }
  .w-20px-1600 { width: 20px; }
  .h-20px-1600 { height: 20px; }
  .m-21px-1600 { margin: 21px; }
  .p-21px-1600 { padding: 21px; }
  .gap-21px-1600 { gap: 21px; }
  .w-21px-1600 { width: 21px; }
  .h-21px-1600 { height: 21px; }
  .m-22px-1600 { margin: 22px; }
  .p-22px-1600 { padding: 22px; }
  .gap-22px-1600 { gap: 22px; }
  .w-22px-1600 { width: 22px; }
  .h-22px-1600 { height: 22px; }
  .m-23px-1600 { margin: 23px; }
  .p-23px-1600 { padding: 23px; }
  .gap-23px-1600 { gap: 23px; }
  .w-23px-1600 { width: 23px; }
  .h-23px-1600 { height: 23px; }
  .m-24px-1600 { margin: 24px; }
  .p-24px-1600 { padding: 24px; }
  .gap-24px-1600 { gap: 24px; }
  .w-24px-1600 { width: 24px; }
  .h-24px-1600 { height: 24px; }
  .m-25px-1600 { margin: 25px; }
  .p-25px-1600 { padding: 25px; }
  .gap-25px-1600 { gap: 25px; }
  .w-25px-1600 { width: 25px; }
  .h-25px-1600 { height: 25px; }
  .m-26px-1600 { margin: 26px; }
  .p-26px-1600 { padding: 26px; }
  .gap-26px-1600 { gap: 26px; }
  .w-26px-1600 { width: 26px; }
  .h-26px-1600 { height: 26px; }
  .m-27px-1600 { margin: 27px; }
  .p-27px-1600 { padding: 27px; }
  .gap-27px-1600 { gap: 27px; }
  .w-27px-1600 { width: 27px; }
  .h-27px-1600 { height: 27px; }
  .m-28px-1600 { margin: 28px; }
  .p-28px-1600 { padding: 28px; }
  .gap-28px-1600 { gap: 28px; }
  .w-28px-1600 { width: 28px; }
  .h-28px-1600 { height: 28px; }
  .m-29px-1600 { margin: 29px; }
  .p-29px-1600 { padding: 29px; }
  .gap-29px-1600 { gap: 29px; }
  .w-29px-1600 { width: 29px; }
  .h-29px-1600 { height: 29px; }
  .m-30px-1600 { margin: 30px; }
  .p-30px-1600 { padding: 30px; }
  .gap-30px-1600 { gap: 30px; }
  .w-30px-1600 { width: 30px; }
  .h-30px-1600 { height: 30px; }
}