tailwind-rn
Advanced tools
Use Tailwind in React Native projects
All styles are generated directly from Tailwind's output, so they're always up-to-date.
sm, md, lg)$ npm install tailwind-rn
Run the following command to automatically add tailwind-rn to your React Native project:
$ npx setup-tailwind-rn
It 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.
tailwind-rn.$ npm install tailwind-rn
concurrently.$ npm install --save-dev tailwindcss postcss concurrently
$ npx tailwindcss init
$ echo '@tailwind utilities;' > input.css
These commands will create the following files:
tailwind-rn to fail.Disable unsupported utilities by adding this line to your tailwind.config.js:
module.exports = {
+ corePlugins: require('tailwind-rn/unsupported-core-plugins')
};
Make sure to configure content part of the config in tailwind.config.js to point to your JavaScript files to speed up compilation.
{
"scripts": {
+ "build:tailwind": "tailwindcss --input input.css --output tailwind.css --no-autoprefixer && tailwind-rn",
+ "dev:tailwind": "concurrently \"tailwindcss --input input.css --output tailwind.css --no-autoprefixer --watch\" \"tailwind-rn --watch\""
}
}
$ npm run dev:tailwind
After styles are built, you'll see two more files:
tailwind-rn can understand it.TailwindProvider and tailwind.json in the root of your app and wrap the root of your app with it:import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => (
<TailwindProvider utilities={utilities}>
<MyComponent />
</TailwindProvider>
);
export default App;
import {useTailwind} from 'tailwind-rn';
const MyComponent = () => {
const tailwind = useTailwind();
return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
};
Use useTailwind React hook and apply any of the supported utilities from Tailwind in your React Native views.
import React from 'react';
import {SafeAreaView, View, Text} from 'react-native';
import {useTailwind} from 'tailwind-rn';
const Hello = () => {
const tailwind = useTailwind();
return (
<SafeAreaView style={tailwind('h-full')}>
<View style={tailwind('pt-12 items-center')}>
<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
<Text style={tailwind('text-blue-800 font-semibold')}>
Hello Tailwind
</Text>
</View>
</View>
</SafeAreaView>
);
};
export default Hello;
tailwind function returns a simple object with styles, which can be used in any React Native view, such as <View>, <Text> and others.
tailwind('pt-12 items-center');
//=> {
// paddingTop: 48,
// alignItems: 'center'
// }
$ tailwind-rn --help
Use Tailwind CSS in React Native projects
Usage
$ tailwind-rn [options]
Options
-i, --input Path to CSS file that Tailwind generates (default: tailwind.css)
-o, --output Output file (default: tailwind.json)
-w, --watch Watch for changes and rebuild as needed
Run tailwind-rn CLI to transform the CSS generated by Tailwind into a JSON file that can be consumed by TailwindProvider. Add --watch flag to watch for changes and build styles continuously, which is useful for development.
Type: object
Parsed JSON object of styles generated by tailwind-rn CLI stored in tailwind.json by default.
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => (
<TailwindProvider utilities={utilities}>
<MyComponent />
</TailwindProvider>
);
Type: string
Override the default color scheme. Possible values are light or dark.
import {TailwindProvider} from 'tailwind-rn';
import utilities from './tailwind.json';
const App = () => (
<TailwindProvider utilities={utilities} colorScheme="dark">
<MyComponent />
</TailwindProvider>
);
React 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.
Note: Add TailwindProvider above the component where you're using this hook.
import {useTailwind} from 'tailwind-rn';
const MyComponent = () => {
const tailwind = useTailwind();
return <Text style={tailwind('text-blue-600')}>Hello world</Text>;
};
hidden and flex)overflow-hidden, overflow-scroll and overflow-visible)relative and absolute)*-auto)z-auto)w-auto and w-screen)h-auto and h-screen)min-h-screen)max-h-full)tailwind.config.js)oldstyle-nums, lining-nums, tabular-nums and proportional-nums)text-lg)text-current)decoration-wavy)border-current)FAQs
Use Tailwind CSS in React Native projects
The npm package tailwind-rn receives a total of 3,307 weekly downloads. As such, tailwind-rn popularity was classified as popular.
We found that tailwind-rn demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.
Security News
TypeScript is porting its compiler to Go, delivering 10x faster builds, lower memory usage, and improved editor performance for a smoother developer experience.
Research
Security News
The Socket Research Team has discovered six new malicious npm packages linked to North Korea’s Lazarus Group, designed to steal credentials and deploy backdoors.