Config Tailwind in react native not working

Question

i am new with react native and typescript. in this project i want to use the tailwind css and follow instruction at nativewind to config tailwind.config.js like this

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.tsx",
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

but any file in the src not apply the css.

and if i config it like this

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./App.tsx",
    // "./src/**/*.{js,jsx,ts,tsx}",
    "./src/screens/Home.tsx",
    "./src/screens/MainLayout.tsx",
    "./src/screens/Profile.tsx",
    "./src/screens/Search.tsx",
    "./src/screens/SplashScreen.tsx",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

then its working, what have i done wrong

Answer 1

thanks to Aqeel Ahmad i can fix this with glob

new config tailwind.config.js :

/** @type {import('tailwindcss').Config} */
const globSync = require('glob').sync;

module.exports = {
  content: [
    "./App.tsx",
    ...globSync('./src/**/*.tsx'),
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Answer 2

Dear try this by apply css on each file based on extention

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./App.tsx",
"./src/**/*.tsx",
"./src/**/*.js",
"./src/**/*.ts",
"./src/**/*.jsx",
],
theme: {
 extend: {},
},
plugins: [],
}

Hope this will solve problem