Defining color tokens in Nativewind 4

global.css

/* Default Tailwind styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Light mode */
:root {
  --colors-on-container: #353531;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --colors-on-container: #cececa;
  }
}

tailwind.config.js

module.exports = {
  content: [],
  theme: {
    colors: {
      'on-container': 'var(--colors-on-container)',
    },
  },
}

typography.jsx

import { Text } from 'react-native'

export function Typography () {
  return (
    <Text className="text-on-container">Typography</Text>
  )
}