successor of tailwindcss for styling
<pre><code class="lang-plaintext">npm install nativewind
npm install --dev tailwindcss
</code></pre>
<h1 id="heading-create-tailwindconfigjs">Create tailwind.config.js</h1>
<pre><code class="lang-plaintext">module.exports = {

 content: ["./App.{js,jsx,ts,tsx}", "./Components/**/*.{js,jsx,ts,tsx}"],
 theme: {
 extend: {},
 },
 plugins: [],
 }
</code></pre>
<h1 id="heading-change-babelconfigjs">Change babel.config.js</h1>
<pre><code class="lang-javascript">// babel.config.js
module.exports = function (api) {
 api.cache(true);
 return {
 presets: ["babel-preset-expo"],

//add this line
+ plugins: ["nativewind/babel"],
 };
};
</code></pre>
Thats it done now go and play with react native
now
<pre><code class="lang-xml">&lt;Text className="text-sky-500"&gt;The Boom GUY&lt;/Text&gt;
</code></pre>
this will make it sky in color with darkness 500

successor of tailwindcss for styling

```plaintext
npm install nativewind
npm install --dev tailwindcss
```

# Create tailwind.config.js

```plaintext
module.exports = {
 
 content: ["./App.{js,jsx,ts,tsx}", "./Components/**/*.{js,jsx,ts,tsx}"],
 theme: {
 extend: {},
 },
 plugins: [],
 }
```

# Change babel.config.js

```javascript
// babel.config.js
module.exports = function (api) {
 api.cache(true);
 return {
 presets: ["babel-preset-expo"],

//add this line
+ plugins: ["nativewind/babel"],
 };
};
```

Thats it done now go and play with react native

now

```xml
<Text className="text-sky-500">The Boom GUY</Text>
```

this will make it sky in color with darkness 500

Adding nativewindcss

Create tailwind.config.js

Change babel.config.js