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

React native – Tailwind css is only applied to App.js but not inside other folders

I need help figure out where is the error.
This is my github repo link: https://github.com/khouloudhaddad/food-delivery
TailwindCss not working iside folders

This is my github repo link: https://github.com/khouloudhaddad/food-delivery

Package.json:

{
  "name": "client",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@expo/metro-runtime": "^3.1.1",
    "@react-navigation/native": "^6.1.9",
    "@react-navigation/native-stack": "^6.9.17",
    "add": "^2.0.6",
    "expo": "^50.0.0",
    "expo-status-bar": "~1.11.1",
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.2",
    "react-native-feather": "^1.1.2",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "^0.19.10",
    "react-scripts": "^5.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "tailwindcss": "3.3.2"
  },
  "private": true
}

babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: ["nativewind/babel"],
  };
};

tailwind.config.js

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

Project stucture

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solved by adding the following lines to my App.js as described in https://www.nativewind.dev/quick-starts/expo?fbclid=IwAR1rewV7ICVSp-fD3eU1QyNAjIqNbhAUggOwoexmy5Z4oxzCJsvAo4R-uPA#expo-web

    import { NativeWindStyleSheet } from "nativewind";

NativeWindStyleSheet.setOutput({
  default: "native",
});

  2. 0 
     // webpack.config.js
const createExpoWebpackConfigAsync = require("@expo/webpack-config");

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: {
        dangerouslyAddModulePathsToTranspile: ["nativewind"],
      },
    },
    argv,
  );

  config.module.rules.push({
    test: /.css$/i,
    use: ["postcss-loader"],
  });

  return config;
};

    https://www.nativewind.dev/quick-starts/expo?fbclid=IwAR1rewV7ICVSp-fD3eU1QyNAjIqNbhAUggOwoexmy5Z4oxzCJsvAo4R-uPA#expo-web

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

Back To Top
Search