Tailwind Resources Logo Tailwind Resources
React Native Tailwindcss screenshot

React Native Tailwindcss

Author Avatar Theme by Tvke
Updated: 26 Aug 2021
567 Stars

A react-native style system based on TailwindCSS

Github Live Preview

Categories

React React native

Overview:

React-native-tailwindcss is a package that provides a styling system for React Native, based on TailwindCSS. It allows users to easily apply styles to React Native components in a TailwindCSS-like fashion. With the utility classes transformed to valid object names, customization is made simple through the use of the tailwind.config.js file. This package also handles special cases specific to React Native styling, such as color values, shadows, and directional layout variations.

Features:

  • TailwindCSS-like Styling: Easily apply styles to React Native components using utility classes.
  • Customization with tailwind.config.js: Customize styles by utilizing the familiar tailwind.config.js file.
  • Color Object: Access all defined colors through the color object for convenient styling.
  • Special Case Handling: Manage special cases like shadows, directional layout, and separator handling effortlessly.
  • Interoperability with styled-components: Play nicely with styled-components for enhanced styling options.

Installation:

To install the react-native-tailwindcss package, follow these steps:

  1. Run the command npm install react-native-tailwindcss in your project directory to install the package.
  2. Initialize a new tailwindCSS config file or use an existing one for customization.
  3. For usage with styled-components, implement the array syntax within the interpolated template literal.

Summary:

React-native-tailwindcss provides a convenient solution for styling React Native components by leveraging the popular TailwindCSS approach. It simplifies the styling process, offers customization options through the tailwind.config.js file, and handles special cases specific to React Native styling. With support for styled-components and features like color objects, shadow management, and directional layout variations, this package enhances the styling experience for React Native developers.