Normalizing it as base tailwindcss

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /coverage
 package-lock.json
+.idea

README.md

@@ -6,9 +6,17 @@ The utility classes are transformed to valid object names and are all children o
 ```jsx harmony
 import { t } from 'react-native-tailwindcss';
 
-<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500]} />
+<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500, t._mx2, t.w1_2]} />
 ```
 
+or if you want to use `tailwind's` class name instead.
+```jsx harmony
+import { c } from 'react-native-tailwindcss';
+
+<View style={c('absolute inset-0 p-4 bg-blue-500 -mx-2 w-1/2')} />
+```
+(Both above examples are same).  
+
 Use the `tailwind.config.js` file you know and love, to customize your styles or just use default tailwind styles.
 
 In react native, sometimes you only need a color value. We've got you covered.
@@ -69,6 +77,50 @@ const SView = styled(View)`
 </SView>
 ```
 
+## :monocle_face: Hmmm... You need custom configs
+```javascript
+import { Tailwind } from 'react-native-tailwindcss/tailwind';
+
+const tailwind = new Tailwind(yourCustomConfig);
+const t = tailwind.style;
+
+<View style={[t.absolute, t.inset0, t.p4, t.bgBlue500, t._mx2, t.w1_2]} />
+
+// OR
+const c = tailwind.converter;
+<View style={c('absolute inset-0 p-4 bg-blue-500 -mx-2 w-1/2')} />
+```
+
+### Using in Hooks
+```javascript
+import {View} from 'react-native';
+import {useDarkMode} from 'react-native-dynamic'
+import { Tailwind } from 'react-native-tailwindcss/tailwind';
+
+const useTailwindCss = () => {
+    const isDarkMode = useDarkMode();
+
+    const tailwind = new Tailwind({
+        theme: {
+            extend: {
+                colors: {
+                    primary: isDarkMode? '#FFFFFF' : '#000000'
+                }
+            }
+        }
+    });
+
+    return tailwind.converter;
+};
+
+const MyComponent = () => {
+    const c = useTailwindCss();
+
+    return <View style={c('absolute inset-0 p-4 bg-blue-500 -mx-2 w-1/2')} />
+
+};
+```
+
 ## General Conventions
 
 Every 'class' uses the *camelCase* naming convention instead of tailwindCSS's *kebab-case*.

__tests__/adjustable.test.js

@@ -1,6 +1,5 @@
-import color from '../color';
 import generator from '../util/generator';
-import theme from './fixtures/testConfigHandler';
+import {theme} from './fixtures/testConfigHandler';
 
 test('custom colors', () => {
     const result = generator.generate('text', 'color', generator.generateColors(theme.colors));

__tests__/color.test.js

@@ -1,5 +1,5 @@
-import color from '../color';
+import {colors} from '../index';
 
 test('default colors', () => {
-    expect(color).toEqual(require('./fixtures/outputs/color/color-output'));
+    expect(colors).toEqual(require('./fixtures/outputs/color/color-output'));
 });

__tests__/configHandler.test.js

@@ -1,4 +1,4 @@
-import theme from '../util/configHandler';
+import {theme} from '../index';
 
 test('resolving default config file when no config file is present', () => {
     expect(theme.flexShrink).toEqual({

__tests__/converter.js

@@ -0,0 +1,19 @@
+import {c, t} from '../index';
+
+test('class name should match normal style', () => {
+    expect(c('bg-blue-500')).toEqual(t.bgBlue500);
+    expect(c('-mx-10')).toEqual(t._mx10);
+    expect(c('w-1/2')).toEqual(t.w1_2);
+    expect(c('shadow-md')).toEqual(t.shadowMd);
+});
+
+test('flatten classes', () => {
+    let style = {};
+    [t.bgBlue500, t.bgBlack, t._mx10, t.w1_2, t.shadowMd].map(
+            x => {
+                style = { ...style, ...x }
+            }
+        );
+
+    expect(c('bg-blue-500 bg-black -mx-10 w-1/2 shadow-md')).toEqual(style);
+});