{"id":13456346,"url":"https://github.com/vadimdemedes/tailwind-rn","last_synced_at":"2025-05-13T23:06:06.589Z","repository":{"id":39222366,"uuid":"245817315","full_name":"vadimdemedes/tailwind-rn","owner":"vadimdemedes","description":"🦎 Use Tailwind CSS in React Native projects","archived":false,"fork":false,"pushed_at":"2025-04-14T21:58:55.000Z","size":1546,"stargazers_count":4273,"open_issues_count":41,"forks_count":172,"subscribers_count":21,"default_branch":"master","last_synced_at":"2025-05-06T13:30:38.679Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/vadimdemedes.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"open_collective":"vadimdemedes","custom":"https://www.comebackalive.in.ua"}},"created_at":"2020-03-08T13:14:48.000Z","updated_at":"2025-05-05T18:14:11.000Z","dependencies_parsed_at":"2024-11-09T01:37:44.254Z","dependency_job_id":"28546a9d-5169-4577-afa5-df99ca74cd33","html_url":"https://github.com/vadimdemedes/tailwind-rn","commit_stats":{"total_commits":68,"total_committers":13,"mean_commits":5.230769230769231,"dds":0.4411764705882353,"last_synced_commit":"8e74787db5561fa23cf38bef633f69c6cb176c74"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Ftailwind-rn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Ftailwind-rn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Ftailwind-rn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vadimdemedes%2Ftailwind-rn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vadimdemedes","download_url":"https://codeload.github.com/vadimdemedes/tailwind-rn/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253495037,"owners_count":21917356,"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":[],"created_at":"2024-07-31T08:01:20.282Z","updated_at":"2025-05-13T23:06:01.576Z","avatar_url":"https://github.com/vadimdemedes.png","language":"JavaScript","funding_links":["https://opencollective.com/vadimdemedes","https://www.comebackalive.in.ua"],"categories":["JavaScript","\u003e 1K ⭐️"],"sub_categories":[],"readme":"[![](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner2-direct.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)\n\n---\n\n# tailwind-rn ![Status](https://github.com/vadimdemedes/tailwind-rn/workflows/test/badge.svg)\n\n\u003e Use [Tailwind](https://tailwindcss.com) in [React Native](https://reactnative.dev) projects\n\n![](header.jpg)\n\nAll styles are generated directly from Tailwind's output, so they're always up-to-date.\n\n- JIT mode\n- Responsive breakpoints (e.g. `sm`, `md`, `lg`)\n- Dark mode\n- Custom configuration\n\n[Migrating from v3.x?](migrate.md)\n\n---\n\n## Install\n\n```\n$ npm install tailwind-rn\n```\n\n## Getting Started\n\nRun the following command to automatically add `tailwind-rn` to your React Native project:\n\n```\n$ npx setup-tailwind-rn\n```\n\nIt will do most of the setup for you, but you'll have to follow a few more instructions from `setup-tailwind-rn` to finish the process.\n\n\u003cdetails\u003e\n\u003csummary\u003eManual setup\u003c/summary\u003e\n\n1. Install `tailwind-rn`.\n\n```\n$ npm install tailwind-rn\n```\n\n2. Install Tailwind and `concurrently`.\n\n```\n$ npm install --save-dev tailwindcss postcss concurrently\n```\n\n3. Create Tailwind config and necessary files.\n\n```\n$ npx tailwindcss init\n$ echo '@tailwind utilities;' \u003e input.css\n```\n\nThese commands will create the following files:\n\n- **tailwind.config.js** - Tailwind configuration file.\n- **input.css** - Entrypoint for Tailwind compiler. It's required to override the output of Tailwind, so that it doesn't generate CSS for resetting browser styles, which will cause `tailwind-rn` to fail.\n\nDisable unsupported utilities by adding this line to your **tailwind.config.js**:\n\n```diff\nmodule.exports = {\n+\tcorePlugins: require('tailwind-rn/unsupported-core-plugins')\n};\n```\n\nMake sure to configure [`content`](https://tailwindcss.com/docs/content-configuration) part of the config in **tailwind.config.js** to point to your JavaScript files to speed up compilation.\n\n4. Add scripts to build Tailwind styles in package.json.\n\n```diff\n{\n\t\"scripts\": {\n+\t\t\"build:tailwind\": \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer \u0026\u0026 tailwind-rn\",\n+\t\t\"dev:tailwind\": \"concurrently \\\"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\\\" \\\"tailwind-rn --watch\\\"\"\n\t}\n}\n```\n\n5. Build Tailwind styles in watch mode.\n\n```\n$ npm run dev:tailwind\n```\n\nAfter styles are built, you'll see two more files:\n\n- **tailwind.css** - CSS generated by Tailwind.\n- **tailwind.json** - The same CSS, but converted into JSON, so that `tailwind-rn` can understand it.\n\n6. Import [`TailwindProvider`](#tailwindprovider) and `tailwind.json` in the root of your app and wrap the root of your app with it:\n\n```jsx\nimport {TailwindProvider} from 'tailwind-rn';\nimport utilities from './tailwind.json';\n\nconst App = () =\u003e (\n\t\u003cTailwindProvider utilities={utilities}\u003e\n\t\t\u003cMyComponent /\u003e\n\t\u003c/TailwindProvider\u003e\n);\n\nexport default App;\n```\n\n7. Use Tailwind in React Native!\n\n```jsx\nimport {useTailwind} from 'tailwind-rn';\n\nconst MyComponent = () =\u003e {\n\tconst tailwind = useTailwind();\n\n\treturn \u003cText style={tailwind('text-blue-600')}\u003eHello world\u003c/Text\u003e;\n};\n```\n\n\u003c/details\u003e\n\n## Usage\n\nUse [`useTailwind`](#usetailwind) React hook and apply any of the [supported utilities](#supported-utilities) from Tailwind in your React Native views.\n\n```jsx\nimport React from 'react';\nimport {SafeAreaView, View, Text} from 'react-native';\nimport {useTailwind} from 'tailwind-rn';\n\nconst Hello = () =\u003e {\n\tconst tailwind = useTailwind();\n\n\treturn (\n\t\t\u003cSafeAreaView style={tailwind('h-full')}\u003e\n\t\t\t\u003cView style={tailwind('pt-12 items-center')}\u003e\n\t\t\t\t\u003cView style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}\u003e\n\t\t\t\t\t\u003cText style={tailwind('text-blue-800 font-semibold')}\u003e\n\t\t\t\t\t\tHello Tailwind\n\t\t\t\t\t\u003c/Text\u003e\n\t\t\t\t\u003c/View\u003e\n\t\t\t\u003c/View\u003e\n\t\t\u003c/SafeAreaView\u003e\n\t);\n};\n\nexport default Hello;\n```\n\n\u003cimg src=\"screenshot.jpg\" width=\"544\"\u003e\n\n`tailwind` function returns a simple object with styles, which can be used in any React Native view, such as `\u003cView\u003e`, `\u003cText\u003e` and others.\n\n```js\ntailwind('pt-12 items-center');\n//=\u003e {\n//     paddingTop: 48,\n//     alignItems: 'center'\n//   }\n```\n\n## CLI\n\n```\n$ tailwind-rn --help\n\n  Use Tailwind CSS in React Native projects\n\n  Usage\n    $ tailwind-rn [options]\n\n  Options\n    -i, --input    Path to CSS file that Tailwind generates (default: tailwind.css)\n    -o, --output   Output file (default: tailwind.json)\n    -w, --watch    Watch for changes and rebuild as needed\n\n```\n\nRun `tailwind-rn` CLI to transform the CSS generated by Tailwind into a JSON file that can be consumed by [`TailwindProvider`](#tailwindprovider). Add `--watch` flag to watch for changes and build styles continuously, which is useful for development.\n\n## API\n\n### TailwindProvider\n\n#### utilities\n\nType: `object`\n\nParsed JSON object of styles generated by `tailwind-rn` CLI stored in `tailwind.json` by default.\n\n```jsx\nimport {TailwindProvider} from 'tailwind-rn';\nimport utilities from './tailwind.json';\n\nconst App = () =\u003e (\n\t\u003cTailwindProvider utilities={utilities}\u003e\n\t\t\u003cMyComponent /\u003e\n\t\u003c/TailwindProvider\u003e\n);\n```\n\n#### colorScheme\n\nType: `string`\n\nOverride the default color scheme. Possible values are `light` or `dark`.\n\n```jsx\nimport {TailwindProvider} from 'tailwind-rn';\nimport utilities from './tailwind.json';\n\nconst App = () =\u003e (\n\t\u003cTailwindProvider utilities={utilities} colorScheme=\"dark\"\u003e\n\t\t\u003cMyComponent /\u003e\n\t\u003c/TailwindProvider\u003e\n);\n```\n\n### useTailwind\n\nReact hook, which returns a `tailwind` function, that accepts a string with class names. This function returns an object of styles, which can be applied to a React Native view via `style` property.\n\n**Note:** Add [`TailwindProvider`](#tailwindprovider) above the component where you're using this hook.\n\n```jsx\nimport {useTailwind} from 'tailwind-rn';\n\nconst MyComponent = () =\u003e {\n\tconst tailwind = useTailwind();\n\n\treturn \u003cText style={tailwind('text-blue-600')}\u003eHello world\u003c/Text\u003e;\n};\n```\n\n## Supported Utilities\n\n### Modifiers\n\n- [Responsive Breakpoints](https://tailwindcss.com/docs/responsive-design) (all except [multi-range breakpoints](https://tailwindcss.com/docs/responsive-design))\n- [Dark Mode](https://tailwindcss.com/docs/dark-mode)\n- [Prefers Reduced Motion](https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion)\n- [Viewport Orientation](https://tailwindcss.com/docs/hover-focus-and-other-states#viewport-orientation)\n\n### Layout\n\n- [Display](https://tailwindcss.com/docs/display) (only `hidden` and `flex`)\n- [Overflow](https://tailwindcss.com/docs/overflow) (only `overflow-hidden`, `overflow-scroll` and `overflow-visible`)\n- [Position](https://tailwindcss.com/docs/position) (only `relative` and `absolute`)\n- [Top / Right / Bottom / Left](https://tailwindcss.com/docs/top-right-bottom-left) (all except `*-auto`)\n- [Z-Index](https://tailwindcss.com/docs/z-index) (all except `z-auto`)\n\n### Flexbox\n\n- [Flex Direction](https://tailwindcss.com/docs/flex-direction)\n- [Flex Wrap](https://tailwindcss.com/docs/flex-wrap)\n- [Align Items](https://tailwindcss.com/docs/align-items)\n- [Align Content](https://tailwindcss.com/docs/align-content)\n- [Align Self](https://tailwindcss.com/docs/align-self)\n- [Justify Content](https://tailwindcss.com/docs/justify-content)\n- [Flex](https://tailwindcss.com/docs/flex)\n- [Flex Grow](https://tailwindcss.com/docs/flex-grow)\n- [Flex Shrink](https://tailwindcss.com/docs/flex-shrink)\n\n### Spacing\n\n- [Padding](https://tailwindcss.com/docs/padding)\n- [Margin](https://tailwindcss.com/docs/margin)\n\n### Sizing\n\n- [Width](https://tailwindcss.com/docs/width) (all except `w-auto` and `w-screen`)\n- [Min-Width](https://tailwindcss.com/docs/min-width)\n- [Max-Width](https://tailwindcss.com/docs/max-width)\n- [Height](https://tailwindcss.com/docs/height) (all except `h-auto` and `h-screen`)\n- [Min-Height](https://tailwindcss.com/docs/min-height) (all except `min-h-screen`)\n- [Max-Height](https://tailwindcss.com/docs/max-height) (only `max-h-full`)\n\n### Typography\n\n- [Font Family](https://tailwindcss.com/docs/font-family) (only custom font families that you defined in `tailwind.config.js`)\n- [Font Size](https://tailwindcss.com/docs/font-size)\n- [Font Style](https://tailwindcss.com/docs/font-style)\n- [Font Weight](https://tailwindcss.com/docs/font-weight)\n- [Font Variant Numeric](https://tailwindcss.com/docs/font-variant-numeric) (only `oldstyle-nums`, `lining-nums`, `tabular-nums` and `proportional-nums`)\n- [Letter Spacing](https://tailwindcss.com/docs/letter-spacing) (must be used with font size utilities, e.g. `text-lg`)\n- [Line Height](https://tailwindcss.com/docs/line-height)\n- [Text Align](https://tailwindcss.com/docs/text-align)\n- [Text Color](https://tailwindcss.com/docs/text-color) (all except `text-current`)\n- [Text Decoration](https://tailwindcss.com/docs/text-decoration)\n- [Text Decoration Color](https://tailwindcss.com/docs/text-decoration-color)\n- [Text Decoration Style](https://tailwindcss.com/docs/text-decoration-style) (all except `decoration-wavy`)\n- [Text Transform](https://tailwindcss.com/docs/text-transform)\n\n### Backgrounds\n\n- [Background Color](https://tailwindcss.com/docs/background-color)\n\n### Borders\n\n- [Border Color](https://tailwindcss.com/docs/border-color)\n- [Border Style](https://tailwindcss.com/docs/border-style) (all except `border-current`)\n- [Border Width](https://tailwindcss.com/docs/border-width)\n- [Border Radius](https://tailwindcss.com/docs/border-radius)\n\n### Effects\n\n- [Opacity](https://tailwindcss.com/docs/opacity)\n\n### Interactivity\n\n- [Pointer Events](https://tailwindcss.com/docs/pointer-events)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimdemedes%2Ftailwind-rn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvadimdemedes%2Ftailwind-rn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvadimdemedes%2Ftailwind-rn/lists"}