mirror of
https://github.com/zhigang1992/nativewind.git
synced 2026-06-13 01:18:18 +08:00
63 lines
1.5 KiB
Markdown
63 lines
1.5 KiB
Markdown
import StartCoding from "../\_start-coding-components.md"
|
|
import ReactNativeWebPreview from "./\_react-native-web-0-18-preview.md"
|
|
|
|
# Tailwind CLI (CSS) 🔬
|
|
|
|
<ReactNativeWebPreview />
|
|
|
|
This preview feature allows you to use the Tailwind CLI to generate CSS stylesheets. You can then use className to style your React Native Web components using CSS.
|
|
|
|
## Setup
|
|
|
|
### 1. Setup Tailwind CSS
|
|
|
|
Follow the [setup guide for Tailwind CLI](https://tailwindcss.com/docs/installation).
|
|
|
|
### 2. Modify your `tailwind.config.js` to include the CSS plugin
|
|
|
|
```diff
|
|
// tailwind.config.js
|
|
+ const tailwindcssReactNative = require("tailwindcss-react-native/tailwind/css")
|
|
+
|
|
module.exports = {
|
|
content: [
|
|
'./App.{js,ts,jsx,tsx}',
|
|
],
|
|
+ plugins: [tailwindcssReactNative()],
|
|
};
|
|
```
|
|
|
|
### 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>
|
|
)
|
|
}
|
|
```
|
|
|
|
<StartCoding />
|
|
|
|
## Watching for changes
|
|
|
|
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\""
|
|
},
|
|
// ...
|
|
}
|
|
```
|