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

import { TailwindProvider } from "tailwind-rn";
import { Home } from "./Home";
import utilities from "./tailwind.json";

export default function App() {
  return (
    <TailwindProvider utilities={utilities}>
      <Home />
    </TailwindProvider>
  );
}

Using tailwind styles

import React from "react";
import { Text } from "react-native";
import { useTailwind } from "tailwind-rn";

export const Home = () => {
  const tw = useTailwind();
  return (
    <Text
      style={tw(
        "text-cyan-800 mt-8 self-center bg-cyan-200 text-center w-32 px-2 p-1 rounded-xl"
      )}
    >
      Hello from VG !
    </Text>
  );
};

Official Docs:

Updates ?

For updates, you can ⭐Star this repository