Início / coding / Perguntas / 79569620
Accepted
윤효준
Asked: 2025-04-12 03:57:49 +0800 CST

Como configurar estilos de fonte com @theme no Tailwind CSS v4

  • 772

Eu usei tailwind.config.jsassim:

export default {
  theme: {
    extend: {
      fontSize: {
        'heading-banner-title': ['88px', { lineHeight: '100px', fontWeight: '700' }],
      },
    },
  },
};

Agora quero usar a mesma configuração no Tailwind v4, mas usando @theme:

@theme {
  --text-heading-banner-title: 88px; /* I also want to add line-height and font-weight */
}

Anteriormente, eu estava usando o seguinte estilo:

.text-heading-banner-title {
  @apply text-[88px] leading-[100px] font-bold;
}

Entretanto, ao usar essa abordagem, prefixos responsivos (por exemplo, sm:text-heading-banner-title) não funcionam como esperado.

tailwind-css

1 respostas

  1. Best Answer

    De acordo com a documentação , você pode adicionar opções extras como variáveis ​​CSS extras separadas por dois hífens --:

    <script src="https://unpkg.com/@tailwindcss/[email protected]"></script>

<style type="text/tailwindcss">
@theme {
  --text-heading-banner-title: 88px;
  --text-heading-banner-title--line-height: 100px;
  --text-heading-banner-title--font-weight: 700;
}
</style>

<div class="text-heading-banner-title">
  Hello world
</div>

    • 2

relate perguntas