Início / coding / Perguntas / 79426266
Accepted
Chrillewoodz
Asked: 2025-02-10 14:43:45 +0800 CST

Usar herança como valor no Tailwind v4 não funciona

  • 772

https://play.tailwindcss.com/2VVorQvG0T?file=css

Desde a atualização para o Tailwind v4, onde a configuração é somente CSS, não consigo mais usar inheritcomo valor. Ele cria a classe, mas o valor real da variável parece não funcionar por algum motivo.

<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@theme {
  --radius-inherit: inherit;
}
</style>

<div class="w-[100px] h-[100px] bg-blue-500 rounded-3xl m-20">
  <div class="rounded-inherit bg-red-600">inherit</div>
</div>

Isso é um bug no Tailwind ou estou fazendo algo errado?

css

1 respostas

  1. Best Answer

    Na verdade, se você der uma olhada no CSS gerado, ele cria perfeitamente o que você pediu. O problema é que mesmo quando você replica isso com CSS nativo, ainda não funciona:

    :root {
  --radius-inherit: inherit;
}

.rounded-inherit {
  border-radius: var(--radius-inherit);
}

.first {
  margin: 5rem; 
  border-radius: 1.5rem; 
  background-color: #3B82F6; 
  width: 100px;
  height: 100px;
}

.second {
  background-color: #DC2626; 
}
    <div class="first">
  <div class="rounded-inherit second">inherit</div>
</div>

    E se omitirmos a variável da fórmula, funciona:

    .rounded-inherit {
  border-radius: inherit;
}

.first {
  margin: 5rem; 
  border-radius: 1.5rem; 
  background-color: #3B82F6; 
  width: 100px;
  height: 100px;
}

.second {
  background-color: #DC2626; 
}
    <div class="first">
  <div class="rounded-inherit second">inherit</div>
</div>

    Então, em vez de usar uma variável, eu declararia manualmente a classe no TailwindCSS:

    .rounded-inherit {
  border-radius: inherit;
}
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="w-[100px] h-[100px] bg-blue-500 rounded-3xl m-20">
  <div class="rounded-inherit bg-red-600">inherit</div>
</div>

    Isso é um erro? Sim, pelo menos é uma deficiência. Eu verifiquei a bg-inheritclasse, e lá, o Tailwind declara a classe perfeitamente sem uma var()variável, veja aqui:

    .rounded-inherit {
  border-radius: inherit;
}
    <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

<div class="w-[100px] h-[100px] bg-blue-500 rounded-3xl m-20">
  <div class="rounded-inherit bg-inherit border-2">inherit</div>
</div>

    /* generated */
.bg-inherit {
  background-color: inherit; /* without var() */
}

    No entanto, bg-inherité uma classe criada por padrão. Presumo que todas as variáveis ​​declaradas em @themeaparecerão em var(), então inheritnão pode funcionar em lugar nenhum, pois precisa ser diretamente vinculado à classe, não a uma variável separada. Talvez você possa criar uma solicitação de desenvolvimento para incluir rounded-inheritno Tailwind, semelhante a bg-inherit.

    E como herdar não pode ser passado com uma variável em CSS - já que ele foi criado para expressar herança diretamente - acho que também é um erro o Tailwind não avisar ao declarar uma variável em @theme.

    • 1

relate perguntas