CSS class="***" değişkeni belirleme

geçen gün gezerken bir web sitesinde aşağıdaki gibi bir css dökümü gördüm.

Bu nasıl oluyorda hata vermiyor?

.md\:text-4xl {
    font-size: 2.25rem;
}

adam resmen class'ı .md\:text-4xl diye yazmış.

Bu class isimlerini belirlerken kabul edilen karakterler listesine nereden ulaşabiliriz dostlar?

javascript ile değiştirilen bir css kodlamasıdır. belirli paremetreler js süzgecinden geçip geçerli css kodlarına dönüştürülüyordur.

Teşekkürler
tam da tahmin ettiğim cevap gene de acaba diyerek sorayım dedim. O işlemi detaylı öğrenmek isterdim. Belli ki sass gibi değişkenler kullanıyor ama bunu kendi içinde renderleyip css e basıyor. Değişik. (Tabi hayal dünyamda kurguladığım gibiyse )

npm ile böyle bir örnek mevcut.

https://tailwindcss.com

arkadaşın dediği gibi dönüştürülmüş.

Bu sanırım bir plug-in den ziyade toolkit. Tıpkı bootstrap gibi. Biraz daha inceleyim bakalım kendi css 'i dışında diğerleri için de destek sunuyor mu

Bu yöntem aslında demode bir yöntemdir. W3 bu yöntem ve benzeri sorunlar için uzun zaman önce Css ve Html de güncelleme yayınladı, Css için var (değişken) tanımlama özelliğini getirdi.
Paylaştığınız yöntemin kullanılma amacı genelde ::before,::after sınıflarının değerlerini html üzerinden değiştirebilmektir. Artık bunun yerine var(degisken); şeklinde sınıf değerini atayabilirsiniz.

Örnek:

.sinif::before{
color:var(--renk);
}

<div class="sinif" style="--renk:#333"></div>

Sadece bilgilendirmek istedim. Kullanım açısından bahsettiğim yöntem daha stabil ve basittir. Standart gereğide kullanması daha uygundur.