mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-17 03:58:57 +08:00
65 lines
1.5 KiB
Markdown
65 lines
1.5 KiB
Markdown
---
|
|
sidebar_position: 5
|
|
---
|
|
|
|
import ReactNativeWebPreview from "./\_react-native-web-0-18-preview.md"
|
|
|
|
# Tailwind CLI (CSS) 🔬
|
|
|
|
<ReactNativeWebPreview />
|
|
|
|
The Tailwind CLI can be used to generate CSS Stylesheets.
|
|
|
|
## 1. Setup Tailwind CSS
|
|
|
|
Follow the [setup guide for Tailwind CLI](https://tailwindcss.com/docs/installation).
|
|
|
|
## 2. Setup tailwindcss-react-native
|
|
|
|
Follow the [general setup instructions](../installation.md) to setup tailwindcss-react-native.
|
|
|
|
## 3. Enable preview features
|
|
|
|
You will need to enable preview features on your `TailwindProvider`
|
|
|
|
```diff
|
|
import { TailwindProvider } from 'tailwindcss-react-native'
|
|
|
|
function MyAppsProviders ({ children }) {
|
|
return (
|
|
- <TailwindProvider>{children}</TailwindProvider>
|
|
+ <TailwindProvider preview={true}>{children}</TailwindProvider>
|
|
)
|
|
}
|
|
```
|
|
|
|
## 5. Write components using the Component API
|
|
|
|
```tsx
|
|
import { Text } from "react-native";
|
|
import { styled } from "tailwindcss-react-native";
|
|
|
|
const StyledText = styled(Text);
|
|
|
|
export function BoldText(props) {
|
|
return <StyledText className="font-bold" {...props} />;
|
|
}
|
|
```
|
|
|
|
## 6. Update your scripts (optional)
|
|
|
|
You can use the Tailwind CLI with the `--watch` flag to automatically compile on save.
|
|
|
|
This can be combined with [concurrently](https://www.npmjs.com/package/concurrently) to create a streamlined development environment.
|
|
|
|
```diff
|
|
// package.json
|
|
{
|
|
"scripts": {
|
|
- "start": "expo start"
|
|
+ "start": "concurrently \"tailwindcss -i input.css -o output.css --watch\" \"expo start:web\""
|
|
},
|
|
// ...
|
|
}
|
|
```
|