{"id":4547,"url":"https://github.com/TVke/react-native-tailwindcss","last_synced_at":"2025-08-04T01:32:42.620Z","repository":{"id":48135917,"uuid":"163196837","full_name":"TVke/react-native-tailwindcss","owner":"TVke","description":"A react-native style system based on TailwindCSS","archived":false,"fork":false,"pushed_at":"2021-08-26T11:06:13.000Z","size":1034,"stargazers_count":565,"open_issues_count":11,"forks_count":34,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-18T03:07:44.165Z","etag":null,"topics":["react-native","tailwindcss"],"latest_commit_sha":null,"homepage":"https://tvke.github.io/react-native-tailwindcss/","language":"JavaScript","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/TVke.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-26T16:10:40.000Z","updated_at":"2024-08-29T02:56:44.000Z","dependencies_parsed_at":"2022-08-12T19:31:10.788Z","dependency_job_id":null,"html_url":"https://github.com/TVke/react-native-tailwindcss","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TVke%2Freact-native-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TVke%2Freact-native-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TVke%2Freact-native-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TVke%2Freact-native-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TVke","download_url":"https://codeload.github.com/TVke/react-native-tailwindcss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228582488,"owners_count":17940587,"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":["react-native","tailwindcss"],"created_at":"2024-01-05T20:17:15.906Z","updated_at":"2024-12-07T08:30:43.876Z","avatar_url":"https://github.com/TVke.png","language":"JavaScript","readme":"# react-native-tailwindcss [![npm](https://img.shields.io/npm/v/react-native-tailwindcss.svg)](https://github.com/TVke/react-native-tailwindcss/releases) [![npm](https://img.shields.io/npm/dt/react-native-tailwindcss.svg)](https://www.npmjs.com/package/react-native-tailwindcss) [![docs](https://img.shields.io/badge/read-docs-38b2ac)](https://tvke.github.io/react-native-tailwindcss)\n## A react-native styling system, based on [TailwindCSS](https://tailwindcss.com/docs/what-is-tailwind/)\nEasily apply styles to react native components in a \u003ca href='https://tailwindcss.com/docs/what-is-tailwind/'\u003etailwindCSS\u003c/a\u003e-like fashion.\nThe utility classes are transformed to valid object names and are all children of an object ( `t`, `tw`, `theme` or `tailwind`).\n\n```jsx harmony\nimport { t } from 'react-native-tailwindcss';\n\n\u003cView style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} /\u003e\n```\n\nUse the `tailwind.config.js` file you know and love, to customize your styles or just use default tailwind styles.\n\nIn react native, sometimes you only need a color value. We've got you covered.\nThe `color` object contains all your defined colors.\n\n```jsx harmony\nimport { color } from 'react-native-tailwindcss';\n\n\u003cStatusBar backgroundColor={color.blue500} /\u003e\n```\n\nReact native has no default css styling so there are some *special cases*.\nSome elements like breakpoints, plugins, corePlugin disabling, prefixes, separators, variation and the important toggle are not necessary and are ignored.\n\nYou should also take a look at some special cases:\n - [separator handling (`-m-5` and `w-1/5`)](#general-conventions)\n - [shadows](#shadows)\n - [directional layout](#directional-layout)\n - [more details](https://tvke.github.io/react-native-tailwindcss/special-cases.html)\n\n## Usage\nInstall this package\n\n```\n# Using npm\nnpm install react-native-tailwindcss\n\n# Using Yarn\nyarn add react-native-tailwindcss\n```\n\n\nThen initialize a new tailwindCSS config file\n\n```\nnpx RNtailwindcss\n```\n\nor use an existing one.\n\n## Usage with `styled-components`\n\n`react-native-tailwindcss` plays nicely with the popular [`styled-components` library](https://styled-components.com/docs/basics#react-native).\n\nSimply use the array syntax within the interpolated template literal:\n\n```jsx harmony\nimport { Text, View } from 'react-native';\nimport { t } from 'react-native-tailwindcss';\nimport styled from 'styled-components/native';\n\nconst SView = styled(View)`\n  ${[t.mB4, t.bgGray200, t.rounded, t.p3]}\n`;\n\n\u003cSView\u003e\n  \u003cText\u003eSome unstyled text in a styled view\u003c/Text\u003e\n\u003c/SView\u003e\n```\n\n## General Conventions\n\nEvery 'class' uses the *camelCase* naming convention instead of tailwindCSS's *kebab-case*.\n```\nborder-t-2 =\u003e t.borderT2\n```\n\nA `-` in the beginning of a 'class' becomes a `_`.\n```\n-mt-2 =\u003e t._mT2\n```\n\nA `/` also becomes a `_` to separate the numbers.\n```\nw-1/3 =\u003e t.w1_3\n```\n\n - [more information in the docs](https://tvke.github.io/react-native-tailwindcss/translations.html)\n\n## Special cases\n\n### Shadows\n\n - Android does not use the shadow props to cast shadows, just an `elevation` value.\n    - The `elevation` value is by default the `shadowRadius / 2`\n    - It can be changed by adding the `elevation` value after the shadow separated by a `,`. \u003cbr\u003e\n        (eg.: `default: '0 1px 3px 0 rgba(0, 0, 0, .1), 5'`)\n\n - Text shadows use the same shadows as box shadows\n - Multiple shadows are not supported in React native. (the first shadow will be used)\n - `inner` and `outline` shadows are ignored\n\n### Directional Layout\n\nWhen you need directional layout, React Native offers some variations to make life easier.\nInstead of using 'left' or 'right', 'start' and 'end' can be used.\n\n`react-native-tailwindcss` offers classes to embrace this way of directional layout.\nEvery 'class' with `L` or `R`, also has a corresponding `S` and `E` 'class' for start and end.\n\n## Testing\n\n```\nnpm run test\n```\n","funding_links":[],"categories":["Components","Tools","JavaScript"],"sub_categories":["Styling"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTVke%2Freact-native-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FTVke%2Freact-native-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FTVke%2Freact-native-tailwindcss/lists"}