Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cyclonewind) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

cyclonewind