Custom font size does not work tailwind

i am still new at tailwind but i got problem, i need to add custom font size 76px so i added it to my tailwind config

  fontSize: {
        'vl': '76px',
  },

and it work perfect but i also want at small screen to use text-sm and on larger screens to use text-vl which i added as i mention before so i add my class in that form

 <h1 class="uppercase text-white font-bold text-center mt-16 main_slogan sm:text-vl text-xs">
            Unleash Your
            <br> 
            Business To The Next Step
   </h1>

but i found that text-sm always override text-vl even in larger screens what i should do

aurelianspodarec

3 years ago

Level 7

Is your tailwindcss looking similar to this? Did you put 'extend?

 theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            maxWidth: {
                '8xl'  : '86rem',
                '9xl'  : '90rem',
                '10xl' : '94rem',
            },
            colors: {
                brand: {
                    '500' : '#db2777'
                }
            },
        },
    },

CrastyCrap

3 years ago

Level 5

@aurelianspodarec yes i did this is my full config

module.exports = {
  content: [
    './index.html'
  ],
  theme: {
    container: {
      center: true,
      screens: {
        'xl': {'max': '1279px'},
        'lg': {'max': '1023px'},
        'md': {'max': '767px'},
        'sm': {'max': '639px'},
      },
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
    extend: {
      colors: {
        'body': '#1a1a1a',
        'selected-text': '#A3A3FF',
        'theme': '#3F3FFF',
        'nav': '#404053',
        'secondary': '#9191A4',
        'badge': '#3F3F51',
        'input-border': '#565666',
        'input': '#2A2A35',
        'silver': 'rgba(84, 84, 84, 0.48)',
        'light': 'rgba(255, 255, 255, .87)',
        'green': '#42b883',
        'indigo': '#213547',
        'silver-900': '#3a3a3a',
        'blue-100': '#549ced'
      },
      fontSize: {
        'vl': '76px',
      },
      fontFamily: {
        'poppins': ["'Inter'", 'sans-serif']
      }
    },
  },
  plugins: [],
}

aurelianspodarec

3 years ago

Level 7

@CrastyCrap Did you re-compile the file? did you run npm run-script watch?

kokoshneta

3 years ago

Level 27

Your breakpoint is wrong, as far as I can tell. Remember that Tailwind classes are mobile first, so your breakpoints mean “anything larger than this size”. So text-xs sm:text-vl will apply text-xs at screen sizes up to sm (640px width); at any larger screen size, text-vl will be applied.

If you change it to text-xs lg:text-vl, it will use text-xs up until the lg breakpoint (1024px width), after which it will use text-vl. Given that 76px is gigantic, I’m guessing you probably won’t want to use it until at least lg, probably even larger.

Please or to participate in this conversation.