CODEWITHSUNDEEP
react-nativebabeljstailwind-css
Dotman
Dotman

Reputation: 133

Nativewind Tailwind not rendering css effects

I am working in react native to create an app using nativewind, however, I cant seem to get the tailwind to be showing up properly. I used the nativewind guide to setting up tailwind with the react native cli.

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ["nativewind/babel"],
};

tailwind.config.js

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

package.json

{
  "name": "investanapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "nativewind": "^2.0.11",
    "react": "18.2.0",
    "react-native": "0.72.4"
    
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4",
    "tailwindcss": "^3.3.3"
  },
  "engines": {
    "node": ">=16"
  }
}

Upvotes: 0

Views: 437

Answers (1)

MD rubel
MD rubel

Reputation: 1

Create file named nativewind-env.d.ts and put the following code there to get className

/// <reference types="nativewind/types" />

Upvotes: 0

Related Questions