Init

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.yml]
+indent_style = space
+indent_size = 2

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/workflows/test.yml

@@ -0,0 +1,27 @@
+name: Test
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm run build
+      - run: npm test
+        env:
+          CI: true

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+yarn.lock
+styles.json

.npmrc

@@ -0,0 +1 @@
+package-lock=false

build.js

@@ -0,0 +1,129 @@
+'use strict';
+const path = require('path');
+const fs = require('fs');
+const css = require('css');
+const cssToReactNative = require('css-to-react-native').default;
+const pkgJson = require('tailwindcss/package.json');
+
+const pkgPath = require.resolve('tailwindcss').replace(pkgJson.main, '');
+const source = fs.readFileSync(path.join(pkgPath, pkgJson.style), 'utf8');
+const {stylesheet} = css.parse(source);
+
+const remToPx = value => `${parseFloat(value) * 16}px`;
+
+const getStyles = rule => {
+	const styles = rule.declarations
+		.filter(({property}) => {
+			// Skip line-height utilities without units
+			if (property === 'line-height') {
+				return false;
+			}
+
+			return true;
+		})
+		.map(({property, value}) => {
+			if (value.endsWith('rem')) {
+				return [property, remToPx(value)];
+			}
+
+			return [property, value];
+		});
+
+	return cssToReactNative(styles);
+};
+
+const supportedUtilities = [
+	// Flexbox
+	/^flex/,
+	/^items-/,
+	/^content-/,
+	/^justify-/,
+	/^self-/,
+	// Display
+	'hidden',
+	'overflow-hidden',
+	'overflow-visible',
+	'overflow-scroll',
+	// Position
+	'absolute',
+	'relative',
+	// Top, right, bottom, left
+	/^(inset-0|inset-x-0|inset-y-0)/,
+	/^(top|bottom|left|right)-0$/,
+	// Z Index
+	/^z-\d+$/,
+	// Padding
+	/^(p.?-\d+|p.?-px)/,
+	// Margin
+	/^-?(m.?-\d+|m.?-px)/,
+	// Width
+	/^w-(\d|\/)+|^w-px|^w-full/,
+	// Height
+	/^(h-\d+|h-px|h-full)/,
+	// Min/Max width/height
+	/^(min-w-|max-w-|min-h-0|min-h-full|max-h-full)/,
+	// Font size
+	/^text-/,
+	// Font style
+	/^(not-)?italic$/,
+	// Font weight
+	/^font-(hairline|thin|light|normal|medium|semibold|bold|extrabold|black)/,
+	// Letter spacing
+	/^tracking-/,
+	// Line height
+	/^leading-/,
+	// Text align, color
+	/^text-/,
+	// Text transform
+	'uppercase',
+	'lowercase',
+	'capitalize',
+	'normal-case',
+	// Background attachment, color, position, repeat, size
+	/^bg-/,
+	// Border color, style, width, radius
+	/^(border|rounded)/,
+	// Opacity
+	/^opacity-/,
+	// Pointer events
+	/^pointer-events-/
+];
+
+const isUtilitySupported = utility => {
+	for (const supportedUtility of supportedUtilities) {
+		if (typeof supportedUtility === 'string' && supportedUtility === utility) {
+			return true;
+		}
+
+		if (supportedUtility instanceof RegExp && supportedUtility.test(utility)) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
+// Mapping of Tailwind class names to React Native styles
+const styles = {};
+
+for (const rule of stylesheet.rules) {
+	if (rule.type === 'rule') {
+		for (const selector of rule.selectors) {
+			const utility = selector.replace(/^\./, '').replace('\\/', '/');
+
+			if (isUtilitySupported(utility)) {
+				styles[utility] = getStyles(rule);
+			}
+		}
+	}
+}
+
+// Additional styles that we're not able to parse correctly automatically
+styles.underline = {textDecorationLine: 'underline'};
+styles['line-through'] = {textDecorationLine: 'line-through'};
+styles['no-underline'] = {textDecorationLine: 'none'};
+
+fs.writeFileSync(
+	path.join(__dirname, 'styles.json'),
+	JSON.stringify(styles, null, '\t')
+);

index.js

@@ -0,0 +1,29 @@
+'use strict';
+const styles = require('./styles.json');
+
+// Pass a list of class names separated by a space, for example:
+// "bg-green-100 text-green-800 font-semibold")
+// and receive a styles object for use in React Native views
+const tailwind = classNames => {
+	const obj = {};
+
+	for (const className of classNames.split(' ')) {
+		if (styles[className]) {
+			Object.assign(obj, styles[className]);
+		} else {
+			console.warn(`Unsupported Tailwind class: "${className}"`);
+		}
+	}
+
+	return obj;
+};
+
+// Pass the name of a color (e.g. "blue-500") and receive a color value (e.g. "#4399e1")
+const getColor = name => {
+	const obj = tailwind(`bg-${name}`);
+	return obj.backgroundColor;
+};
+
+module.exports = tailwind;
+module.exports.default = tailwind;
+module.exports.getColor = getColor;

license

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Vadim Demedes <vdemedes@gmail.com> (https://vadimdemedes.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package.json

@@ -0,0 +1,46 @@
+{
+	"name": "tailwind-rn",
+	"version": "0.0.0",
+	"description": "Use Tailwind CSS in React Native projects",
+	"license": "MIT",
+	"repository": "vadimdemedes/tailwind-rn",
+	"author": {
+		"name": "Vadim Demedes",
+		"email": "vdemedes@gmail.com",
+		"url": "https://vadimdemedes.com"
+	},
+	"engines": {
+		"node": ">=10"
+	},
+	"scripts": {
+		"build": "node build",
+		"prepare": "npm run build",
+		"test": "xo && ava"
+	},
+	"files": [
+		"index.js",
+		"styles.json"
+	],
+	"keywords": [
+		"tailwind",
+		"tailwindcss",
+		"react-native"
+	],
+	"devDependencies": {
+		"@ava/babel": "^1.0.1",
+		"ava": "^3.5.0",
+		"css": "^2.2.4",
+		"css-to-react-native": "^3.0.0",
+		"prettier": "^1.19.1",
+		"tailwindcss": "^1.2.0",
+		"xo": "^0.27.2"
+	},
+	"ava": {
+		"babel": true
+	},
+	"prettier": {
+		"useTabs": true,
+		"singleQuote": true,
+		"bracketSpacing": false
+	}
+}

readme.md

@@ -0,0 +1,53 @@
+# tailwind-rn
+
+> Use [Tailwind CSS](https://tailwindcss.com) in [React Native](https://reactnative.dev) projects
+
+## Install
+
+```
+$ npm install tailwind-rn
+```
+
+## Usage
+
+Import `tailwind-rn` module and use any of the supported utilities from [Tailwind CSS](https://tailwindcss.com) in your [React Native](https://reactnative.dev) views.
+
+```js
+import {SafeAreaView, View} from 'react-native';
+import tailwind from 'tailwind-rn';
+
+const App = () => (
+	<SafeAreaView style={tailwind('h-full')}>
+		<View style={tailwind('pt-12 items-center')}>
+			<View style={tailwind('bg-blue-200 px-3 py-1 rounded-full')}>
+				<Text style={tailwind('text-blue-800 font-semibold')}>
+					Hello Tailwind
+				</Text>
+			</View>
+		</View>
+	</SafeAreaView>
+);
+```
+
+<img src="screenshot.jpg" width="544">
+
+## API
+
+### tailwind(classNames)
+
+#### classNames
+
+Type: `string[]`
+
+Array of Tailwind CSS classes you want to generate styles for.
+
+### getColor(color)
+
+Get color value from Tailwind CSS color name.
+
+```js
+import {getColor} fro 'tailwind-rn';
+
+getColor('blue-500')
+//=> '#ebf8ff'
+```

test.js

@@ -0,0 +1,21 @@
+import test from 'ava';
+import tailwind, {getColor} from '.';
+
+test('get styles for one class', t => {
+	t.deepEqual(tailwind('text-blue-500'), {color: '#4299e1'});
+});
+
+test('get styles for multiple classes', t => {
+	t.deepEqual(tailwind('text-blue-500 bg-blue-100'), {
+		color: '#4299e1',
+		backgroundColor: '#ebf8ff'
+	});
+});
+
+test('ignore unknown classes', t => {
+	t.deepEqual(tailwind('text-blue-500 unknown'), {color: '#4299e1'});
+});
+
+test('get color value', t => {
+	t.is(getColor('blue-500'), '#4299e1');
+});