Почему не работает толщина шрифта Tailwind?

Question

[Max Sagaidak]

Подключил сначала Inter ровно так же как и Poppins. Но одно и тоже каждый раз, хочу например где то какому-то div задать font-poppins font-medium | font-bold | .... но нефига не работает. Работает только 2 варианта - какой-то там супер толстый и regular. Ну что это такое. Вот код:

tailwind.config.js

theme: {
    extend: {
      colors: {
        primary: { ...colors.sky, DEFAULT: colors.sky[500] },
      },
      fontFamily: {
        poppins: ['"Poppins"', 'sans'],
      },
    },
  },

main.css

@import '@fontsource/poppins';

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
        'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
        'Helvetica Neue', sans-serif;
    }

    body {
        @apply bg-gray-50
    }
}

Кто не понял, то у меня как бы работает шрифт который я подключаю, но работает только две толщины, толстый и обычный, никакие типо thin и medium нет. Хотя в шрифтах я уверен они есть.

Я не понимаю в чем проблема, я как только не побывал - дошло до абсурда и так poppins: ['"Poppins"', 'sans'] и так poppins: ['Poppins', 'sans']. Ну проще говоря я в тупике. ХЕЛП МИ КЛИЗ

Comments

[WbICHA]

Очевидно типы неправильные, раз ты тс в теги запихнул.

[Модератор]

Не надо ставить как можно больше тэгов. Лучше оставить один, но конкретный, с которым проблема.
См.п.3.1 Регламента.

[Антон Антон]

судя по первому main css там уже Poppins везде должен быть и в конфиге tailwind он не нужен

[Антон Антон]

естественно, если используется только postcss, то должен быть установлен https://github.com/postcss/postcss-import (лично я по возможности использую sass)

[Max Sagaidak]

Антон Антон, зачем вообще он нужен postcss-import ?

[Max Sagaidak]

Антон Антон, мне пришлось сделать так что бы подключить все толшины шрифта
font.css

@import '@fontsource/poppins/100.css';
@import '@fontsource/poppins/200.css';
@import '@fontsource/poppins/300.css';
@import '@fontsource/poppins/400.css';
@import '@fontsource/poppins/500.css';
@import '@fontsource/poppins/600.css';
@import '@fontsource/poppins/700.css';
@import '@fontsource/poppins/800.css';
@import '@fontsource/poppins/900.css';

main.css

@import "./assets/css/fonts/fonts.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        @apply font-poppins
    }

    body {
        @apply bg-gray-50
    }
}

[Антон Антон]

Max Sagaidak, вероятно это потому что Poppins в отличие от Inter не "variable font" и браузер не умеет его "растягивать" автоматически при отсутствии нужной жирности (кстати, это растягивание не всегда соответствует шрифту с нужной жирностью, просто похоже выглядит)

[Антон Антон]

кстати, variable fonts еще и криво работает на старых браузерах/ОС (например такой случай тут: https://github.com/quasarframework/quasar/issues/1...)