> **Note**
> `tailwindcss-react-native` is current working on v2, which includes a renaming of the project to NativeWind!
>
> NativeWind is somewhat stable and is available via `npm i nativewind`.
>
> The last stable version of `tailwindcss-react-native` via `npm i tailwindcss-react-native` and has its docs on the `main` branch
`NativeWind` uses [Tailwind CSS](https://tailwindcss.com) as high-level scripting language to create a **universal design system**. Styled components can be shared between all React Native platforms, using the best style engine for that platform (e.g. CSS StyleSheet or StyleSheet.create). It's goals are to to provide a consistent styling experience across all platforms, improving Developer UX, component performance and code maintainability.
`NativeWind` processes your styles during your application build, and uses a minimal runtime to selectively apply reactive styles (eg changes to device orientation, light dark mode).
> :point_right: This example uses Babel which is one of the many setups available.
```tsx
import { Pressable, View, 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 (
;
);
}
```
## Features
- Works on **all** RN platforms, uses the best style system for each platform.
- Uses the Tailwind CSS compiler
- Styles are computed at **build time**
- Small runtime keeps your components fast
- Babel plugin for **simple setup** and improving **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 compatible components [(docs)](https://tailwindcss-react-native.vercel.app/tailwind/core-concepts/pseudo-classes)
- styling based on **parent state** - automatically style children based upon parent pseudo classes [(docs)](https://tailwindcss-react-native.vercel.app/tailwind/core-concepts/component)
- **children styles** - create simple layouts based upon parent class
## Documentation
All documentation is on our website https://tailwindcss-react-native.vercel.app
- [Introduction](https://tailwindcss-react-native.vercel.app/)
- [Quick Start](https://tailwindcss-react-native.vercel.app/quick-start)
- [Installation](https://tailwindcss-react-native.vercel.app/installation)
## 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!
```tsx
import { Text } from "react-native";
export function BoldText(props) {
return ;
}
```
Usage of Babel is optional! You can use the Component API to be more explicit about what gets the styles.
```tsx
import { Text } from "react-native";
import { styled } from "tailwindcss-react-native";
const StyledText = styled(Text);
export function BoldText(props) {
return ;
}
```
You still have the ability to perform conditional logic and built up complex style objects.
```tsx
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 ;
}
```
Additional options can improve compatibilty with existing RN libraries
```tsx
import { Text } from "react-native";
import { styled } from "tailwindcss-react-native";
import { Svg, Circle, Rect } from "react-native-svg";
/**
* These components can now use the "stroke" & "fill" props with Tailwind classes
* They will use inline-props on native, and className on web.
*/
const StyledCircle = styled(Circle, { classProps: ["stroke", "fill"] });
const StyledRect = styled(Rect, { classProps: ["stroke", "fill"] });
export function BoldText(props) {
return (
);
}
```
# Quick start guide
> This example uses Babel as it provides the fastest setup. There are more setup configurations and in-depth guides [on our website](https://tailwindcss-react-native.vercel.app/installation)
## 1. Create a new React Native application
```
npx create-react-native-app my-nativewind-app;
```
Choose "Default new app"
Then change your `cwd` to the folder containing the project
```bash
cd my-nativewind-app
```
## 2. Install the dependencies
You will need to install `nativewind` and it's peer dependency `tailwindcss`.
```bash
yarn add nativewind
yarn add tailwindcss -D
```
## 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.
```diff
// tailwind.config.js
module.exports = {
- content: [],
+ content: ["./App.{js,jsx,ts,tsx}", "./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
```
## 4. Add the Babel plugin
Modify your `babel.config.js`
```diff
// babel.config.js
module.exports = {
- plugins: [],
+ plugins: ["tailwindcss-react-native/babel"],
};
```
## Thats it 🎉
Start writing code!
```diff
import React from 'react';
- import { StyleSheet, Text, View } from 'react-native';
+ import { Text, View } from 'react-native';
export default function App() {
return (
-
+ Open up App.js to start working on your app!
);
}
- const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
- });
```
