Responsive font sizes - plugin

user_1423196 0
Viewed 9875

I have one question for u guyz (and gals ;) )

does anybody know any existing plugin for Tailwind CSS which make font sizes responsive (except for lower and upper screen size where font size is fixed) aka. like that:

body { font-size: calc(16px + (26 - 16) * ((100vw - 768px) / (1280 - 768))); }
@media screen and (max-width: 768px) { body { font-size: 16px; }}
@media screen and (min-width: 1280px) { body { font-size: 26px; }}
  • lower screen width - fixed font size
  • screen sizes in between - responsive font size from 16px to 26px
  • wider screen width - fixed font size
tailwind-css
2 Answers

1- Define font sizes for each breakpoint on tailwind.config.js

module.exports = {
    theme: {
      extend: {
        fontSize: {
          'body-lg': '1rem',
          'body': '.875rem',
        }
      }
    }
  }

2- Create classes on global.css by importing definitions from config file.

@layer base {
  body {
    @apply text-body;
  }

  @screen lg { // applying font size for lg breakpoint
    body {
      @apply text-body-lg;
    }
  }
}
user_101247590

Just put some rule like the following e.g.:

<project/path/to>/tailwind.css

html {
  font-size: 16px;
  @screen md {
    font-size: 17px;
  }
  @screen lg {
    font-size: 26px;
  }
}

No need for a plugin.

user_10904380
Related