Bare React Native CLI with tailwindcss nativewind
💯No Expo. 💯No guesswork. 💯Just working #tailwindcss in pure #react #native CLI — step by step.
Tired of fighting with styling in #reactnative ?
#nativewind brings #Tailwind #CSS to bare #reactnative #CLI — and in this video, I show you exactly how to set it up from scratch, even when things break (yes, including the #Worklets #fix !).
✅ Step 1: Install #dependencies
npm install nativewind react-native-reanimated
npm install --save-dev tailwindcss@^3.4.17
npm install react-native-worklets@0.6.1
✅ Step 2: Generate Tailwind #config by #running this #command
npx tailwindcss init
✅ Step 3: #modify the #following #files
💥 Modify tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./App.tsx', './src/**/*.{js,jsx,ts,tsx}'],
presets: [require('nativewind/preset')],
theme: {
colors: {
tr: 'transparent',
white: 'FFFFFF',
black: '000000',
red: 'FF0000',
blue: '0000FF',
green: '008000',
yellow: 'FFFF00',
},
extend: {},
},
plugins: [],
}
💥 Modify tsconfig.json
{
"extends": "@react-native/typescript-config",
"include": ["**/*.ts", "**/*.tsx", "nativewind-env.d.ts"],
"exclude": ["**/node_modules", "**/Pods"]
}
💥 Modify metro.config.js
const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withNativeWind } = require('nativewind/metro')
/**
Metro configuration
https://reactnative.dev/docs/metro
*
@type {import('@react-native/metro-config').MetroConfig}
*/
const config = mergeConfig(getDefaultConfig(__dirname), {
/* your config */
})
module.exports = withNativeWind(config, { input: './global.css' })
💥 Modify babel.config.js
module.exports = {
presets: ['module:@react-native/babel-preset', 'nativewind/babel'],
plugins: ['react-native-worklets/plugin'],
};
✅ Step 4: #create the following files
⚡ Warn: I replaced angled #brackets with ({{( and )}})
🎨 Create nativewind-env.d.ts
/// ({{(reference types="nativewind/types" /)}})
🎨 Create global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
🎨 Create global.d.ts
declare module '*.css'
✅ Step 5: Modify App.tsx for tailwind #style #example usage
⚡ Warn: It's very important to add the {import './global.css'} in App.tsx or the tailwind styles won't #work !
import { View, Text } from 'react-native'
import React from 'react'
import './global.css'
const App = () =)}}) {
return (
({{(View className="flex-1 justify-center items-center bg-blue")}})
({{(Text className="text-3xl text-red")}})Terrakode({{(/Text)}})
({{(/View)}})
)
}
export default App
✅ Step 6 (Optional): Unlock Secret Bare React Native CLI Repos
Always updated with:
Latest Google Play Store compliance
Freshest dependency versions
Want in?
Join Discord → / discord
Drop your GitLab username → added in #8128 ms
*GitLab LexCodex Group Owner*: https://gitlab.com/terrakode
We #fix #broken #code
Auf dieser Seite können Sie das Online-Video Bare React Native CLI with tailwindcss nativewind mit der Dauer stunde minuten sekunde in guter Qualität ansehen, das der Benutzer TerraKode 05 November 2025 hochgeladen hat, den Link mit Freunden und Bekannten teilen, dieses Video wurde auf Youtube bereits 648 Mal angesehen und es wurde von 18 den Zuschauern gefallen. Viel Spaß beim Betrachtenden Zuschauern gefallen!
