Kevin Powell - Community•4w ago

Configuring Tailwind File

I want to know what's the approach to add custom properties for the "font sizes" and "line height" of h1 , h2, p that changes different breakpoints of small and desktop screen sizes I found this but I don't know if is the most convenient form to do it:

tailwind.config.js:
theme: {
    extend: {
      fontSize: {
        // Small breakpoints
        'h1-sm': '2rem',  // Example: 32px
        'h2-sm': '1.5rem', // Example: 24px
        'p-sm': '1rem',    // Example: 16px

        // Desktop breakpoints
        'h1-md': '3rem',  // Example: 48px
        'h2-md': '2rem',  // Example: 32px
        'p-md': '1.25rem', // Example: 20px
      },
    },
  },

main.css file:
@import "tailwindcss/base";

/* Custom utility classes for small breakpoints */
.h1-sm {
  @apply text-h1-sm;
}

.h2-sm {
  @apply text-h2-sm;
}

.p-sm {
  @apply text-p-sm;
}

/* Custom utility classes for desktop breakpoints */
@media (min-width: 768px) {
  .h1-md {
    @apply text-h1-md;
  }

  .h2-md {
    @apply text-h2-md;
  }

  .p-md {
    @apply text-p-md;
  }
}

tailwind.config.js:
theme: {
    extend: {
      fontSize: {
        // Small breakpoints
        'h1-sm': '2rem',  // Example: 32px
        'h2-sm': '1.5rem', // Example: 24px
        'p-sm': '1rem',    // Example: 16px

        // Desktop breakpoints
        'h1-md': '3rem',  // Example: 48px
        'h2-md': '2rem',  // Example: 32px
        'p-md': '1.25rem', // Example: 20px
      },
    },
  },

main.css file:
@import "tailwindcss/base";

/* Custom utility classes for small breakpoints */
.h1-sm {
  @apply text-h1-sm;
}

.h2-sm {
  @apply text-h2-sm;
}

.p-sm {
  @apply text-p-sm;
}

/* Custom utility classes for desktop breakpoints */
@media (min-width: 768px) {
  .h1-md {
    @apply text-h1-md;
  }

  .h2-md {
    @apply text-h2-md;
  }

  .p-md {
    @apply text-p-md;
  }
}

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Configuring Tailwind File