https://github.com/vishwagauravin/react-native-tailwind-template

React Native + TailwindCSS starter Template 🔥
https://github.com/vishwagauravin/react-native-tailwind-template

react-native reactnative tailwind tailwind-css tailwindcss template

Last synced: 2 months ago
JSON representation

React Native + TailwindCSS starter Template 🔥

• Host: GitHub
• URL: https://github.com/vishwagauravin/react-native-tailwind-template
• Owner: VishwaGauravIn
• Created: 2022-01-30T13:06:03.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-01-30T13:06:08.000Z (over 4 years ago)
• Last Synced: 2025-05-07T19:59:57.546Z (about 1 year ago)
• Topics: react-native, reactnative, tailwind, tailwind-css, tailwindcss, template
• Language: JavaScript
• Homepage:
• Size: 130 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: ReadMe.md

Awesome Lists containing this project

README

          
![ReactNative + Tailwind Template](https://github.com/VishwaGauravIn/Images/blob/main/rn+tailwind.png?raw=true)

# ReactNative + TailwindCSS Template

## How to Use ?

- Step 1: Clone this respository and open in VSCode (or any code editor of your choice)

- Step 2: Open a Terminal and Install required packages by using ``` npm i ```

- Step 3: Run the Project using ``` expo start ```

- Step 4: Open a new terminal and run ``` npm run dev:tailwind ``` for development mode

- Step 5: You can write code in _Home.js_ or create any components in _components_ folder.

- Result: Your app will work perfectly and reflect all the changes

## Note:

- This is not any official version of tailwindcss for reactnative so few classes are missing 

- In order to change the folder structure, you need to change content section in _tailwind.config.js_

- for using tailwind styling you need to wrap classes in tw, for example ```tw('text-cyan-500')```

## Example Code :

Here are some basic example codes for you, you **don't** need to do these as I have already done everything for you.

### Wrapping Home in order to use tailwind classes

```javascript

import { TailwindProvider } from "tailwind-rn";

import { Home } from "./Home";

import utilities from "./tailwind.json";

export default function App() {

  return (

    

      

    

  );

}

```

### Using tailwind styles

```javascript

import React from "react";

import { Text } from "react-native";

import { useTailwind } from "tailwind-rn";

export const Home = () => {

  const tw = useTailwind();

  return (

    

      Hello from VG !

    

  );

};

```

## Official Docs:

[![React Native](https://img.shields.io/badge/react_native-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://reactnative.dev/docs/getting-started)

[![TailwindCSS](https://img.shields.io/badge/tailwind%20for%20React%20Native-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://github.com/vadimdemedes/tailwind-rn)

## Updates ?

For updates, you can ⭐Star this repository