تغيير كلاسات tailwind بإستخدام جافاسكريبت

بداية، يمكنك اختصار الشيفرات التالية: 

function toggleOn(){
    if(toggleBtn.classList.contains('toggle-on')){
        toggleBtn.classList.remove('toggle-on');
        toggleBtn.classList.add('toggle-off');
        navMenu.classList.remove('w-[75px]');
        navMenu.classList.remove('rounded-[40px]');
        navMenu.classList.add('w-[250px]');
        navMenu.classList.add('rounded-[20px]');
        container.classList.remove('left-[70px]');
        container.classList.add('left-[250px]');
    }else{
        toggleBtn.classList.remove('toggle-off');
        toggleBtn.classList.add('toggle-on');
        navMenu.classList.remove('w-[250px]');
        navMenu.classList.add('w-[75px]');
        navMenu.classList.remove('rounded-[20px]');
        navMenu.classList.add('rounded-[40px]');
        container.classList.remove('left-[250px]');
        container.classList.add('left-[70px]');
    }

لتصبح:

function toggleOn(){
    if(toggleBtn.classList.contains('toggle-on')){
        toggleBtn.classList.remove('toggle-on');
        toggleBtn.classList.add('toggle-off');
      
        navMenu.classList.remove('w-[75px]' ,'rounded-[40px]');
        navMenu.classList.add('w-[250px]' ,'rounded-[20px]');

        container.classList.remove('left-[70px]');
        container.classList.add('left-[250px]');
    }else{
        toggleBtn.classList.remove('toggle-off');
        toggleBtn.classList.add('toggle-on');

        navMenu.classList.remove('w-[250px]' ,'rounded-[20px]');
        navMenu.classList.add('w-[75px]' ,'rounded-[40px]');

        container.classList.remove('left-[250px]');
        container.classList.add('left-[70px]');
    }

ثم ما الحاجة من كل هاته التلاعبات بشجرة الوثيقة؟ لما لا يكفي تغيير صنف واحد وليكن هو حاوي قائمة التصفح. قم بتبديل صنف واحد مثلا وليكن is-enabled

function toggleOn(){
    if(toggleBtn.classList.contains('toggle-on')){
        navMenu.classList.add('is-enabled')
    }else{
        navMenu.classList.remove('is-enabled')
    }

أو حتى:

function toggleOn(){
    navMenu.classList.toggle('is-enabled')

ثم تعامل مع الباقي عن طريق الـ css و tailwindCSS:

.nav-menu {
   
    // اي تنسيقات

}

.nav-menu .toggle-btn{
   
    // اي تنسيقات

}

.nav-menu .container{
   
    // اي تنسيقات

}

.nav-menu.is-enabled {
   
    // اي تنسيقات

}

.nav-menu.is-enabled .toggle-btn{
   
    // اي تنسيقات

}

.nav-menu.is-enabled .container{
   
    // اي تنسيقات

}

او عن طريق sass:

.nav-menu {
   
    // اي تنسيقات
    
    .toggle-btn{
         // اي تنسيقات
    }
    
    .container{
       // اي تنسيقات
    }
   

    &.is-enabled {
   
       // اي تنسيقات
       .toggle-btn{
         // اي تنسيقات
       }
    
       .container{
         // اي تنسيقات
       }

    }
}

يوجد قاعدة تسعى لتحسين تجربة الاستخدام تسمى Less Javascript, more HTML and CSS أي "اقل جافاسكربت ، اكثر HTML و CSS". حاول التقليل من الاعتماد على جافاسكربت كليا في اشياء يمكن القيام بها عن طريق css (رغم انها قادرة).