CSS Parser - Uniwind

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!

Tailwind Basics

Learn how to use Tailwind utilities in Uniwind

Theming

Discover theming and CSS variables in Uniwind

​Overview

​Why Use Custom CSS?

​Basic Usage

​CSS Definition

​Using in Components

​Combining CSS Classes with Tailwind

​CSS Definition

​Usage with Tailwind

​Using light-dark() Function

​Best Practices

​Recommended Pattern

​Performance Considerations

​Feedback & Feature Requests

Share Your Feedback

​Related

Tailwind Basics

Theming

Overview

Why Use Custom CSS?

Basic Usage

CSS Definition

Using in Components

Combining CSS Classes with Tailwind

CSS Definition

Usage with Tailwind

Using light-dark() Function

Best Practices

Recommended Pattern

Performance Considerations

Feedback & Feature Requests

Related