{"id":15064938,"url":"https://github.com/utsavdotpro/twx-rn","last_synced_at":"2026-01-02T22:42:40.796Z","repository":{"id":60067949,"uuid":"540876894","full_name":"utsavdotpro/twx-rn","owner":"utsavdotpro","description":"A tiny utility for constructing styles object using tailwind-rn for your ReactNative projects","archived":false,"fork":false,"pushed_at":"2022-11-13T13:25:30.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-24T19:40:08.401Z","etag":null,"topics":["clsx","react-native","tailwind","tailwind-rn"],"latest_commit_sha":null,"homepage":"https://npmjs.com/package/twx-rn","language":"TypeScript","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/utsavdotpro.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":"2022-09-24T15:33:05.000Z","updated_at":"2022-09-24T16:31:04.000Z","dependencies_parsed_at":"2023-01-23T15:46:22.726Z","dependency_job_id":null,"html_url":"https://github.com/utsavdotpro/twx-rn","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/utsavdotpro%2Ftwx-rn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2Ftwx-rn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2Ftwx-rn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/utsavdotpro%2Ftwx-rn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/utsavdotpro","download_url":"https://codeload.github.com/utsavdotpro/twx-rn/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243801610,"owners_count":20350106,"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":["clsx","react-native","tailwind","tailwind-rn"],"created_at":"2024-09-25T00:28:11.109Z","updated_at":"2026-01-02T22:42:40.770Z","avatar_url":"https://github.com/utsavdotpro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Twx\n\nA tiny utility for constructing styles object using [tailwind-rn](https://www.npmjs.com/package/tailwind-rn) for your ReactNative projects. It uses the infamous [clsx](https://github.com/lukeed/clsx) package behind the hood for generating className strings conditionally.\n\n## Install\n\n````bash\nyarn add twx-rn\n# or\nnpm install twx-rn\n````\n\n## Getting Started\n\nThe `twx` generates the styles object using the [tailwind-rn](https://www.npmjs.com/package/tailwind-rn) library, so you need to have it installed and configured.\n\n````bash\nyarn add tailwind-rn\n# or\nnpm install tailwind-rn\n````\n\n````bash\nnpx setup-tailwind-rn # Generate the config file\n````\n\nSee full [documentation](https://www.npmjs.com/package/tailwind-rn).\n\n## Usage\n\nThe `twx()` supports all the conditions as the `clsx` package, see [here](https://github.com/lukeed/clsx#usage).\n\n_Basic usage_\n\n````js\nimport twx from 'twx-rn';\n// or\nimport { twx } from 'twx-rn';\n\n\u003cView style={twx(\"text-white mt-1\", true \u0026\u0026 \"bg-black\")}\u003eHello Tailwind!\u003c/View\u003e\n````\n  \n## Recommended Usage\n\n\u003e This example is in Typescript\n\n### How?\n\nDefine type for your react native components\n\n```js\n// types.ts\n\nimport { ViewProps } from \"react-native\";\n\nexport type ComponentProps\u003cT\u003e = {\n  style?: ViewProps[\"style\"];\n  children?: React.ReactNode;\n  className?: string;\n} \u0026 T;\n\nexport interface Component\u003cT = {}\u003e extends React.FC\u003cComponentProps\u003cT\u003e\u003e {}\n```\n\nCreate a HOC\n\n````js\n// with-class-name.tsx\n\nimport { Component, ComponentProps } from \"@appTypes/.\";\nimport twx from \"twx-rn\";\n\nconst withClassName =\n  \u003cT,\u003e(C: Component\u003cT\u003e) =\u003e\n  (props: ComponentProps\u003cT\u003e) =\u003e {\n    const { style, className } = props;\n    return \u003cC {...props} style={[style, twx(className)]} /\u003e;\n  };\n\nexport default withClassName;\n````\n\nCreate your component\n\n```js\n// HR.tsx\n\nimport { Component } from \"@appTypes/.\";\nimport { View } from \"react-native\";\nimport twx from \"twx-rn\";\nimport withClassName from \"@hoc/with-class-name\";\n\ntype Props = {\n  // your extra props\n}\n\nconst HR: Component\u003cProps\u003e = ({ style }) =\u003e {\n  return \u003cView style={[twx(\"h-[1px] w-full bg-black\"), style]} /\u003e;\n};\n\nexport default withClassName\u003cProps\u003e(HR);\n```\n\nUse your component\n\n```js\n// App.tsx\n\n\u003cHR className=\"bg-white\" /\u003e\n// or\n\u003cHR style={twx(\"bg-white\")} /\u003e\n```\n\n### Why?\n\n- Better code readability\n- Easier migration from React code\n- IDE class name recommendations start working\n\n## Contribution\n\nSee a place where you can improve? See a grammatical mistake? Or want to add a entirely new feature?  \n\nAll is welcomed, feel free to raise a Pull Request or create and Issue :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futsavdotpro%2Ftwx-rn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Futsavdotpro%2Ftwx-rn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Futsavdotpro%2Ftwx-rn/lists"}