CSS Parser

Write custom CSS classes alongside Tailwind in your React Native app

Overview

Uniwind includes a built-in CSS parser that allows you to use traditional CSS alongside Tailwind utilities. While our primary focus is on Tailwind syntax, you can write custom CSS classes and use them directly in your React Native components.

We’re actively seeking feedback to identify missing features and limitations. Your input helps us improve CSS support in Uniwind!

Why Use Custom CSS?

While Tailwind provides utility classes for most styling needs, custom CSS can be useful for:

• Complex, reusable component styles that would be verbose with utilities
• Migrating existing web codebases to React Native
• Defining design system components with consistent styling
• Advanced animations and transitions

Basic Usage

Define custom CSS classes in your global.css file and use them with the className prop:

CSS Definition

global.css

.container {
    flex: 1;
    background-color: red;
    width: 50px;
    height: 50px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

Using in Components

import { View } from 'react-native'

export const MyComponent = () => (
  <View className="container" />
)

Combining CSS Classes with Tailwind

You can seamlessly mix custom CSS classes with Tailwind utilities:

CSS Definition

global.css

.card {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

Usage with Tailwind

import { View, Text } from 'react-native'

export const Card = ({ title, children }) => (
  <View className="card p-4 m-2">
    <Text className="card-header mb-2">{title}</Text>
    <View className="flex-1">{children}</View>
  </View>
)

Using light-dark() Function

Uniwind supports the CSS light-dark() function, which provides a convenient way to define different values for light and dark themes:

.adaptive-card {
    background-color: light-dark(#ffffff, #1f2937);
    color: light-dark(#111827, #f9fafb);
    border-color: light-dark(#e5e7eb, #374151);
}

The first value is used in light mode, and the second value is used in dark mode. This automatically adapts when the theme changes.

<View className="adaptive-card p-4">
  {/* Colors automatically switch between light and dark themes */}
</View>

The light-dark() function is particularly useful for maintaining color consistency across themes without needing separate CSS variables for each theme.

Best Practices

Prefer Tailwind utilities for simple styles. Use custom CSS classes for complex, reusable component patterns that would be verbose or repetitive with utility classes.

Avoid deeply nested selectors. React Native’s styling model is simpler than web CSS. Keep your selectors flat and component-scoped for best results.

Recommended Pattern

/* ✅ Good: Component-scoped classes */
.product-card {
    background-color: white;
    border-radius: 12px;
    padding: 16px;
}

.product-card-image {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 8px;
}

.product-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 12px;
}

/* ❌ Avoid: Complex nested selectors */
.product-card .image-container .image .overlay .title {
    /* This is too complex for React Native */
}

Performance Considerations

• Compile-time parsing: CSS is parsed at build time, not runtime, for optimal performance
• No runtime overhead: Custom CSS classes are converted to React Native styles during compilation

Feedback & Feature Requests

The CSS parser is continuously evolving. We’re actively looking for feedback to help identify missing features and limitations.

Share Your Feedback

Let us know what CSS features you need or issues you’ve encountered!

Related

Tailwind Basics

Learn how to use Tailwind utilities in Uniwind

Theming

Discover theming and CSS variables in Uniwind