1. Create the project
Create the project with the Expo CLI
npx create-expo-app my-app
cd my-app
- Install
tailwindand its dependency
yarn add nativewind
yarn add --dev tailwindcss
2. Setup Tailwind CSS
Run npx tailwindcss init to create a tailwind.config.js file
Add the paths to all of your component files in your tailwind.config.js file. Remember to replace with the actual name of your directory e.g. screens.
// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./<custom directory>/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
3. Add the Babel plugin
Modify your babel.config.js
// babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
+ plugins: ["nativewind/babel"],
};
};
Code
import React from 'react';
import { Text, View } from 'react-native';
export default function App() {
return (
<View className="flex-1 items-center justify-center bg-white">
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
Top comments (0)