search

TVke / react-native-tailwindcss

A react-native style system based on TailwindCSS
https://tvke.github.io/react-native-tailwindcss/
MIT License
565 stars 34 forks source link

[Feature Request] Make values easily accessible #2

Closed TVke closed 5 years ago

TVke commented 5 years ago

Reminder to myself and up for discusion.

Just like colors, accessing the values directly.

This is useful when using components that use specific styling methods. It could be useful like this: 

<Component containerStyle={{
    ...shadow.md,
    ...font.custom,
    ...spacing.p4,
}} />

resulting in:

<Component containerStyle={{
     shadowColor: 'rgba(0, 0, 0, 0.1)',
     shadowOffset: {width: 0, height: 4},
     shadowOpacity: 1,
     shadowRadius: 6,
     elevation: 3,
    fontFamily: 'Custom-Font',
    padding: 16,
}} />
TVke commented 5 years ago

It's going to be shadow.shadowMd because otherwise the shadow['2xl'] problem would occur.

TVke commented 5 years ago

I made a general theme accessor so this is possible:

<Component containerStyle={{
    ...theme.shadowMd,
    ...theme.fontCustom,
    ...theme.p4,
}} />