javascripttypescriptreact-nativetailwind-cssnativewind

Config Tailwind in react native not working

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

Solution

  • 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: [],
};