How to change the default font family when locale changes using tailwind&nuxtjs?

Question

I've a bilingual (Arabic and English) website built with nuxtjs and tailwind, arabic is rtl language.

tailwind.config.js file:

theme: {
  extend: {
    fontFamily: {
      sans: ['Open Sans', 'sans-serif', 'Ubuntu'],
      notoKufi: ['Noto Kufi Arabic'],
    }
  }
}

What I want to accomplish is changing the default font family in tailwind when user changes the locale/direction of the website.

I've read the docs, and tried Customizing the default font section and added this code to css

[style*="direction:rtl"]{
   font-family: Noto Kufi Arabic
}

[style*="direction:ltr"]{
   font-family: Open Sans
}

but nothing changed.

Answer 1

I've found a solution to change the font-family according to the selected locale using tailwind.

At a global.css file I added this code

@tailwind base;

*[dir='ltr'] {
   @apply font-openSans !important;
 }

*[dir='rtl'] {
   @apply font-sans !important;
 }

and when changing the locale I use this.$route.path.includes('en') to set HTML current direction to ltr