Home  >  Article  >  Web Front-end  >  Setting Up Tailwind in React Native SDK with NativeWind

Setting Up Tailwind in React Native SDK with NativeWind

Barbara Streisand
Barbara StreisandOriginal
2024-11-05 08:14:02405browse

When installing the new React Native 51 SDK and Looking to write you code using Tailwind, I'm not going to waste your time let's start by:

Looking at the folder Structure first!
Setting Up Tailwind in React Native SDK with NativeWind

In Your file structure we need to add a few files for it to work, Inside the "app" create a global.css file then add:

Step 1

global.css

Setting Up Tailwind in React Native SDK with NativeWind

Step 2

index.tsx

Then now you are one step forward, now will be adding a simple code for the "/app/(tabs)/index.tsx".

Setting Up Tailwind in React Native SDK with NativeWind

Now upon adding this code, you will encounter an error for the className, here you will need to add a file nativewind-env.d.ts

Note: NativeWind extends the React Native types via declaration merging. The simplest method to include the types is to create a new nativewind-env.d.ts file and add a triple-slash directive referencing the types.

inside the file:
Setting Up Tailwind in React Native SDK with NativeWind
///

Then now this error should have been fixed!

Step 3

In your "/app/_layout.tsx" you must make sure you have this code:

Setting Up Tailwind in React Native SDK with NativeWind
`import { Slot } from "expo-router";

// Import your global CSS file
import "../app/global.css";

export default Slot;`

Step 4

Then now you will have to update your tailwind.config.js

Setting Up Tailwind in React Native SDK with NativeWind

/**@type {import('tailwindcss').Config}*/
module.exports = {
// NOTE: Update this to include the paths to all of your component files.
content: ["./app/**/*.{js,jsx,ts,tsx}"],
presets: [require("nativewind/preset")],
theme: {
extend: {},
},
plugins: [],
};

copy! the code and replace the one you have.

Step 5

Here we will be adding the most important part of the "Nativewind" to work with React Native/Expo: Our "babel.config.js"

Setting Up Tailwind in React Native SDK with NativeWind

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

make sure you have this code as it here.

Step 6

the final part to make Tailwind work, is "metro.config.js" if you don't have this file please create it then you added this code:

Setting Up Tailwind in React Native SDK with NativeWind

`const { getDefaultConfig } = require("expo/metro-config");
const { withNativeWind } = require("nativewind/metro");

const config = getDefaultConfig(__dirname);

module.exports = withNativeWind(config, { input: "./app/global.css" });`

The end

Happy Coding

The above is the detailed content of Setting Up Tailwind in React Native SDK with NativeWind. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn