{"id":18315534,"url":"https://github.com/mathieutu/babel-plugin-tailwind-rn-classname","last_synced_at":"2025-04-05T20:32:37.130Z","repository":{"id":54578664,"uuid":"337337190","full_name":"mathieutu/babel-plugin-tailwind-rn-classname","owner":"mathieutu","description":"Babel plugin to be able to use your tailwind classNames in react-native, with automatic usage of classnames.","archived":false,"fork":false,"pushed_at":"2021-06-21T13:25:04.000Z","size":3385,"stargazers_count":31,"open_issues_count":1,"forks_count":2,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-30T02:34:02.521Z","etag":null,"topics":["babel-plugin","react","react-native","tailwind"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathieutu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-09T08:22:01.000Z","updated_at":"2022-12-01T02:54:36.000Z","dependencies_parsed_at":"2022-08-13T20:20:36.226Z","dependency_job_id":null,"html_url":"https://github.com/mathieutu/babel-plugin-tailwind-rn-classname","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fbabel-plugin-tailwind-rn-classname","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fbabel-plugin-tailwind-rn-classname/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fbabel-plugin-tailwind-rn-classname/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathieutu%2Fbabel-plugin-tailwind-rn-classname/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathieutu","download_url":"https://codeload.github.com/mathieutu/babel-plugin-tailwind-rn-classname/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399818,"owners_count":20932875,"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-plugin","react","react-native","tailwind"],"created_at":"2024-11-05T16:41:29.747Z","updated_at":"2025-04-05T20:32:36.588Z","avatar_url":"https://github.com/mathieutu.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-tailwind-rn-classname\n\n[![Version](https://img.shields.io/npm/v/babel-plugin-tailwind-rn-classname)](https://www.npmjs.com/package/babel-plugin-tailwind-rn-classname?activeTab=versions)\n[![Downloads](https://img.shields.io/npm/dt/babel-plugin-tailwind-rn-classname)](https://www.npmjs.com/package/babel-plugin-tailwind-rn-classname)\n[![License](https://img.shields.io/github/license/mathieutu/babel-plugin-tailwind-rn-classname)](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/blob/master/LICENSE)\n[![100% Coverage](https://img.shields.io/badge/coverage-100%25-brightgreen)](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/actions?query=workflow%3A%22Run+tests%22)\n\nBabel plugin to use your tailwind classes directly in React Native.\n\nYou will have standard autocompletion from you IDE, and your tailwind plugins will work like in a standard React app.\n\nIt has an optimised behaviour: \u003cbr\u003e\nit detects static classes and convert them to object directly at transpilation time for better performances, and let the\ndynamic ones for runtime.\n\nIt uses [tailwind-rn](https://github.com/vadimdemedes/tailwind-rn) package under the hood, which is a peer dependency.\n\n\u003cimg src=\".github/assets/header.png\" alt=\"header demo\"\u003e\n\n## Installation\n\n```shell\nyarn add tailwind-rn\nyarn add -D babel-plugin-tailwind-rn-classname\n```\n\nor\n\n```shell\nnpm install --save tailwind-rn\nnpm install --save-dev babel-plugin-tailwind-rn-classname\n```\n\n## Setup\n\n### Basic\n\nAdd it to your `.babelrc` (or any Babel config file)\n\n```json\n{\n  \"plugins\": [\n    \"tailwind-rn-classname\"\n  ]\n}\n```\n\n### Custom\n\nIf you want to customise your styles as described in\nthe [tailwind-rn documentation](https://github.com/vadimdemedes/tailwind-rn#customization), you can pass options to the\nplugin:\n\n```json\n{\n  \"plugins\": [\n    [\n      \"tailwind-rn-classname\",\n      {\n        \"tailwindRNExportPath\": \"my/custom/file\",\n        \"tailwindRNExportName\": \"tailwind\"\n      }\n    ]\n  ]\n}\n```\n\n| option                 | description                                                                                   | default value         |\n|------------------------|-----------------------------------------------------------------------------------------------|-----------------------|\n| `tailwindRNExportPath` | Path to your file from your current working directory (usualy same than your  `package.json`) | `tailwind-rn` package |\n| `tailwindRNExportName` | Name of your export in the file                                                               | `default`             |\n\nSo considering a root `tailwindRN.ts` file which contains:\n\n```js\nimport { create } from 'tailwind-rn';\nimport styles from './styles.json';\n\nconst { tailwind, getColor } = create(styles);\n\nexport const tw = tailwind\n```\n\nthe configuration will be:\n\n```json\n{\n  \"plugins\": [\n    [\n      \"tailwind-rn-classname\",\n      {\n        \"tailwindRNExportPath\": \"./tailwindRN.ts\",\n        \"tailwindRNExportName\": \"tw\"\n      }\n    ]\n  ]\n}\n```\n\n### Typescript\n\nTo be allowed to use a `className` attribute on all your component, \nyou have to add the `babel-plugin-tailwind-rn-classname` types to your \"types\" array in `tsconfig.json`.\n\n```json\n{\n  \"compilerOptions\": {\n    \"types\": [\n      \"babel-plugin-tailwind-rn-classname\"\n    ]\n  }\n}\n```\n\n\n## Usage\n\nWrite your tailwind classes like you would do on standard React app. You can find the list of supported utilities\non [tailwind-rn documentation](https://github.com/vadimdemedes/tailwind-rn#supported-utilities)\n\n```jsx\nimport { SafeAreaView, View, Text } from 'react-native';\n\nconst Component = ({ isAlert = false }) =\u003e (\n  \u003cSafeAreaView className=\"h-full\"\u003e\n    \u003cView className=\"pt-12 items-center\"\u003e\n      \u003cView className={`${isAlert ? 'bg-orange-200' : 'bg-blue-200'} px-3 py-1 rounded-full`}\u003e\n        \u003cText className={`${isAlert ? 'text-orange-800' : 'text-blue-800'} font-semibold`}\u003e\n          Hello Tailwind\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    \u003c/View\u003e\n  \u003c/SafeAreaView\u003e\n);\n```\n\n\u003cimg alt=\"demo screenshot\" src=\"./.github/assets/demo.png\" width=\"544\"\u003e\n\n### Static `className`\n```jsx\n\u003cText className=\"pt-12 items-center\" /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\n\u003cText style={[{ paddingTop: 48, alignItems: 'center' }]} /\u003e\n```\n\n### Static `className` and `style`\n\n```jsx\n\u003cText className=\"pt-12 items-center\" style={[{ color: 'blue' }]} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\n\u003cText style={[{ paddingTop: 48, alignItems: 'center' }, { color: 'blue' }]} /\u003e\n```\n\n### Dynamic `className`\n\n```jsx\n\u003cText className={large ? 'px-12' : 'px-4'} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport tailwind from 'tailwind-rn';\n\n\u003cText style={[tailwind(large ? 'px-12' : 'px-4')]} /\u003e\n```\n\n### Dynamic and Static `className`\n\n```jsx\n\u003cText className={`pt-12 ${large ? 'px-12' : 'px-4'} items-center`} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport tailwind from 'tailwind-rn';\n\n\u003cText style={[{ paddingTop: 48, alignItems: 'center' }, tailwind(large ? 'px-12' : 'px-4')]} /\u003e\n```\n\n### Dynamic and Static `className` and `styles`\n\n```jsx\n\u003cText className={`pt-12 ${large ? 'px-12' : 'px-4'} items-center`} style={{color: 'blue'}}/\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport tailwind from 'tailwind-rn';\n\n\u003cText style={[{ paddingTop: 48, alignItems: 'center' }, tailwind(large ? 'px-12' : 'px-4'), { color: 'blue' }]} /\u003e\n```\n\n### Dynamic and Static `className` and `styles`\n\n```jsx\n\u003cText className={`pt-12 ${large ? 'px-12' : 'px-4'} items-center`} style={{color: 'blue'}}/\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport tailwind from 'tailwind-rn';\n\n\u003cText style={[{ paddingTop: 48, alignItems: 'center' }, tailwind(large ? 'px-12' : 'px-4'), { color: 'blue' }]} /\u003e\n```\n\n### Custom import with configuration\n\n```json\n{\n  \"tailwindRNExportPath\": \"./tailwindRN\",\n  \"tailwindRNExportName\": \"tw\"\n}\n```\n```jsx\n\u003cText className={large ? 'px-12' : 'px-4'}/\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nimport { tw } from '/absolute/path/to/my/project/tailwindRN';\n\n\u003cText style={[tw(large ? 'px-12' : 'px-4')]} /\u003e\n```\n\nYou can find all this cases and more in [the tests](./__tests__/index.spec.ts)\n\n\n\n## A bug, a question?\n\nPlease feel free to [tell me](https://github.com/mathieutu/babel-plugin-tailwind-rn-classname/issues/new)!\n\n\n## License\n\nThis package is an open-sourced software licensed under the [MIT license](http://opensource.org/licenses/MIT).\n\n\n## Contributing\n\nIssues and PRs are obviously welcomed and encouraged, for new features as well as documentation.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathieutu%2Fbabel-plugin-tailwind-rn-classname","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathieutu%2Fbabel-plugin-tailwind-rn-classname","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathieutu%2Fbabel-plugin-tailwind-rn-classname/lists"}