{"id":14970944,"url":"https://github.com/hnordt/react-native-postcss-transformer","last_synced_at":"2025-10-26T14:30:36.390Z","repository":{"id":42860287,"uuid":"259819283","full_name":"hnordt/react-native-postcss-transformer","owner":"hnordt","description":"A babel transformer that adds PostCSS support for React Native apps","archived":false,"fork":false,"pushed_at":"2023-01-06T04:33:45.000Z","size":245,"stargazers_count":24,"open_issues_count":8,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T20:14:15.219Z","etag":null,"topics":["babel-transformer","expo","postcss","react","react-native","tailwind-css"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hnordt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-29T03:56:53.000Z","updated_at":"2024-06-04T21:29:28.000Z","dependencies_parsed_at":"2023-02-05T08:02:23.573Z","dependency_job_id":null,"html_url":"https://github.com/hnordt/react-native-postcss-transformer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hnordt%2Freact-native-postcss-transformer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hnordt%2Freact-native-postcss-transformer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hnordt%2Freact-native-postcss-transformer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hnordt%2Freact-native-postcss-transformer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hnordt","download_url":"https://codeload.github.com/hnordt/react-native-postcss-transformer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238337766,"owners_count":19455369,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel-transformer","expo","postcss","react","react-native","tailwind-css"],"created_at":"2024-09-24T13:44:23.958Z","updated_at":"2025-10-26T14:30:31.120Z","avatar_url":"https://github.com/hnordt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native PostCSS Transformer\n\n[![npm version](https://badge.fury.io/js/%40hnordt%2Freact-native-postcss-transformer.svg)](https://badge.fury.io/js/%40hnordt%2Freact-native-postcss-transformer)\n\nA babel transformer that adds PostCSS support for React Native apps.\n\nIt works only with React Native v0.59 or newer and Expo SDK v33.0.0 or newer.\n\n## Installation and configuration\n\n### Step 1: Install\n\n#### npm\n\n```sh\nnpm install --save-dev @hnordt/react-native-postcss-transformer\n```\n\n#### Yarn\n\n```sh\nyarn add --dev @hnordt/react-native-postcss-transformer\n```\n\n### Step 2: Add your PostCSS config and install your PostCSS plugins\n\nAdd 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.\n\n**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).\n\n### Step 3: Configure the React Native packager\n\nAdd this to `metro.config.js` in your project's root (create the file if it does not exist already):\n\n```js\nmodule.exports = {\n  transformer: {\n    babelTransformerPath: require.resolve(\n      \"@hnordt/react-native-postcss-transformer\"\n    ),\n  },\n}\n```\n\nIf you are using [Expo](https://expo.io), you also need to add this to `app.json`:\n\n```json\n{\n  \"expo\": {\n    \"__YOUR_EXPO_CONFIG__\": true,\n    \"packagerOpts\": {\n      \"config\": \"metro.config.js\",\n      \"sourceExts\": [\"css\"]\n    }\n  }\n}\n```\n\n## Usage with Tailwind CSS\n\nConfigure Tailwind CSS normally. Sample configuration:\n\n### postcss.config.js\n\n```js\nmodule.exports = {\n  plugins: [require(\"tailwindcss\")],\n}\n```\n\n### tailwind.config.js\n\n```js\nmodule.exports = {\n  theme: {},\n  variants: [], // For RN make sure variants is always an empty array\n  purge: {\n    content: [\"src/**/*.js\"],\n    enabled: process.env.BABEL_ENV === \"production\",\n  },\n  plugins: [require(\"@tailwindcss/ui\")],\n}\n```\n\n### tailwind.css\n\nYou can create that file anywhere. You can also use any name, `tailwind.css` is just an example.\n\n```css\n@tailwind utilities; /* For RN make sure to include Tailwind utilities only */\n\n.my-custom-css {\n  background-color: blue;\n}\n```\n\n### tailwind.js\n\nYou 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.\n\nIt'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`).\n\n```js\nimport { StyleSheet } from \"react-native\"\nimport styles from \"./tailwind.css\"\n\nlet styleSheet = StyleSheet.create(styles)\n\nexport default function tw(...args) {\n  return args\n    .filter(Boolean)\n    .flatMap((classNames) =\u003e\n      classNames.split(\" \").map((className) =\u003e styleSheet[className])\n    )\n}\n```\n\n### App.js\n\n```js\nimport React from \"react\"\nimport { View, Text } from \"react-native\"\nimport tw from \"./tailwind\"\n\nexport default function App() {\n  return (\n    \u003cView style={tw(\"bg-gray-200 flex-1 justify-center items-center\")}\u003e\n      \u003cText style={tw(\"text-gray-900\")}\u003eHello Tailwind CSS!\u003c/Text\u003e\n      \u003cText style={tw(\"text-gray-900 mt-3\")}\u003e♥️\u003c/Text\u003e\n      \u003cText style={tw(\"text-gray-900 mt-3\", false \u0026\u0026 \"I will not show\")}\u003e\n        🚀\n      \u003c/Text\u003e\n    \u003c/View\u003e\n  )\n}\n```\n\n### Remember to install the Tailwind CSS dependencies\n\n#### npm\n\n```sh\nnpm install --save-dev tailwindcss @tailwindcss/ui\n```\n\n#### Yarn\n\n```sh\nyarn add --dev tailwindcss @tailwindcss/ui\n```\n\n## Acknowledgments\n\nThis 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).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhnordt%2Freact-native-postcss-transformer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhnordt%2Freact-native-postcss-transformer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhnordt%2Freact-native-postcss-transformer/lists"}