React native Question posted in
The official React Native documentation can be found here.

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

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


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search