React 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

$3

#### npm

``sh
npm install --save-dev @hnordt/react-native-postcss-transformer
`

#### Yarn

`sh
yarn add --dev @hnordt/react-native-postcss-transformer
`

$3

Add your PostCSS configuration to one of the supported config formats, 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.

$3

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, 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:

$3

`js
module.exports = {
plugins: [require("tailwindcss")],
}
`

$3

`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")],
}
`

$3

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;
}
`

$3

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])
)
}
`

$3

`js
import React from "react"
import { View, Text } from "react-native"
import tw from "./tailwind"

export default function App() {
return (

Hello Tailwind CSS!
♥️

🚀


)
}
`

$3

#### 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 and tailwind-rn.