Por que o tailwindcss define custom properties no seletor * e não no :root?

[felquis]

Pessoal, analisando a estrutura do base.css do TailwindCSS versão 3 notei que não usam o :root para definir as custom properties, mas este o selector *,:after,:before.

*,:after,:before { /* <-- por que não usam :root? */
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: #3b82f680;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia:
}

Em meu projeto eu troquei pelo :root e não notei nenhuma diferença em estilos como backdrop-filter, transform ou before:.

Alguém consegue esclarecer? Obrigado desde já.

Update 23/Feb/2022
A pessoa que criou o tailwindcss me respondeu no Twitter https://twitter.com/adamwathan/status/1496113139678593031

Minha tradução livre:

Temos que fazer desse jeito para garantir que a custom property seja redefinida em cada elemento e que não sejam herdadas, exemplo:

<div class=“bg-red-500 bg-opacity-50”>
  <div class=“bg-black”>…</div>
</div>

Se usar o :root, a div filha também teria 50% de transparência.

(Acho que não é um bom exemplo pois não definimos as variáveis de opacidade dessa forma, mas acho que da pra entender meu ponto 👍🏻)
?

Agora com base neste comentário, vou usa-la como direção para ver se consigo reproduzir +- o que ele está dizendo para ver se compreendo 100%

Update 28/Abril/2022

Escrevi um artigo explicando o que entendi com exemplos.

Leia na integra em: https://tbbc.app/posts/pt-br/tailwindcss-custom-property-definition/

[felipe-heredia]

Segundo a W3Schools:

Seletor	Descrição
*	Seleciona todos os elementos
:root	Seleciona o elemento raiz do documento

Acredito que seja só uma escolha do tailwind, não acredito que implique em muita coisa.

[felquis]

Obrigado por responder,

Se foi uma escolha, será que tem um motivo por trás dessa escolha? É essa motivação que quero entender.

[felipe-heredia]

Talvez isso seja de díficil resposta por quem não mantém o projeto. Acredito que seja melhor perguntar isso em uma issue no repositório do Tailwind se for algo de extrema importância para o seu projeto.

[felquis]

Finalmente parei para estuda-lo e entendi a diferença escrevi isso aqui para tentar explicar - https://tbbc.app/posts/pt-br/tailwindcss-custom-property-definition/ - veja se ajuda no entendimento.

[felquis]

Update 23/Feb/2022
A pessoa que criou o tailwindcss me respondeu no Twitter https://twitter.com/adamwathan/status/1496113139678593031

Minha tradução livre:

Temos que fazer desse jeito para garantir que a custom property seja redefinida em cada elemento e que não sejam herdadas, exemplo:

<div class=“bg-red-500 bg-opacity-50”>
  <div class=“bg-black”>…</div>
</div>

Se usar o :root, a div filha também teria 50% de transparência.

(Acho que não é um bom exemplo pois não definimos as variáveis de opacidade dessa forma, mas acho que da pra entender meu ponto 👍🏻)
?

Agora com base neste comentário, vou usa-la como direção para ver se consigo reproduzir +- o que ele está dizendo para ver se compreendo 100%

[felipe-heredia]

Bacana @felquis, assim que fazer o teste compartilhe aqui o resultado!

[felquis]

Update 28/Abril/2022

Escrevi um artigo explicando o que entendi com exemplos.

Leia na integra em: https://tbbc.app/posts/pt-br/tailwindcss-custom-property-definition/