@ilijazm/tailwindcss-section/src/tailwindcss-section.css

Tailwind CSS Section is a plugin for Tailwind CSS v4 that adds semantic utility classes for sections which add block padding and a relative position.

@import "@ilijazm/tailwindcss-semantic-spacing";

@theme {
  --spacing-section-xs: var(--spacing-md);
  --spacing-section-sm: var(--spacing-lg);
  --spacing-section-md: var(--spacing-xl);
  --spacing-section-lg: var(--spacing-2xl);
  --spacing-section-xl: var(--spacing-3xl);
  --spacing-section-2xl: var(--spacing-4xl);
}

@utility section-* {
  @apply relative;

  /* prettier-ignore */
  padding-block: --value(--spacing-section-*, [length], [percentage]);
}