An overview of some Tailwind specifics

This post is for Tailwind users who jumped right into using the library like I did but didn't get a comprehensive overview of the core features that might change how you use it. I've collected some notes on this below:

• All Tailwind measurements are relatively based on the default 16px size in the browser. By using rem measurements, everything is a multiple (or division) of 16px. For example: p-1 for padding is set to 0.25rem (4px) and p-2 is 0.5rem (6px) while p-4 is 1rem (16px). It's a bit confusing at first but the best way to keep it simple is by using the 4px measurement instead, since all are sizes multiples of 4px e.g. h-24 = 24 * 4 // 96px. Even p-0 which is just 0 * 4.
• All spacing and sizing measurements start at zero, have a single pixel version which is just property-px e.g. p-px or h-px (for 1px). They all go up to 96 and jump by 4 after 16.
• There's also shortcuts like: auto, 1/2, 1/3, up to 1/6. And full is 100%, while screen is 100vh.
• For responsiveness, Tailwind uses min-width so everything bigger than the size specified is styled. For example having styles like: bg-green-500 md:bg-blue-500 will apply green to all screen sizes below the medium breakpoint which is at min-width: 768px.
• Use @apply to reduce repetition and tons of classes within your HTML files. This helps you create classes like .btn or .heading which you can use similar to frameworks like Bootstrap. Here's a guide on Tailwind's @apply directive: https://tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
  
• Tailwind comes with a pretty exhaustive list of spacing, sizing, and color options but you might need to customize something specific to your brand or UI and that's actually pretty easily done using the extend config options: https://tailwindcss.com/docs/customizing-spacing#extending-the-default-spacing-scale
• There's also a bunch of themes and UI kits available for Tailwind:
• • Daisy UI: https://daisyui.com/
  • Preline: https://preline.co/
  • HyperUI: https://www.hyperui.dev/
  • Flowbite: https://flowbite.com/