diff --git a/bun.lock b/bun.lock
index 39948b0f..2494695e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -9,7 +9,7 @@
         "eslint": "9.39.1",
         "eslint-config-codemask": "2.2.1",
         "husky": "9.1.7",
-        "turbo": "2.6.3",
+        "turbo": "2.7.6",
         "typescript": "catalog:",
       },
     },
@@ -126,7 +126,7 @@
     },
     "packages/uniwind": {
       "name": "uniwind",
-      "version": "1.2.2",
+      "version": "1.2.7",
       "dependencies": {
         "@tailwindcss/node": "4.1.17",
         "@tailwindcss/oxide": "4.1.17",
@@ -2463,19 +2463,19 @@
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
-    "turbo": ["turbo@2.6.3", "", { "optionalDependencies": { "turbo-darwin-64": "2.6.3", "turbo-darwin-arm64": "2.6.3", "turbo-linux-64": "2.6.3", "turbo-linux-arm64": "2.6.3", "turbo-windows-64": "2.6.3", "turbo-windows-arm64": "2.6.3" }, "bin": { "turbo": "bin/turbo" } }, "sha512-bf6YKUv11l5Xfcmg76PyWoy/e2vbkkxFNBGJSnfdSXQC33ZiUfutYh6IXidc5MhsnrFkWfdNNLyaRk+kHMLlwA=="],
+    "turbo": ["turbo@2.7.6", "", { "optionalDependencies": { "turbo-darwin-64": "2.7.6", "turbo-darwin-arm64": "2.7.6", "turbo-linux-64": "2.7.6", "turbo-linux-arm64": "2.7.6", "turbo-windows-64": "2.7.6", "turbo-windows-arm64": "2.7.6" }, "bin": { "turbo": "bin/turbo" } }, "sha512-PO9AvJLEsNLO+EYhF4zB+v10hOjsJe5kJW+S6tTbRv+TW7gf1Qer4mfjP9h3/y9h8ZiPvOrenxnEgDtFgaM5zw=="],
 
-    "turbo-darwin-64": ["turbo-darwin-64@2.6.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-BlJJDc1CQ7SK5Y5qnl7AzpkvKSnpkfPmnA+HeU/sgny3oHZckPV2776ebO2M33CYDSor7+8HQwaodY++IINhYg=="],
+    "turbo-darwin-64": ["turbo-darwin-64@2.7.6", "", { "os": "darwin", "cpu": "x64" }, "sha512-bYu0qnWju2Ha3EbIkPCk1SMLT3sltKh1P/Jy5FER6BmH++H5z+T5MHh3W1Xoers9rk4N1VdKvog9FO1pxQyjhw=="],
 
-    "turbo-darwin-arm64": ["turbo-darwin-arm64@2.6.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-MwVt7rBKiOK7zdYerenfCRTypefw4kZCue35IJga9CH1+S50+KTiCkT6LBqo0hHeoH2iKuI0ldTF2a0aB72z3w=="],
+    "turbo-darwin-arm64": ["turbo-darwin-arm64@2.7.6", "", { "os": "darwin", "cpu": "arm64" }, "sha512-KCxTf3Y1hgNLYIWRLw8bwH8Zie9RyCGoxAlXYsCBI/YNqBSR+ZZK9KYzFxAqDaVaNvTwLFv3rJRGsXOFWg4+Uw=="],
 
-    "turbo-linux-64": ["turbo-linux-64@2.6.3", "", { "os": "linux", "cpu": "x64" }, "sha512-cqpcw+dXxbnPtNnzeeSyWprjmuFVpHJqKcs7Jym5oXlu/ZcovEASUIUZVN3OGEM6Y/OTyyw0z09tOHNt5yBAVg=="],
+    "turbo-linux-64": ["turbo-linux-64@2.7.6", "", { "os": "linux", "cpu": "x64" }, "sha512-vjoU8zIfNgvJR3cMitgw7inEoi6bmuVuFawDl5yKtxjAEhDktFdRBpGS3WojD4l3BklBbIK689ssXcGf21LxRA=="],
 
-    "turbo-linux-arm64": ["turbo-linux-arm64@2.6.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-MterpZQmjXyr4uM7zOgFSFL3oRdNKeflY7nsjxJb2TklsYqiu3Z9pQ4zRVFFH8n0mLGna7MbQMZuKoWqqHb45w=="],
+    "turbo-linux-arm64": ["turbo-linux-arm64@2.7.6", "", { "os": "linux", "cpu": "arm64" }, "sha512-TcMpBvTqZf+1DptrVYLbZls7WY1UVNDTGaf0bo7/GCgWYv5eZHCVo4Td7kCJeDU4glbXg67REX0md0S0V6ghMg=="],
 
-    "turbo-windows-64": ["turbo-windows-64@2.6.3", "", { "os": "win32", "cpu": "x64" }, "sha512-biDU70v9dLwnBdLf+daoDlNJVvqOOP8YEjqNipBHzgclbQlXbsi6Gqqelp5er81Qo3BiRgmTNx79oaZQTPb07Q=="],
+    "turbo-windows-64": ["turbo-windows-64@2.7.6", "", { "os": "win32", "cpu": "x64" }, "sha512-1/MhkYldiihjneY8QnnDMbAkHXn/udTWSVYS94EMlkE9AShozsLTTOT1gDOpX06EfEW5njP09suhMvxbvwuwpQ=="],
 
-    "turbo-windows-arm64": ["turbo-windows-arm64@2.6.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-dDHVKpSeukah3VsI/xMEKeTnV9V9cjlpFSUs4bmsUiLu3Yv2ENlgVEZv65wxbeE0bh0jjpmElDT+P1KaCxArQQ=="],
+    "turbo-windows-arm64": ["turbo-windows-arm64@2.7.6", "", { "os": "win32", "cpu": "arm64" }, "sha512-0wDVnUJLFAWm4ZzOQFDkbyyUqaszorTGf3Rdc22IRIyJTTLd6ajqdb+cWD89UZ1RKr953+PZR1gqgWQY4PDuhA=="],
 
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
diff --git a/package.json b/package.json
index d07ffad7..c4bd61c9 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
         "eslint": "9.39.1",
         "eslint-config-codemask": "2.2.1",
         "husky": "9.1.7",
-        "turbo": "2.6.3"
+        "turbo": "2.7.6"
     },
     "packageManager": "bun@1.3.2",
     "trustedDependencies": [
diff --git a/packages/uniwind/eslint.config.ts b/packages/uniwind/eslint.config.ts
index c36981fd..b10a377b 100644
--- a/packages/uniwind/eslint.config.ts
+++ b/packages/uniwind/eslint.config.ts
@@ -17,6 +17,12 @@ export default [
             'nested-if/nested-if-statements': 'off',
             'no-continue': 'off',
             '@typescript-eslint/array-type': 'off',
+            '@typescript-eslint/no-unused-vars': ['error', {
+                'argsIgnorePattern': '^_',
+                'varsIgnorePattern': '^_',
+                'caughtErrorsIgnorePattern': '^_',
+            }],
+            'no-bitwise': 'off',
         },
     },
     {
diff --git a/packages/uniwind/src/components/native/ActivityIndicator.tsx b/packages/uniwind/src/components/native/ActivityIndicator.tsx
index bbd30d93..a185448a 100644
--- a/packages/uniwind/src/components/native/ActivityIndicator.tsx
+++ b/packages/uniwind/src/components/native/ActivityIndicator.tsx
@@ -1,11 +1,10 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
-    const style = useStyle(props.className)
-    const color = useUniwindAccent(props.colorClassName)
+    const style = useStyle(props.className, props)
+    const color = useStyle(props.colorClassName, props).accentColor
 
     return (
         <RNActivityIndicator
diff --git a/packages/uniwind/src/components/native/Button.tsx b/packages/uniwind/src/components/native/Button.tsx
index e64c73dd..a7be8a22 100644
--- a/packages/uniwind/src/components/native/Button.tsx
+++ b/packages/uniwind/src/components/native/Button.tsx
@@ -1,9 +1,9 @@
 import { Button as RNButton, ButtonProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { useStyle } from './useStyle'
 
 export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
-    const color = useUniwindAccent(props.colorClassName)
+    const color = useStyle(props.colorClassName, props).accentColor
 
     return (
         <RNButton
diff --git a/packages/uniwind/src/components/native/FlatList.tsx b/packages/uniwind/src/components/native/FlatList.tsx
index d4095aec..bc26d7ea 100644
--- a/packages/uniwind/src/components/native/FlatList.tsx
+++ b/packages/uniwind/src/components/native/FlatList.tsx
@@ -1,15 +1,14 @@
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
-    const style = useStyle(props.className)
-    const styleColumnWrapper = useStyle(props.columnWrapperClassName)
-    const styleContentContainer = useStyle(props.contentContainerClassName)
-    const styleListFooterComponent = useStyle(props.ListFooterComponentClassName)
-    const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, props)
+    const styleColumnWrapper = useStyle(props.columnWrapperClassName, props)
+    const styleContentContainer = useStyle(props.contentContainerClassName, props)
+    const styleListFooterComponent = useStyle(props.ListFooterComponentClassName, props)
+    const styleListHeaderComponent = useStyle(props.ListHeaderComponentClassName, props)
+    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
     const hasSingleColumn = !('numColumns' in props) || props.numColumns === 1
 
     return (
diff --git a/packages/uniwind/src/components/native/Image.tsx b/packages/uniwind/src/components/native/Image.tsx
index a0a7c4e0..678cdc4a 100644
--- a/packages/uniwind/src/components/native/Image.tsx
+++ b/packages/uniwind/src/components/native/Image.tsx
@@ -1,11 +1,10 @@
 import { Image as RNImage, ImageProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
-    const style = useStyle(props.className)
-    const tintColor = useUniwindAccent(props.tintColorClassName)
+    const style = useStyle(props.className, props)
+    const tintColor = useStyle(props.tintColorClassName, props).accentColor
 
     return (
         <RNImage
diff --git a/packages/uniwind/src/components/native/ImageBackground.tsx b/packages/uniwind/src/components/native/ImageBackground.tsx
index 318b0d0d..5014c581 100644
--- a/packages/uniwind/src/components/native/ImageBackground.tsx
+++ b/packages/uniwind/src/components/native/ImageBackground.tsx
@@ -1,12 +1,11 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
-    const style = useStyle(props.className)
-    const imageStyle = useStyle(props.imageClassName)
-    const tintColor = useUniwindAccent(props.tintColorClassName)
+    const style = useStyle(props.className, props)
+    const imageStyle = useStyle(props.imageClassName, props)
+    const tintColor = useStyle(props.tintColorClassName, props).accentColor
 
     return (
         <RNImageBackground
diff --git a/packages/uniwind/src/components/native/InputAccessoryView.tsx b/packages/uniwind/src/components/native/InputAccessoryView.tsx
index 031d6e23..0e6eacdb 100644
--- a/packages/uniwind/src/components/native/InputAccessoryView.tsx
+++ b/packages/uniwind/src/components/native/InputAccessoryView.tsx
@@ -1,14 +1,13 @@
 import { ForwardedRef } from 'react'
 import { InputAccessoryView as RNInputAccessoryView, InputAccessoryViewProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const InputAccessoryView = copyComponentProperties(
     RNInputAccessoryView,
     (props: InputAccessoryViewProps & { ref?: ForwardedRef<RNInputAccessoryView> }) => {
-        const style = useStyle(props.className)
-        const backgroundColor = useUniwindAccent(props.backgroundColorClassName)
+        const style = useStyle(props.className, props)
+        const backgroundColor = useStyle(props.backgroundColorClassName, props).accentColor
 
         return (
             <RNInputAccessoryView
diff --git a/packages/uniwind/src/components/native/KeyboardAvoidingView.tsx b/packages/uniwind/src/components/native/KeyboardAvoidingView.tsx
index 36ffc46a..045eb8cf 100644
--- a/packages/uniwind/src/components/native/KeyboardAvoidingView.tsx
+++ b/packages/uniwind/src/components/native/KeyboardAvoidingView.tsx
@@ -3,8 +3,8 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const KeyboardAvoidingView = copyComponentProperties(RNKeyboardAvoidingView, (props: KeyboardAvoidingViewProps) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
+    const style = useStyle(props.className, props)
+    const contentContainerStyle = useStyle(props.contentContainerClassName, props)
 
     return (
         <RNKeyboardAvoidingView
diff --git a/packages/uniwind/src/components/native/Modal.tsx b/packages/uniwind/src/components/native/Modal.tsx
index 1e5af4cc..2a4dec19 100644
--- a/packages/uniwind/src/components/native/Modal.tsx
+++ b/packages/uniwind/src/components/native/Modal.tsx
@@ -1,11 +1,10 @@
 import { Modal as RNModal, ModalProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
-    const style = useStyle(props.className)
-    const backdropColor = useUniwindAccent(props.backdropColorClassName)
+    const style = useStyle(props.className, props)
+    const backdropColor = useStyle(props.backdropColorClassName, props).accentColor
 
     return (
         <RNModal
diff --git a/packages/uniwind/src/components/native/Pressable.tsx b/packages/uniwind/src/components/native/Pressable.tsx
index 3750e1b7..3c220a57 100644
--- a/packages/uniwind/src/components/native/Pressable.tsx
+++ b/packages/uniwind/src/components/native/Pressable.tsx
@@ -4,9 +4,13 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const Pressable = copyComponentProperties(RNPressable, (props: PressableProps) => {
-    const style = useStyle(props.className, {
-        isDisabled: Boolean(props.disabled),
-    })
+    const style = useStyle(
+        props.className,
+        props,
+        {
+            isDisabled: Boolean(props.disabled),
+        },
+    )
 
     return (
         <RNPressable
@@ -16,6 +20,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
                     return [
                         UniwindStore.getStyles(
                             props.className,
+                            props,
                             { isDisabled: Boolean(props.disabled), isPressed: true },
                         ).styles,
                         typeof props.style === 'function' ? props.style(state) : props.style,
diff --git a/packages/uniwind/src/components/native/RefreshControl.tsx b/packages/uniwind/src/components/native/RefreshControl.tsx
index cac07b3d..205403f5 100644
--- a/packages/uniwind/src/components/native/RefreshControl.tsx
+++ b/packages/uniwind/src/components/native/RefreshControl.tsx
@@ -1,14 +1,13 @@
 import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
-    const style = useStyle(props.className)
-    const color = useUniwindAccent(props.colorsClassName)
-    const tintColor = useUniwindAccent(props.tintColorClassName)
-    const titleColor = useUniwindAccent(props.titleColorClassName)
-    const progressBackgroundColor = useUniwindAccent(props.progressBackgroundColorClassName)
+    const style = useStyle(props.className, props)
+    const color = useStyle(props.colorsClassName, props).accentColor
+    const tintColor = useStyle(props.tintColorClassName, props).accentColor
+    const titleColor = useStyle(props.titleColorClassName, props).accentColor
+    const progressBackgroundColor = useStyle(props.progressBackgroundColorClassName, props).accentColor
 
     return (
         <RNRefreshControl
diff --git a/packages/uniwind/src/components/native/SafeAreaView.tsx b/packages/uniwind/src/components/native/SafeAreaView.tsx
index f0a97445..99b4e15f 100644
--- a/packages/uniwind/src/components/native/SafeAreaView.tsx
+++ b/packages/uniwind/src/components/native/SafeAreaView.tsx
@@ -3,7 +3,7 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const SafeAreaView = copyComponentProperties(RNSafeAreaView, (props: ViewProps) => {
-    const style = useStyle(props.className)
+    const style = useStyle(props.className, props)
 
     return (
         <RNSafeAreaView
diff --git a/packages/uniwind/src/components/native/ScrollView.tsx b/packages/uniwind/src/components/native/ScrollView.tsx
index aedb57d7..2c1015c0 100644
--- a/packages/uniwind/src/components/native/ScrollView.tsx
+++ b/packages/uniwind/src/components/native/ScrollView.tsx
@@ -1,12 +1,11 @@
 import { ScrollView as RNScrollView, ScrollViewProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const ScrollView = copyComponentProperties(RNScrollView, (props: ScrollViewProps) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, props)
+    const contentContainerStyle = useStyle(props.contentContainerClassName, props)
+    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
 
     return (
         <RNScrollView
diff --git a/packages/uniwind/src/components/native/SectionList.tsx b/packages/uniwind/src/components/native/SectionList.tsx
index 55a71bcf..b0bf90cf 100644
--- a/packages/uniwind/src/components/native/SectionList.tsx
+++ b/packages/uniwind/src/components/native/SectionList.tsx
@@ -1,14 +1,13 @@
 import { SectionList as RNSectionList, SectionListProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const SectionList = copyComponentProperties(RNSectionList, (props: SectionListProps<unknown, unknown>) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
-    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName)
-    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, props)
+    const contentContainerStyle = useStyle(props.contentContainerClassName, props)
+    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props)
+    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props)
+    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
 
     return (
         <RNSectionList
diff --git a/packages/uniwind/src/components/native/Switch.tsx b/packages/uniwind/src/components/native/Switch.tsx
index cd4c7e2c..add9ba83 100644
--- a/packages/uniwind/src/components/native/Switch.tsx
+++ b/packages/uniwind/src/components/native/Switch.tsx
@@ -1,6 +1,5 @@
 import { Switch as RNSwitch, SwitchProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -8,11 +7,11 @@ export const Switch = copyComponentProperties(RNSwitch, (props: SwitchProps) =>
     const state = {
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const trackColorOn = useUniwindAccent(props.trackColorOnClassName, state)
-    const trackColorOff = useUniwindAccent(props.trackColorOffClassName, state)
-    const thumbColor = useUniwindAccent(props.thumbColorClassName, state)
-    const ios_backgroundColor = useUniwindAccent(props.ios_backgroundColorClassName, state)
+    const style = useStyle(props.className, props, state)
+    const trackColorOn = useStyle(props.trackColorOnClassName, props, state).accentColor
+    const trackColorOff = useStyle(props.trackColorOffClassName, props, state).accentColor
+    const thumbColor = useStyle(props.thumbColorClassName, props, state).accentColor
+    const ios_backgroundColor = useStyle(props.ios_backgroundColorClassName, props, state).accentColor
 
     return (
         <RNSwitch
diff --git a/packages/uniwind/src/components/native/Text.tsx b/packages/uniwind/src/components/native/Text.tsx
index 0db45b0f..083e0820 100644
--- a/packages/uniwind/src/components/native/Text.tsx
+++ b/packages/uniwind/src/components/native/Text.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { Text as RNText, TextProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -15,8 +14,8 @@ export const Text = copyComponentProperties(RNText, (props: TextProps) => {
         isPressed,
         isDisabled: Boolean(props.disabled),
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
+    const style = useStyle(props.className, props, state)
+    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
 
     return (
         <RNText
diff --git a/packages/uniwind/src/components/native/TextInput.tsx b/packages/uniwind/src/components/native/TextInput.tsx
index fb9ed7bb..a8a7b632 100644
--- a/packages/uniwind/src/components/native/TextInput.tsx
+++ b/packages/uniwind/src/components/native/TextInput.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { TextInput as RNTextInput, TextInputProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -13,12 +12,12 @@ export const TextInput = copyComponentProperties(RNTextInput, (props: TextInputP
         isFocused,
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const cursorColor = useUniwindAccent(props.cursorColorClassName, state)
-    const selectionColor = useUniwindAccent(props.selectionColorClassName, state)
-    const placeholderTextColor = useUniwindAccent(props.placeholderTextColorClassName, state)
-    const selectionHandleColor = useUniwindAccent(props.selectionHandleColorClassName, state)
-    const underlineColorAndroid = useUniwindAccent(props.underlineColorAndroidClassName, state)
+    const style = useStyle(props.className, props, state)
+    const cursorColor = useStyle(props.cursorColorClassName, props, state).accentColor
+    const selectionColor = useStyle(props.selectionColorClassName, props, state).accentColor
+    const placeholderTextColor = useStyle(props.placeholderTextColorClassName, props, state).accentColor
+    const selectionHandleColor = useStyle(props.selectionHandleColorClassName, props, state).accentColor
+    const underlineColorAndroid = useStyle(props.underlineColorAndroidClassName, props, state).accentColor
 
     return (
         <RNTextInput
diff --git a/packages/uniwind/src/components/native/TouchableHighlight.tsx b/packages/uniwind/src/components/native/TouchableHighlight.tsx
index 504a7afc..d8788a2c 100644
--- a/packages/uniwind/src/components/native/TouchableHighlight.tsx
+++ b/packages/uniwind/src/components/native/TouchableHighlight.tsx
@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { TouchableHighlight as RNTouchableHighlight, TouchableHighlightProps } from 'react-native'
 import { ComponentState } from '../../core/types'
-import { useUniwindAccent } from '../../hooks/useUniwindAccent.native'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
@@ -11,8 +10,8 @@ export const TouchableHighlight = copyComponentProperties(RNTouchableHighlight,
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
-    const underlayColor = useUniwindAccent(props.underlayColorClassName, state)
+    const style = useStyle(props.className, props, state)
+    const underlayColor = useStyle(props.underlayColorClassName, props, state).accentColor
 
     return (
         <RNTouchableHighlight
diff --git a/packages/uniwind/src/components/native/TouchableNativeFeedback.tsx b/packages/uniwind/src/components/native/TouchableNativeFeedback.tsx
index b556d7b2..ca35768e 100644
--- a/packages/uniwind/src/components/native/TouchableNativeFeedback.tsx
+++ b/packages/uniwind/src/components/native/TouchableNativeFeedback.tsx
@@ -10,7 +10,7 @@ export const TouchableNativeFeedback = copyComponentProperties(RNTouchableNative
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
+    const style = useStyle(props.className, props, state)
 
     return (
         <RNTouchableNativeFeedback
diff --git a/packages/uniwind/src/components/native/TouchableOpacity.tsx b/packages/uniwind/src/components/native/TouchableOpacity.tsx
index 8d98f12b..3e4e0727 100644
--- a/packages/uniwind/src/components/native/TouchableOpacity.tsx
+++ b/packages/uniwind/src/components/native/TouchableOpacity.tsx
@@ -10,7 +10,7 @@ export const TouchableOpacity = copyComponentProperties(RNTouchableOpacity, (pro
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
+    const style = useStyle(props.className, props, state)
 
     return (
         <RNTouchableOpacity
diff --git a/packages/uniwind/src/components/native/TouchableWithoutFeedback.tsx b/packages/uniwind/src/components/native/TouchableWithoutFeedback.tsx
index 33793648..6b465856 100644
--- a/packages/uniwind/src/components/native/TouchableWithoutFeedback.tsx
+++ b/packages/uniwind/src/components/native/TouchableWithoutFeedback.tsx
@@ -10,7 +10,7 @@ export const TouchableWithoutFeedback = copyComponentProperties(RNTouchableWitho
         isDisabled: Boolean(props.disabled),
         isPressed,
     } satisfies ComponentState
-    const style = useStyle(props.className, state)
+    const style = useStyle(props.className, props, state)
 
     return (
         <RNTouchableWithoutFeedback
diff --git a/packages/uniwind/src/components/native/View.tsx b/packages/uniwind/src/components/native/View.tsx
index c6c046a9..622a2f2f 100644
--- a/packages/uniwind/src/components/native/View.tsx
+++ b/packages/uniwind/src/components/native/View.tsx
@@ -3,7 +3,7 @@ import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const View = copyComponentProperties(RNView, (props: ViewProps) => {
-    const style = useStyle(props.className)
+    const style = useStyle(props.className, props)
 
     return (
         <RNView
diff --git a/packages/uniwind/src/components/native/VirtualizedList.tsx b/packages/uniwind/src/components/native/VirtualizedList.tsx
index 856fa989..5d56a98f 100644
--- a/packages/uniwind/src/components/native/VirtualizedList.tsx
+++ b/packages/uniwind/src/components/native/VirtualizedList.tsx
@@ -1,14 +1,13 @@
 import { VirtualizedList as RNVirtualizedList, VirtualizedListProps } from 'react-native'
-import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
 import { useStyle } from './useStyle'
 
 export const VirtualizedList = copyComponentProperties(RNVirtualizedList, (props: VirtualizedListProps<unknown>) => {
-    const style = useStyle(props.className)
-    const contentContainerStyle = useStyle(props.contentContainerClassName)
-    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName)
-    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName)
-    const endFillColor = useUniwindAccent(props.endFillColorClassName)
+    const style = useStyle(props.className, props)
+    const contentContainerStyle = useStyle(props.contentContainerClassName, props)
+    const listFooterComponentStyle = useStyle(props.ListFooterComponentClassName, props)
+    const listHeaderComponentStyle = useStyle(props.ListHeaderComponentClassName, props)
+    const endFillColor = useStyle(props.endFillColorClassName, props).accentColor
 
     return (
         <RNVirtualizedList
diff --git a/packages/uniwind/src/components/native/useStyle.ts b/packages/uniwind/src/components/native/useStyle.ts
index 8ca724f3..11677d43 100644
--- a/packages/uniwind/src/components/native/useStyle.ts
+++ b/packages/uniwind/src/components/native/useStyle.ts
@@ -1,25 +1,12 @@
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
-import { useEffect, useMemo, useReducer } from 'react'
+import { useEffect, useReducer } from 'react'
 import { UniwindListener } from '../../core/listener'
 import { UniwindStore } from '../../core/native'
-import { ComponentState, RNStyle } from '../../core/types'
-import { StyleDependency } from '../../types'
+import { ComponentState } from '../../core/types'
 
-const emptyState = { styles: {} as RNStyle, dependencies: [] as Array<StyleDependency> }
-
-export const useStyle = (className?: string, state?: ComponentState) => {
+export const useStyle = (className: string | undefined, componentProps: Record<string, any>, state?: ComponentState) => {
+    'use no memo'
     const [_, rerender] = useReducer(() => ({}), {})
-    const styleState = useMemo(
-        () =>
-            className
-                ? UniwindStore.getStyles(className, {
-                    isDisabled: state?.isDisabled,
-                    isFocused: state?.isFocused,
-                    isPressed: state?.isPressed,
-                })
-                : emptyState,
-        [className, _, state?.isDisabled, state?.isFocused, state?.isPressed],
-    )
+    const styleState = UniwindStore.getStyles(className, componentProps, state)
 
     useEffect(() => {
         if (__DEV__ || styleState.dependencies.length > 0) {
@@ -27,7 +14,7 @@ export const useStyle = (className?: string, state?: ComponentState) => {
 
             return dispose
         }
-    }, [styleState])
+    }, [styleState.dependencySum])
 
     return styleState.styles
 }
diff --git a/packages/uniwind/src/core/native/store.ts b/packages/uniwind/src/core/native/store.ts
index a6d72887..62c6e337 100644
--- a/packages/uniwind/src/core/native/store.ts
+++ b/packages/uniwind/src/core/native/store.ts
@@ -10,8 +10,11 @@ import { UniwindRuntime } from './runtime'
 type StylesResult = {
     styles: RNStyle
     dependencies: Array<StyleDependency>
+    dependencySum: number
 }
 
+const emptyState: StylesResult = { styles: {}, dependencies: [], dependencySum: 0 }
+
 class UniwindStoreBuilder {
     runtime = UniwindRuntime
     vars = {} as Record<string, unknown>
@@ -20,12 +23,9 @@ class UniwindStoreBuilder {
     private cache = new Map<string, StylesResult>()
     private generateStyleSheetCallbackResult: ReturnType<GenerateStyleSheetsCallback> | null = null
 
-    getStyles(className?: string, state?: ComponentState): StylesResult {
+    getStyles(className: string | undefined, componentProps?: Record<string, any>, state?: ComponentState): StylesResult {
         if (className === undefined || className === '') {
-            return {
-                styles: {},
-                dependencies: [],
-            }
+            return emptyState
         }
 
         const cacheKey = `${className}${state?.isDisabled ?? false}${state?.isFocused ?? false}${state?.isPressed ?? false}`
@@ -34,14 +34,17 @@ class UniwindStoreBuilder {
             return this.cache.get(cacheKey)!
         }
 
-        const result = this.resolveStyles(className, state)
+        const result = this.resolveStyles(className, componentProps, state)
 
-        this.cache.set(cacheKey, result)
-        UniwindListener.subscribe(
-            () => this.cache.delete(cacheKey),
-            result.dependencies,
-            { once: true },
-        )
+        // Don't cache styles that depend on data attributes
+        if (!result.hasDataAttributes) {
+            this.cache.set(cacheKey, result)
+            UniwindListener.subscribe(
+                () => this.cache.delete(cacheKey),
+                result.dependencies,
+                { once: true },
+            )
+        }
 
         return result
     }
@@ -80,10 +83,12 @@ class UniwindStoreBuilder {
         }
     }
 
-    private resolveStyles(classNames: string, state?: ComponentState) {
+    private resolveStyles(classNames: string, componentProps?: Record<string, any>, state?: ComponentState) {
         const result = {} as Record<string, any>
         let vars = this.vars
+        let hasDataAttributes = false
         const dependencies = new Set<StyleDependency>()
+        let dependencySum = 0
         const bestBreakpoints = new Map<string, Style>()
 
         for (const className of classNames.split(' ')) {
@@ -93,7 +98,14 @@ class UniwindStoreBuilder {
 
             for (const style of this.stylesheet[className] as Array<Style>) {
                 if (style.dependencies) {
-                    style.dependencies.forEach(dep => dependencies.add(dep))
+                    style.dependencies.forEach(dep => {
+                        dependencies.add(dep)
+                        dependencySum |= 1 << dep
+                    })
+                }
+
+                if (style.dataAttributes !== null) {
+                    hasDataAttributes = true
                 }
 
                 if (
@@ -105,6 +117,7 @@ class UniwindStoreBuilder {
                     || (style.active !== null && state?.isPressed !== style.active)
                     || (style.focus !== null && state?.isFocused !== style.focus)
                     || (style.disabled !== null && state?.isDisabled !== style.disabled)
+                    || (style.dataAttributes !== null && !this.validateDataAttributes(style.dataAttributes, componentProps))
                 ) {
                     continue
                 }
@@ -216,8 +229,38 @@ class UniwindStoreBuilder {
         return {
             styles: { ...result } as RNStyle,
             dependencies: Array.from(dependencies),
+            dependencySum,
+            hasDataAttributes,
         }
     }
+
+    private validateDataAttributes(dataAttributes: Record<string, string>, props: Record<string, any> = {}) {
+        for (const [attribute, expectedAttributeValue] of Object.entries(dataAttributes)) {
+            const attributeValue = props[attribute]
+
+            if (expectedAttributeValue === 'true') {
+                if (attributeValue !== true && attributeValue !== 'true') {
+                    return false
+                }
+
+                continue
+            }
+
+            if (expectedAttributeValue === 'false') {
+                if (attributeValue !== false && attributeValue !== 'false') {
+                    return false
+                }
+
+                continue
+            }
+
+            if (attributeValue !== expectedAttributeValue) {
+                return false
+            }
+        }
+
+        return true
+    }
 }
 
 export const UniwindStore = new UniwindStoreBuilder()
diff --git a/packages/uniwind/src/core/types.ts b/packages/uniwind/src/core/types.ts
index b04c78e2..9c4ddf9b 100644
--- a/packages/uniwind/src/core/types.ts
+++ b/packages/uniwind/src/core/types.ts
@@ -17,6 +17,7 @@ export type Style = {
     active: boolean | null
     focus: boolean | null
     disabled: boolean | null
+    dataAttributes: Record<string, string> | null
 }
 
 export type StyleSheets = Record<string, Array<Style>>
diff --git a/packages/uniwind/src/hooks/useResolveClassNames.native.ts b/packages/uniwind/src/hooks/useResolveClassNames.native.ts
index 5f9b1418..32779883 100644
--- a/packages/uniwind/src/hooks/useResolveClassNames.native.ts
+++ b/packages/uniwind/src/hooks/useResolveClassNames.native.ts
@@ -1,21 +1,18 @@
 import { useEffect, useReducer } from 'react'
 import { UniwindListener } from '../core/listener'
 import { UniwindStore } from '../core/native'
-import { ComponentState, RNStyle } from '../core/types'
 
-const emptyState = { styles: {} as RNStyle, dependencies: [] }
-
-export const useResolveClassNames = (className: string, state?: ComponentState) => {
+export const useResolveClassNames = (className: string) => {
     const [uniwindState, recreate] = useReducer(
-        () => className !== '' ? UniwindStore.getStyles(className, state) : emptyState,
-        className !== '' ? UniwindStore.getStyles(className, state) : emptyState,
+        () => UniwindStore.getStyles(className),
+        UniwindStore.getStyles(className),
     )
 
     useEffect(() => {
         if (className !== '') {
             recreate()
         }
-    }, [className, state?.isDisabled, state?.isPressed, state?.isFocused])
+    }, [className])
 
     useEffect(() => {
         if (uniwindState.dependencies.length > 0) {
diff --git a/packages/uniwind/src/hooks/useUniwindAccent.native.ts b/packages/uniwind/src/hooks/useUniwindAccent.native.ts
deleted file mode 100644
index 7302a57b..00000000
--- a/packages/uniwind/src/hooks/useUniwindAccent.native.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { ComponentState } from '../core/types'
-import { useResolveClassNames } from './useResolveClassNames.native'
-
-export const useUniwindAccent = (className: string | undefined, state?: ComponentState) => {
-    const styles = useResolveClassNames(className ?? '', state)
-
-    return styles.accentColor
-}
diff --git a/packages/uniwind/src/metro/addMetaToStylesTemplate.ts b/packages/uniwind/src/metro/addMetaToStylesTemplate.ts
index 9c167cc3..ecb94c15 100644
--- a/packages/uniwind/src/metro/addMetaToStylesTemplate.ts
+++ b/packages/uniwind/src/metro/addMetaToStylesTemplate.ts
@@ -45,6 +45,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     active,
                     focus,
                     disabled,
+                    dataAttributes,
                     ...rest
                 } = style
 
@@ -121,6 +122,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     importantProperties: importantProperties
                         ?.map(property => property.startsWith('--') ? property : toCamelCase)
                         .map(makeSafeForSerialization) ?? [],
+                    dataAttributes,
                     complexity: [
                         minWidth !== 0,
                         theme !== null,
@@ -130,6 +132,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                         active !== null,
                         focus !== null,
                         disabled !== null,
+                        dataAttributes !== null,
                     ].filter(Boolean).length,
                 }
             })
diff --git a/packages/uniwind/src/metro/processor/mq.ts b/packages/uniwind/src/metro/processor/mq.ts
index 5405b8f6..f3a77628 100644
--- a/packages/uniwind/src/metro/processor/mq.ts
+++ b/packages/uniwind/src/metro/processor/mq.ts
@@ -77,6 +77,7 @@ export class MQ {
             active: null,
             focus: null,
             disabled: null,
+            dataAttributes: null,
         }
     }
 }
diff --git a/packages/uniwind/src/metro/processor/processor.ts b/packages/uniwind/src/metro/processor/processor.ts
index 15387247..0b837318 100644
--- a/packages/uniwind/src/metro/processor/processor.ts
+++ b/packages/uniwind/src/metro/processor/processor.ts
@@ -51,6 +51,7 @@ export class ProcessorBuilder {
             active: null as boolean | null,
             focus: null as boolean | null,
             disabled: null as boolean | null,
+            dataAttributes: null as Record<string, string> | null,
         })
     }
 
@@ -87,6 +88,7 @@ export class ProcessorBuilder {
             style.active = this.declarationConfig.active
             style.focus = this.declarationConfig.focus
             style.disabled = this.declarationConfig.disabled
+            style.dataAttributes = this.declarationConfig.dataAttributes
             this.meta.className = this.declarationConfig.className
         }
 
@@ -148,6 +150,7 @@ export class ProcessorBuilder {
                 let active = null as boolean | null
                 let focus = null as boolean | null
                 let disabled = null as boolean | null
+                let dataAttributes = null as Record<string, string> | null
 
                 selector.forEach(selector => {
                     if (selector.type === 'pseudo-class' && selector.kind === 'where') {
@@ -175,14 +178,20 @@ export class ProcessorBuilder {
                     if (selector.type === 'pseudo-class' && selector.kind === 'disabled') {
                         disabled = true
                     }
+
+                    if (selector.type === 'attribute' && selector.operation?.operator === 'equal') {
+                        dataAttributes ??= {}
+                        dataAttributes[selector.name] = `"${selector.operation.value}"`
+                    }
                 })
 
-                if ([rtl, theme, active, focus, disabled].some(Boolean)) {
+                if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
                     this.declarationConfig.rtl = rtl
                     this.declarationConfig.theme = theme
                     this.declarationConfig.active = active
                     this.declarationConfig.focus = focus
                     this.declarationConfig.disabled = disabled
+                    this.declarationConfig.dataAttributes = dataAttributes
 
                     rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
                     rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))
@@ -193,6 +202,7 @@ export class ProcessorBuilder {
                     this.declarationConfig.active = null
                     this.declarationConfig.focus = null
                     this.declarationConfig.disabled = null
+                    this.declarationConfig.dataAttributes = null
 
                     return
                 }
diff --git a/packages/uniwind/src/metro/types.ts b/packages/uniwind/src/metro/types.ts
index 4f5a12a8..67a80e39 100644
--- a/packages/uniwind/src/metro/types.ts
+++ b/packages/uniwind/src/metro/types.ts
@@ -39,6 +39,7 @@ export type MediaQueryResolver = {
     disabled: boolean | null
     active: boolean | null
     focus: boolean | null
+    dataAttributes: Record<string, string> | null
 }
 
 export const enum Platform {
diff --git a/packages/uniwind/tests/styles-parsing/data-attributes.test.tsx b/packages/uniwind/tests/styles-parsing/data-attributes.test.tsx
new file mode 100644
index 00000000..c5941ef8
--- /dev/null
+++ b/packages/uniwind/tests/styles-parsing/data-attributes.test.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import View from '../../src/components/native/View'
+import { TW_BLUE_500, TW_RED_500 } from '../consts'
+import { renderUniwind } from '../utils'
+
+describe('Data attributes', () => {
+    test('should apply data attribute selectors', () => {
+        const { getStylesFromId } = renderUniwind(
+            <React.Fragment>
+                <View className="bg-blue-500 data-[x=true]:bg-red-500" data-x={true} testID="data-x-true" />
+                <View className="bg-blue-500 data-[x=true]:bg-red-500" data-x="true" testID="data-x-true-string" />
+                <View className="bg-blue-500 data-[x=true]:bg-red-500" data-x="false" testID="data-x-false-string" />
+                <View className="bg-blue-500 data-[x=test]:bg-red-500" data-x="test" testID="data-x-test" />
+            </React.Fragment>,
+        )
+
+        expect(getStylesFromId('data-x-true').backgroundColor).toBe(TW_RED_500)
+        expect(getStylesFromId('data-x-true-string').backgroundColor).toBe(TW_RED_500)
+        expect(getStylesFromId('data-x-false-string').backgroundColor).toBe(TW_BLUE_500)
+        expect(getStylesFromId('data-x-test').backgroundColor).toBe(TW_RED_500)
+    })
+})