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
In questa pagina del sito puoi guardare il video online Bare React Native CLI with tailwindcss nativewind della durata di ore minuti seconda in buona qualità , che l'utente ha caricato TerraKode 05 novembre 2025, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 648 volte e gli è piaciuto 18 spettatori. Buona visione!
