{"id":18883852,"url":"https://github.com/owenmelbz/babel-plugin-tailwind-rn","last_synced_at":"2025-09-10T02:41:36.223Z","repository":{"id":38880049,"uuid":"267159984","full_name":"OwenMelbz/babel-plugin-tailwind-rn","owner":"OwenMelbz","description":"Allows you to use className=\"w-full md:w-1/2\" syntax in your react native projects.","archived":false,"fork":false,"pushed_at":"2023-01-06T07:06:08.000Z","size":753,"stargazers_count":30,"open_issues_count":17,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-29T05:53:23.308Z","etag":null,"topics":["babel-plugin","react-native","tailwind"],"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/OwenMelbz.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-05-26T21:55:07.000Z","updated_at":"2024-08-21T15:19:46.000Z","dependencies_parsed_at":"2022-08-26T06:22:37.502Z","dependency_job_id":null,"html_url":"https://github.com/OwenMelbz/babel-plugin-tailwind-rn","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/OwenMelbz/babel-plugin-tailwind-rn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OwenMelbz%2Fbabel-plugin-tailwind-rn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OwenMelbz%2Fbabel-plugin-tailwind-rn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OwenMelbz%2Fbabel-plugin-tailwind-rn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OwenMelbz%2Fbabel-plugin-tailwind-rn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OwenMelbz","download_url":"https://codeload.github.com/OwenMelbz/babel-plugin-tailwind-rn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OwenMelbz%2Fbabel-plugin-tailwind-rn/sbom","scorecard":{"id":106422,"data":{"date":"2025-08-11","repo":{"name":"github.com/OwenMelbz/babel-plugin-tailwind-rn","commit":"58026709065b637390a151ab7b8888cbad6d4ee6"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":0,"reason":"Found 1/27 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 4 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"55 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-f5x2-xv93-4p23","Warn: Project is vulnerable to: GHSA-gmpm-xp43-f7g6","Warn: Project is vulnerable to: GHSA-pf27-929j-9pmm","Warn: Project is vulnerable to: GHSA-327c-qx3v-h673","Warn: Project is vulnerable to: GHSA-x4cf-6jr3-3qvp","Warn: Project is vulnerable to: GHSA-mph8-6787-r8hw","Warn: Project is vulnerable to: GHSA-7mhc-prgv-r3q4","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g","Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-4cpg-3vgw-4877","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-rxrc-rgv4-jpvx","Warn: Project is vulnerable to: GHSA-7f53-fmmv-mfjv","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-gff7-g5r8-mg8m","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v","Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx","Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p","Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-h6q6-9hqw-rwfv","Warn: Project is vulnerable to: GHSA-5fg8-2547-mr8q","Warn: Project is vulnerable to: GHSA-crh6-fp67-6883","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-15T11:11:27.201Z","repository_id":38880049,"created_at":"2025-08-15T11:11:27.201Z","updated_at":"2025-08-15T11:11:27.201Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274402470,"owners_count":25278341,"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","status":"online","status_checked_at":"2025-09-10T02:00:12.551Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-native","tailwind"],"created_at":"2024-11-08T07:09:26.949Z","updated_at":"2025-09-10T02:41:36.183Z","avatar_url":"https://github.com/OwenMelbz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Tailwind CSS v2\n\nWhen a babel plugin, and react hook has a baby. You end up with this! A way that allows you to use Tailwind CSS within your React Native project via the familiar `className` property!\n\n\u003cimg src=\"https://raw.githubusercontent.com/OwenMelbz/babel-plugin-tailwind-rn/318682dcbe9ccb391b76e60ada5590c9153e9b17/screenshot.png\" alt=\"screenshot\" /\u003e\n\n# Changes since v1\n\nThe architecture around v1 focused on using hooks within each component, however React doesn't support a dynamic number of hooks, which means if the number or rows, views etc changed it would throw an error.\n\nThe internals for the react side of v2 have been changed to an HOC which stores the state only once, then passes it down to each component by wrapping your layout level component (often the `App`) with our `useTailwind` function.\n\n# Installation\n\n- `yarn add babel-plugin-tailwind-rn`\n\n- `babel.config.js` add the plugin `tailwind-rn` e.g. `plugins: ['tailwind-rn']`\n\n# Usage\n\nWhen Metro/Webpack boots up, it runs your apps javascript through babel.\n\nWe hook into this process converting your `className=\"text-xl\"` props into `style={useTailwind(\"text-xl\")}`\n\nThis means we're able to add listeners on the resize events and dynamically update your styles based off the responsive Tailwind classes.\n\nTo provide your components with the correct classes, you'll need to wrap your `App` with our HOC, this is your root-most component.\n\n```js\nimport useTailwind from 'babel-plugin-tailwind-rn/dist/useTailwind'\n\nfunction App() {\n    return \u003cText\u003eMy Tailwind App!\u003c/Text\u003e\n}\n\nexport default useTailwind(App)\n```\n\nThen use the normal react syntax!\n\n```jsx\nfunction App() {\n    return \u003cText className=\"text-md lg:text-xl\"\u003eMy Tailwind App!\u003c/Text\u003e\n}\n```\n\n# Important Notes\n\n## Updating Config\n\nMetro uses heavy caching to speed up your builds, this means it holds your tailwind config in memory on the device/simulator.\n\nOnce you've made changes to your `tailwind.config.js` You need to clear the metro cache, often with `shift + r` which reloads with fresh cache.\n\nHowever that only refreshes the webpack cache, you now need to exit the RN app on the simulator/device, and then relaunch the app. Metro allows you to push `i` or `a` to launch it again.\n\n# Example Project\n\nYou can download an example project which uses Expo to see how it works\n\nhttps://github.com/OwenMelbz/tailwind-rn-example\n\n## Disclaimer\n\nCode heavily influenced from: https://github.com/vadimdemedes/tailwind-rn as well as some glorious copy/paste of the class validation utilities!\n\nAlso thanks to Brad from Discord... I don't know who you are, or where you came from. But thanks for Babel support!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowenmelbz%2Fbabel-plugin-tailwind-rn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fowenmelbz%2Fbabel-plugin-tailwind-rn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fowenmelbz%2Fbabel-plugin-tailwind-rn/lists"}