Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hnordt/react-native-postcss-transformer
A babel transformer that adds PostCSS support for React Native apps
https://github.com/hnordt/react-native-postcss-transformer
babel-transformer expo postcss react react-native tailwind-css
Last synced: about 1 month ago
JSON representation
A babel transformer that adds PostCSS support for React Native apps
- Host: GitHub
- URL: https://github.com/hnordt/react-native-postcss-transformer
- Owner: hnordt
- Created: 2020-04-29T03:56:53.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:33:45.000Z (almost 2 years ago)
- Last Synced: 2024-09-28T13:42:35.169Z (about 2 months ago)
- Topics: babel-transformer, expo, postcss, react, react-native, tailwind-css
- Language: JavaScript
- Homepage:
- Size: 239 KB
- Stars: 24
- Watchers: 1
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native PostCSS Transformer
[](https://badge.fury.io/js/%40hnordt%2Freact-native-postcss-transformer)
A babel transformer that adds PostCSS support for React Native apps.
It works only with React Native v0.59 or newer and Expo SDK v33.0.0 or newer.
## Installation and configuration
### Step 1: Install
#### npm
```sh
npm install --save-dev @hnordt/react-native-postcss-transformer
```
#### Yarn
```sh
yarn add --dev @hnordt/react-native-postcss-transformer
```
### Step 2: Add your PostCSS config and install your PostCSS plugins
Add your PostCSS configuration to [one of the supported config formats](https://github.com/michael-ciniawsky/postcss-load-config), e.g. `package.json`, `.postcssrc`, `postcss.config.js`, etc.
**Important:** if you change your PostCSS config, or any PostCSS plugin config (like Tailwind CSS), you'll need to restart the React Native packager and clean its cache. For React Native your can run `react-native start --reset-cache`, or `expo start --clear` if you are using [Expo](https://expo.io).
### Step 3: Configure the React Native packager
Add this to `metro.config.js` in your project's root (create the file if it does not exist already):
```js
module.exports = {
transformer: {
babelTransformerPath: require.resolve(
"@hnordt/react-native-postcss-transformer"
),
},
}
```
If you are using [Expo](https://expo.io), you also need to add this to `app.json`:
```json
{
"expo": {
"__YOUR_EXPO_CONFIG__": true,
"packagerOpts": {
"config": "metro.config.js",
"sourceExts": ["css"]
}
}
}
```
## Usage with Tailwind CSS
Configure Tailwind CSS normally. Sample configuration:
### postcss.config.js
```js
module.exports = {
plugins: [require("tailwindcss")],
}
```
### tailwind.config.js
```js
module.exports = {
theme: {},
variants: [], // For RN make sure variants is always an empty array
purge: {
content: ["src/**/*.js"],
enabled: process.env.BABEL_ENV === "production",
},
plugins: [require("@tailwindcss/ui")],
}
```
### tailwind.css
You can create that file anywhere. You can also use any name, `tailwind.css` is just an example.
```css
@tailwind utilities; /* For RN make sure to include Tailwind utilities only */
.my-custom-css {
background-color: blue;
}
```
### tailwind.js
You can create a specific file to import your Tailwind CSS styles and add a simple `tw()` utility to make it easier to consume the amazing Tailwind classes.
It's completely optional, you can also use the imported styles directly (the imported styles are just an object, so you might want to create a `StyleSheet`).
```js
import { StyleSheet } from "react-native"
import styles from "./tailwind.css"
let styleSheet = StyleSheet.create(styles)
export default function tw(...args) {
return args
.filter(Boolean)
.flatMap((classNames) =>
classNames.split(" ").map((className) => styleSheet[className])
)
}
```
### App.js
```js
import React from "react"
import { View, Text } from "react-native"
import tw from "./tailwind"
export default function App() {
return (
Hello Tailwind CSS!
♥️
🚀
)
}
```
### Remember to install the Tailwind CSS dependencies
#### npm
```sh
npm install --save-dev tailwindcss @tailwindcss/ui
```
#### Yarn
```sh
yarn add --dev tailwindcss @tailwindcss/ui
```
## Acknowledgments
This package was inspired by [react-native-postcss-transformer](https://github.com/kristerkari/react-native-postcss-transformer) and [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn).