Cyclonewind

🚀 100% Tailwind CSS for React Native

Adds missing Tailwind classes to NativeWind. Works exactly like NativeWind - just with more features!

📦 Install

Prerequisites: NativeWind must be installed and configured in your project first. Follow the NativeWind installation guide if you haven't already.

npm install cyclonewind

🚀 Use It (Works exactly like NativeWind)

Option 1: Use styled() function (Recommended)

import { View, Text, ScrollView } from "react-native";
import { styled } from "cyclonewind";

// Create styled components (works exactly like NativeWind)
const StyledView = styled(View);
const StyledText = styled(Text);
const StyledScrollView = styled(ScrollView);

export default function App() {
  return (
    <StyledScrollView className="flex-1 bg-white">
      {/* All normal NativeWind classes work */}
      <StyledText className="text-2xl font-bold text-center p-4">
        Hello World!
      </StyledText>

      {/* PLUS classes that didn't work before! */}
      <StyledView className="grid grid-cols-2 gap-4 p-4">
        <StyledView className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 rounded-lg">
          <StyledText className="text-white text-center">
            Grid + Gradients!
          </StyledText>
        </StyledView>
        <StyledView className="bg-white p-4 rounded-lg shadow-2xl backdrop-blur-lg">
          <StyledText className="text-center">Enhanced Shadows!</StyledText>
        </StyledView>
      </StyledView>
    </StyledScrollView>
  );
}

Option 2: Use pre-made components

import { View, Text, ScrollView } from "cyclonewind";

export default function App() {
  return (
    <ScrollView className="flex-1 bg-white">
      <Text className="text-2xl font-bold text-center p-4">Hello World!</Text>

      <View className="grid grid-cols-2 gap-4 p-4">
        <View className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 rounded-lg">
          <Text className="text-white text-center">Grid + Gradients!</Text>
        </View>
        <View className="bg-white p-4 rounded-lg shadow-2xl backdrop-blur-lg">
          <Text className="text-center">Enhanced Shadows!</Text>
        </View>
      </View>
    </ScrollView>
  );
}

✨ What's New

| Feature | Before | After | | ---------------- | --------- | ----------------------------------- | | Grid Layout | ❌ Broken | ✅ grid grid-cols-2 gap-4 | | Gradients | ❌ Broken | ✅ bg-gradient-to-r from-blue-500 | | Better Shadows | ❌ Basic | ✅ shadow-2xl with elevation | | Backdrop Effects | ❌ Broken | ✅ backdrop-blur-lg | | All NativeWind | ✅ Works | ✅ Still works perfectly |

🔧 Available Options

Option 1: styled() function

import { View, Text } from "react-native";
import { styled } from "cyclonewind";

const StyledView = styled(View);
const StyledText = styled(Text);

Option 2: Pre-made components

import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Image,
  Pressable,
} from "cyclonewind";

Option 3: Hook (for advanced users)

import { useCyclonewind } from "cyclonewind";

function MyComponent({ className, style, ...props }) {
  const enhancedStyle = useCyclonewind(className, style);
  return <View className={className} style={enhancedStyle} {...props} />;
}

🎨 Custom Styles

Add your own custom classes (exactly like NativeWind):

import { addCustomClass } from "cyclonewind";

// Add custom glass effect
addCustomClass("glass", {
  backgroundColor: "rgba(255, 255, 255, 0.1)",
  borderWidth: 1,
  borderColor: "rgba(255, 255, 255, 0.2)",
});

// Use it like any Tailwind class
<StyledView className="glass p-4 rounded-lg">
  <StyledText>Glass effect!</StyledText>
</StyledView>;

📱 Real Example

import React from "react";
import { View, Text, ScrollView } from "react-native";
import { styled } from "cyclonewind";

const StyledView = styled(View);
const StyledText = styled(Text);
const StyledScrollView = styled(ScrollView);

export default function App() {
  return (
    <StyledScrollView className="flex-1 bg-gray-100">
      {/* Header with gradient */}
      <StyledView className="bg-gradient-to-r from-purple-500 to-pink-500 p-8 pt-16">
        <StyledText className="text-white text-3xl font-bold text-center">
          My App ✨
        </StyledText>
      </StyledView>

      {/* Grid layout that actually works! */}
      <StyledView className="grid grid-cols-2 gap-4 p-4">
        <StyledView className="bg-white p-6 rounded-xl shadow-lg">
          <StyledText className="text-xl font-semibold text-gray-800">
            Card 1
          </StyledText>
          <StyledText className="text-gray-600 mt-2">
            Some content here
          </StyledText>
        </StyledView>

        <StyledView className="bg-white p-6 rounded-xl shadow-lg">
          <StyledText className="text-xl font-semibold text-gray-800">
            Card 2
          </StyledText>
          <StyledText className="text-gray-600 mt-2">
            More content here
          </StyledText>
        </StyledView>

        <StyledView className="bg-white p-6 rounded-xl shadow-lg backdrop-blur-lg">
          <StyledText className="text-xl font-semibold text-gray-800">
            Card 3
          </StyledText>
          <StyledText className="text-gray-600 mt-2">
            With backdrop blur!
          </StyledText>
        </StyledView>

        <StyledView className="bg-gradient-to-br from-blue-400 to-blue-600 p-6 rounded-xl">
          <StyledText className="text-white text-xl font-semibold">
            Card 4
          </StyledText>
          <StyledText className="text-blue-100 mt-2">
            Gradient background!
          </StyledText>
        </StyledView>
      </StyledView>
    </StyledScrollView>
  );
}

🚀 Migration Guide

From NativeWind

// Before (some classes don't work)
import { View, Text, ScrollView } from "react-native";

function MyApp() {
  return (
    <ScrollView className="flex-1 bg-white">
      <View className="p-4">
        <Text className="text-lg font-bold">Hello</Text>
      </View>
    </ScrollView>
  );
}

// After (all classes work!) - Option 1: styled()
import { View, Text, ScrollView } from "react-native";
import { styled } from "cyclonewind";

const StyledView = styled(View);
const StyledText = styled(Text);
const StyledScrollView = styled(ScrollView);

function MyApp() {
  return (
    <StyledScrollView className="flex-1 bg-white">
      <StyledView className="p-4 grid grid-cols-2 gap-4">
        {" "}
        {/* Now grid works! */}
        <StyledText className="text-lg font-bold backdrop-blur-lg">
          Hello
        </StyledText>{" "}
        {/* Backdrop works! */}
      </StyledView>
    </StyledScrollView>
  );
}

// After (all classes work!) - Option 2: Pre-made components
import { View, Text, ScrollView } from "cyclonewind";

function MyApp() {
  return (
    <ScrollView className="flex-1 bg-white">
      <View className="p-4 grid grid-cols-2 gap-4">
        {" "}
        {/* Now grid works! */}
        <Text className="text-lg font-bold backdrop-blur-lg">Hello</Text>{" "}
        {/* Backdrop works! */}
      </View>
    </ScrollView>
  );
}

💡 Why Cyclonewind?

• ✅ Works exactly like NativeWind - Same className prop, same syntax
• ✅ Zero Breaking Changes - All your existing code works
• ✅ 100% Tailwind - Every class works perfectly
• ✅ Fast Performance - Only processes unsupported classes
• ✅ TypeScript Ready - Full type support
• ✅ Multiple Usage Options - Choose what works best for you

Made with ❤️ for React Native developers who want the full power of Tailwind CSS