tailwindcss-react-native uses Tailwind CSS as universal design system for all React Native platforms. It lets you share code between all React Native platforms and improves DX, performance and code maintainability.
At during your applications build, it uses the Tailwind CSS compiler to process the styles, themes, and conditional logic. It uses a minimal runtime to selectively apply reactive styles (eg changes to device orientation).
import { Text } from "react-native";
/**
* A button that changes color when hovered or pressed
* The text will change font weight when the Pressable is pressed
*/
export function MyFancyButton(props) {
return (
<Pressable className="component bg-violet-500 hover:bg-violet-600 active:bg-violet-700">
<Text className="font-bold component-active:font-extrabold" {...props} />;
</Pressable>
);
}
Features
- Works on all RN platforms
- Uses the Tailwind compiler - styles computed at build time
- Small runtime
- Babel plugin for simple setup and better intellisense support
- Respects all tailwind.config.js settings, including themes, custom values, plugins
- dark mode / arbitrary classes / media queries
- pseudo classes - hover / focus / active on compatble components (docs)
- styling based on parent state - automacialy style children based upon parent psuedo classes (docs)
- children styles - create simple layouts based upon parent class
Documentation
All documenation is on our website https://tailwindcss-react-native.vercel.app
In action
You can use the Babel plugin to instantly start writing code! This will also enable your editor's language support and provide features such as autocomplete with no extra setup!
import { Text } from "react-native";
export function BoldText(props) {
return <Text className="text-bold" {...props} />;
}
Or use the Component API to be more explicit about what gets the styles.
import { Text } from "react-native";
import { styles } from "tailwindcss-react-native";
const StyledText = styled(Text);
export function BoldText(props) {
return <StyledText className="text-bold" {...props} />;
}
You still have the ability to perform conditional logic and built up complex style objects.
import { Text } from "react-native";
export function MyText({ bold, italic, lineThrough, ...props }) {
const classNames = [];
if (bold) classNames.push("font-bold");
if (italic) classNames.push("italic");
if (lineThrough) classNames.push("line-through");
return <Text className={classNames.join(" ")} {...props} />;
}
And access the styles directly
import { Text } from "react-native";
import { useTailwind } from "tailwindcss-react-native";
export function MyActivityIndicator(props) {
const tw = useTailwind();
const { color } = tw("text-blue-500");
return <ActivityIndicator size="small" color={color} {...props} />;
}
Quick start guide
There are more setup configurations and in-depth guides on our website
1. Create a new React Native application
npx create-react-native-app my-tailwind-native-app;
Choose "Default new app"
Then change your cwd to the folder containing the project
cd my-tailwind-native-app
2. Install the dependancies
You will need to install tailwindcss-react-native and it's peer dependancy tailwindcss.
npm install tailwindcss-react-native
npm install --save-dev tailwindcss
3. Setup Tailwind CSS
Run npx tailwindcss init to create a tailwind.config.ts file
Add the paths to all of your component files in your tailwind.config.js file.
// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
4. Add the Babel plugin
Modify your babel.config.js
// babel.config.js
module.exports = {
- plugins: [],
+ plugins: ["tailwindcss-react-native/babel"],
};
5. Add the TailwindProvider
Modify your App.js to add the TailwindProvider
// App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
+ import { TailwindProvider } from 'tailwindcss-react-native';
export default function App() {
return (
+ <TailwindProvider>
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
+ </TailwindProvider>
);
}
Thats it
🎉
Start writing code!
import { StatusBar } from 'expo-status-bar';
import React from 'react';
- import { StyleSheet, Text, View } from 'react-native';
+ import { Text, View } from 'react-native';
import { TailwindProvider } from 'tailwindcss-react-native';
export default function App() {
return (
<TailwindProvider>
- <View style={styles.container}>
+ <View className="flex-1 items-center justify-center bg-white">
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
</TailwindProvider>
);
}
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- });
![[Docs] Missing documentation for fontFamily](https://avatars.githubusercontent.com/u/62707388?v=4)
![[Bug] Invalid guessAtPath crashes babel plugin](https://avatars.githubusercontent.com/u/1284492?v=4)
![[Question] How to configure nativewind in @nrwl/expo app?](https://avatars.githubusercontent.com/u/38123035?v=4)
8 Mar 4, 2022
4 Jan 2, 2023
187 Dec 21, 2022
80 Dec 28, 2022
81 Dec 24, 2022
4 Mar 19, 2023
14 Dec 5, 2022
11.6k Jan 7, 2023
2 Oct 3, 2020
18 Nov 21, 2022
94 Dec 29, 2022
5 Aug 31, 2022
5.7k Dec 31, 2022
8 Dec 30, 2022
112 Dec 27, 2022
44 Jan 2, 2023
16 Dec 9, 2022
76 Dec 31, 2022