Skip to content

3.3.0 (Jan 19, 2025)

Latest
Latest

Choose a tag to compare

View all tags
@Teczer Teczer released this 19 Jan 15:42
· 1 commit to main since this release
v3.3.0
2a8081c

Changelog v3.3.0

🎨 New Feature: Uniwind Styling Option

This release adds Uniwind as a third styling option alongside NativeWind and Unistyles.

What is Uniwind?

Uniwind is a Tailwind CSS solution for React Native that offers:

  • Tailwind v4 support with CSS-first configuration
  • Type-safe styling with automatic TypeScript generation
  • Live theme switching with Uniwind.setTheme()
  • CSS variables for dynamic theming
  • 3-theme system (light/dark/premium) out of the box

Styling Options

When running the CLI, you now have 3 choices:

  1. NativeWind - Tailwind CSS v3 for React Native (2-theme: light/dark)
  2. Unistyles - Type-safe styling with breakpoints (3-theme: light/dark/premium)
  3. Uniwind - Tailwind CSS v4 with live theming (3-theme: light/dark/premium) ✨ NEW

🔧 Technical Changes

Uniwind Configuration

Dependencies Added

{
  "uniwind": "1.2.4",
  "tailwindcss": "4.1.16",
  "postcss": "8.5.6",
  "lightningcss": "1.30.2",
  "react-native-gesture-handler": "2.28.0",
  "react-native-keyboard-controller": "1.18.5"
}

Metro Config

const { withUniwindConfig } = require('uniwind/metro');

module.exports = withUniwindConfig(config, {
  cssEntryFile: './app/global.css',
  extraThemes: ['premium'],
});

Theme System

  • Uses @layer theme with @variant light/dark/premium blocks in CSS
  • Uniwind.setTheme() for live theme switching
  • useUniwind() hook for accessing current theme
  • MMKV persistence for theme preference

File Structure

app/
├── global.css          # Tailwind v4 CSS with theme variants
├── _layout.tsx         # Imports global.css, uses withUniwind HOC
└── (tabs)/
    ├── _layout.tsx     # Uses useUniwindTheme for navigation colors
    ├── index.tsx       # Styled with Tailwind classes
    └── settings.tsx    # Theme toggle button

components/
├── container.tsx       # SafeAreaView wrapped with withUniwind
└── theme-toggle.tsx    # 3-theme cycle with haptic feedback

lib/
├── mmkvStorage.ts      # MMKV storage instance
└── use-uniwind-theme.ts # Theme hook with persistence

constants/
├── themes.ts           # Theme icons and config
└── uniwind-themes.ts   # Color definitions per theme

🐛 Bug Fixes

Uniwind Serialization Error

  • Fixed "Failed to serialize javascript object" error
  • Caused by Tailwind scanning node_modules and native iOS files
  • Solution: @source directives in CSS to limit scan scope

Theme Not Updating Live

  • Fixed by using Uniwind.setTheme() instead of updateCSSVariables()
  • Added extraThemes: ['premium'] in metro config for custom themes
  • Proper @variant blocks in @layer theme for CSS variables

📦 Migration from v3.1.x

If you have an existing project, generate a new one with Uniwind to see the correct configuration, then:

  1. Install new dependencies:

    bun add uniwind@1.2.4 tailwindcss@4 postcss lightningcss

  2. Update metro.config.js to use withUniwindConfig

  3. Move global.css to app/global.css with proper @layer theme syntax

  4. Update _layout.tsx to import ./global.css and use Uniwind.setTheme()

📚 Documentation

Full Changelog: v3.1.0...v3.2.0

Assets 2
Loading