├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .travis.yml ├── LICENSE ├── README.md ├── package.json ├── rollup.config.js ├── src ├── .eslintrc ├── index.js └── tailwind │ ├── defaultConfig-1.2.0.js │ ├── index.js │ └── lib │ ├── borderRadius.js │ ├── borderStyle.js │ ├── borderWidth.js │ ├── colors.js │ ├── flex.js │ ├── grid.js │ ├── position.js │ ├── spacing.js │ └── width.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false 5 | }], 6 | "stage-0", 7 | "react" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["standard", "standard-react"], 4 | "env": { 5 | "es6": true 6 | }, 7 | "plugins": ["react"], 8 | "parserOptions": { 9 | "sourceType": "module" 10 | }, 11 | "rules": { 12 | // don't force es6 functions to include space before paren 13 | "space-before-function-paren": 0, 14 | 15 | // allow specifying true explicitly for boolean props 16 | "react/jsx-boolean-value": 0, 17 | "quotes": ["error", "double"], 18 | "semi": 0 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # See https://help.github.com/ignore-files/ for more about ignoring files. 3 | 4 | # dependencies 5 | node_modules 6 | 7 | # builds 8 | build 9 | dist 10 | .rpt2_cache 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | .env.local 16 | .env.development.local 17 | .env.test.local 18 | .env.production.local 19 | 20 | npm-debug.log* 21 | yarn-debug.log* 22 | yarn-error.log* 23 | 24 | example -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 9 4 | - 8 5 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT Licence 2 | 3 | Copyright (c) 2016-present, Udilia Inc. 4 | 5 | Permission is hereby granted, free of charge, to any person 6 | obtaining a copy of this software and associated documentation 7 | files (the "Software"), to deal in the Software without 8 | restriction, including without limitation the rights to use, 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the 11 | Software is furnished to do so, subject to the following 12 | conditions: 13 | 14 | The above copyright notice and this permission notice shall be 15 | included in all copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 24 | OTHER DEALINGS IN THE SOFTWARE. 25 | 26 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ⚡ React Native Tailwind ⚡ 2 | 3 | The fantastic [Tailwind CSS](https://github.com/tailwindcss/tailwindcss), for React Native! 4 | 5 | [![npm version](https://badge.fury.io/js/react-native-tailwind.svg)](https://badge.fury.io/js/react-native-tailwind) 6 | 7 | ## Getting started 8 | 9 | ### 1. Install the package 10 | 11 | ```shell 12 | yarn add react-native-tailwind 13 | ``` 14 | 15 | ### 2. Import the components 16 | 17 | ```js 18 | import { View, Text } from "react-native-tailwind"; 19 | ``` 20 | 21 | ### 3. Use utility classes! 22 | 23 | ```js 24 | const RocketShip = ({ textForAliens }) => ( 25 | 26 | {textForAliens} 27 | 28 | ); 29 | ``` 30 | 31 | To see which classes are supported, see [tailwind.js](https://github.com/MythicalFish/react-native-tailwind/blob/master/src/tailwind/index.js). 32 | 33 | --- 34 | 35 | ## License 36 | 37 | [MIT](https://github.com/taylorbryant/crna-tailwind/blob/master/LICENSE.md) 38 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-tailwind", 3 | "version": "1.0.10", 4 | "description": "", 5 | "author": "Jake Broughton", 6 | "license": "MIT", 7 | "repository": { 8 | "type": "git", 9 | "url": "git+https://github.com/MythicalFish/react-native-tailwind.git" 10 | }, 11 | "main": "dist/index.js", 12 | "module": "dist/index.es.js", 13 | "jsnext:main": "dist/index.es.js", 14 | "engines": { 15 | "node": ">=8", 16 | "npm": ">=5" 17 | }, 18 | "scripts": { 19 | "test": "cross-env CI=1 react-scripts test --env=jsdom", 20 | "test:watch": "react-scripts test --env=jsdom", 21 | "build": "rollup -c", 22 | "start": "rollup -c -w", 23 | "prepare": "yarn run build", 24 | "predeploy": "cd example && yarn install && yarn run build", 25 | "deploy": "gh-pages -d example/build" 26 | }, 27 | "peerDependencies": { 28 | "prop-types": "^15.5.4", 29 | "react": "^15.0.0 || ^16.0.0", 30 | "react-dom": "^15.0.0 || ^16.0.0", 31 | "react-native": "^0.62.0" 32 | }, 33 | "devDependencies": { 34 | "@svgr/rollup": "^2.4.1", 35 | "babel-core": "^6.26.3", 36 | "babel-eslint": "^8.2.5", 37 | "babel-plugin-external-helpers": "^6.22.0", 38 | "babel-preset-env": "^1.7.0", 39 | "babel-preset-react": "^6.24.1", 40 | "babel-preset-stage-0": "^6.24.1", 41 | "cross-env": "^5.1.4", 42 | "eslint": "^6.8.0", 43 | "eslint-config-standard": "^11.0.0", 44 | "eslint-config-standard-react": "^6.0.0", 45 | "eslint-plugin-import": "^2.13.0", 46 | "eslint-plugin-node": "^7.0.1", 47 | "eslint-plugin-promise": "^4.0.0", 48 | "eslint-plugin-react": "^7.10.0", 49 | "eslint-plugin-standard": "^3.1.0", 50 | "gh-pages": "^1.2.0", 51 | "react": "^16.4.1", 52 | "react-dom": "^16.4.1", 53 | "react-scripts": "^3.4.1", 54 | "rollup": "^0.64.1", 55 | "rollup-plugin-babel": "^3.0.7", 56 | "rollup-plugin-commonjs": "^9.1.3", 57 | "rollup-plugin-node-resolve": "^3.3.0", 58 | "rollup-plugin-peer-deps-external": "^2.2.0", 59 | "rollup-plugin-url": "^1.4.0" 60 | }, 61 | "files": [ 62 | "dist" 63 | ] 64 | } 65 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import babel from "rollup-plugin-babel"; 2 | import commonjs from "rollup-plugin-commonjs"; 3 | import external from "rollup-plugin-peer-deps-external"; 4 | import resolve from "rollup-plugin-node-resolve"; 5 | import url from "rollup-plugin-url"; 6 | import svgr from "@svgr/rollup"; 7 | 8 | import pkg from "./package.json"; 9 | 10 | export default { 11 | input: "src/index.js", 12 | output: [ 13 | { 14 | file: pkg.main, 15 | format: "cjs", 16 | sourcemap: true 17 | }, 18 | { 19 | file: pkg.module, 20 | format: "es", 21 | sourcemap: true 22 | } 23 | ], 24 | plugins: [ 25 | external(), 26 | url(), 27 | svgr(), 28 | babel({ 29 | exclude: "node_modules/**", 30 | plugins: ["external-helpers"] 31 | }), 32 | resolve(), 33 | commonjs() 34 | ] 35 | }; 36 | -------------------------------------------------------------------------------- /src/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "jest": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | View as RnView, 4 | ScrollView as RnScrollView, 5 | Text as RnText, 6 | Image as RnImage, 7 | TextInput as RnTextInput, 8 | TouchableOpacity as RnTouchableOpacity, 9 | StyleSheet 10 | } from "react-native"; 11 | import tw from "./tailwind"; 12 | 13 | export const buildComponent = Component => ({ className, style, ...rest }) => { 14 | const props = { ...rest, style: [] }; 15 | 16 | if (className) { 17 | props.style = className.split(" ").map(c => tw[c]); 18 | } 19 | if (style) { 20 | // 'style' can be either an object or array. 21 | const inline = StyleSheet.flatten([ style ].flat()); 22 | 23 | props.style.push(inline); 24 | } 25 | return ; 26 | }; 27 | 28 | export const View = buildComponent(RnView); 29 | export const ScrollView = buildComponent(RnScrollView); 30 | export const Text = buildComponent(RnText); 31 | export const Image = buildComponent(RnImage); 32 | export const TextInput = buildComponent(RnTextInput); 33 | export const TouchableOpacity = buildComponent(RnTouchableOpacity); 34 | -------------------------------------------------------------------------------- /src/tailwind/defaultConfig-1.2.0.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Tailwind default config 1.2.0 3 | * https://github.com/tailwindcss/tailwindcss/blob/61e5ac5f98468decf453711bcfa9460752f1ba27/stubs/defaultConfig.stub.js 4 | */ 5 | 6 | export default { 7 | prefix: "", 8 | important: false, 9 | separator: ":", 10 | theme: { 11 | screens: { 12 | sm: "640px", 13 | md: "768px", 14 | lg: "1024px", 15 | xl: "1280px" 16 | }, 17 | colors: { 18 | transparent: "transparent", 19 | 20 | black: "#000", 21 | white: "#fff", 22 | 23 | gray: { 24 | 100: "#f7fafc", 25 | 200: "#edf2f7", 26 | 300: "#e2e8f0", 27 | 400: "#cbd5e0", 28 | 500: "#a0aec0", 29 | 600: "#718096", 30 | 700: "#4a5568", 31 | 800: "#2d3748", 32 | 900: "#1a202c" 33 | }, 34 | red: { 35 | 100: "#fff5f5", 36 | 200: "#fed7d7", 37 | 300: "#feb2b2", 38 | 400: "#fc8181", 39 | 500: "#f56565", 40 | 600: "#e53e3e", 41 | 700: "#c53030", 42 | 800: "#9b2c2c", 43 | 900: "#742a2a" 44 | }, 45 | orange: { 46 | 100: "#fffaf0", 47 | 200: "#feebc8", 48 | 300: "#fbd38d", 49 | 400: "#f6ad55", 50 | 500: "#ed8936", 51 | 600: "#dd6b20", 52 | 700: "#c05621", 53 | 800: "#9c4221", 54 | 900: "#7b341e" 55 | }, 56 | yellow: { 57 | 100: "#fffff0", 58 | 200: "#fefcbf", 59 | 300: "#faf089", 60 | 400: "#f6e05e", 61 | 500: "#ecc94b", 62 | 600: "#d69e2e", 63 | 700: "#b7791f", 64 | 800: "#975a16", 65 | 900: "#744210" 66 | }, 67 | green: { 68 | 100: "#f0fff4", 69 | 200: "#c6f6d5", 70 | 300: "#9ae6b4", 71 | 400: "#68d391", 72 | 500: "#48bb78", 73 | 600: "#38a169", 74 | 700: "#2f855a", 75 | 800: "#276749", 76 | 900: "#22543d" 77 | }, 78 | teal: { 79 | 100: "#e6fffa", 80 | 200: "#b2f5ea", 81 | 300: "#81e6d9", 82 | 400: "#4fd1c5", 83 | 500: "#38b2ac", 84 | 600: "#319795", 85 | 700: "#2c7a7b", 86 | 800: "#285e61", 87 | 900: "#234e52" 88 | }, 89 | blue: { 90 | 100: "#ebf8ff", 91 | 200: "#bee3f8", 92 | 300: "#90cdf4", 93 | 400: "#63b3ed", 94 | 500: "#4299e1", 95 | 600: "#3182ce", 96 | 700: "#2b6cb0", 97 | 800: "#2c5282", 98 | 900: "#2a4365" 99 | }, 100 | indigo: { 101 | 100: "#ebf4ff", 102 | 200: "#c3dafe", 103 | 300: "#a3bffa", 104 | 400: "#7f9cf5", 105 | 500: "#667eea", 106 | 600: "#5a67d8", 107 | 700: "#4c51bf", 108 | 800: "#434190", 109 | 900: "#3c366b" 110 | }, 111 | purple: { 112 | 100: "#faf5ff", 113 | 200: "#e9d8fd", 114 | 300: "#d6bcfa", 115 | 400: "#b794f4", 116 | 500: "#9f7aea", 117 | 600: "#805ad5", 118 | 700: "#6b46c1", 119 | 800: "#553c9a", 120 | 900: "#44337a" 121 | }, 122 | pink: { 123 | 100: "#fff5f7", 124 | 200: "#fed7e2", 125 | 300: "#fbb6ce", 126 | 400: "#f687b3", 127 | 500: "#ed64a6", 128 | 600: "#d53f8c", 129 | 700: "#b83280", 130 | 800: "#97266d", 131 | 900: "#702459" 132 | } 133 | }, 134 | spacing: { 135 | px: "1px", 136 | "0": "0", 137 | "1": "0.25rem", 138 | "2": "0.5rem", 139 | "3": "0.75rem", 140 | "4": "1rem", 141 | "5": "1.25rem", 142 | "6": "1.5rem", 143 | "8": "2rem", 144 | "10": "2.5rem", 145 | "12": "3rem", 146 | "16": "4rem", 147 | "20": "5rem", 148 | "24": "6rem", 149 | "32": "8rem", 150 | "40": "10rem", 151 | "48": "12rem", 152 | "56": "14rem", 153 | "64": "16rem" 154 | }, 155 | backgroundColor: theme => theme("colors"), 156 | backgroundPosition: { 157 | bottom: "bottom", 158 | center: "center", 159 | left: "left", 160 | "left-bottom": "left bottom", 161 | "left-top": "left top", 162 | right: "right", 163 | "right-bottom": "right bottom", 164 | "right-top": "right top", 165 | top: "top" 166 | }, 167 | backgroundSize: { 168 | auto: "auto", 169 | cover: "cover", 170 | contain: "contain" 171 | }, 172 | borderColor: theme => ({ 173 | ...theme("colors"), 174 | default: theme("colors.gray.300", "currentColor") 175 | }), 176 | borderRadius: { 177 | none: "0", 178 | sm: "0.125rem", 179 | default: "0.25rem", 180 | md: "0.375rem", 181 | lg: "0.5rem", 182 | full: "9999px" 183 | }, 184 | borderWidth: { 185 | default: "1px", 186 | "0": "0", 187 | "2": "2px", 188 | "4": "4px", 189 | "8": "8px" 190 | }, 191 | boxShadow: { 192 | xs: "0 0 0 1px rgba(0, 0, 0, 0.05)", 193 | sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)", 194 | default: 195 | "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", 196 | md: 197 | "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", 198 | lg: 199 | "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", 200 | xl: 201 | "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", 202 | "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", 203 | inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)", 204 | outline: "0 0 0 3px rgba(66, 153, 225, 0.5)", 205 | none: "none" 206 | }, 207 | container: {}, 208 | cursor: { 209 | auto: "auto", 210 | default: "default", 211 | pointer: "pointer", 212 | wait: "wait", 213 | text: "text", 214 | move: "move", 215 | "not-allowed": "not-allowed" 216 | }, 217 | fill: { 218 | current: "currentColor" 219 | }, 220 | flex: { 221 | "1": "1 1 0%", 222 | auto: "1 1 auto", 223 | initial: "0 1 auto", 224 | none: "none" 225 | }, 226 | flexGrow: { 227 | "0": "0", 228 | default: "1" 229 | }, 230 | flexShrink: { 231 | "0": "0", 232 | default: "1" 233 | }, 234 | fontFamily: { 235 | sans: [ 236 | "system-ui", 237 | "-apple-system", 238 | "BlinkMacSystemFont", 239 | "Segoe UI", 240 | "Roboto", 241 | "Helvetica Neue", 242 | "Arial", 243 | "Noto Sans", 244 | "sans-serif", 245 | "Apple Color Emoji", 246 | "Segoe UI Emoji", 247 | "Segoe UI Symbol", 248 | "Noto Color Emoji" 249 | ], 250 | serif: ["Georgia", "Cambria", "Times New Roman", "Times", "serif"], 251 | mono: [ 252 | "Menlo", 253 | "Monaco", 254 | "Consolas", 255 | "Liberation Mono", 256 | "Courier New", 257 | "monospace" 258 | ] 259 | }, 260 | fontSize: { 261 | xs: "0.75rem", 262 | sm: "0.875rem", 263 | base: "1rem", 264 | lg: "1.125rem", 265 | xl: "1.25rem", 266 | "2xl": "1.5rem", 267 | "3xl": "1.875rem", 268 | "4xl": "2.25rem", 269 | "5xl": "3rem", 270 | "6xl": "4rem" 271 | }, 272 | fontWeight: { 273 | hairline: "100", 274 | thin: "200", 275 | light: "300", 276 | normal: "400", 277 | medium: "500", 278 | semibold: "600", 279 | bold: "700", 280 | extrabold: "800", 281 | black: "900" 282 | }, 283 | height: theme => ({ 284 | auto: "auto", 285 | ...theme("spacing"), 286 | full: "100%", 287 | screen: "100vh" 288 | }), 289 | inset: { 290 | "0": "0", 291 | auto: "auto" 292 | }, 293 | letterSpacing: { 294 | tighter: "-0.05em", 295 | tight: "-0.025em", 296 | normal: "0", 297 | wide: "0.025em", 298 | wider: "0.05em", 299 | widest: "0.1em" 300 | }, 301 | lineHeight: { 302 | none: "1", 303 | tight: "1.25", 304 | snug: "1.375", 305 | normal: "1.5", 306 | relaxed: "1.625", 307 | loose: "2", 308 | "3": ".75rem", 309 | "4": "1rem", 310 | "5": "1.25rem", 311 | "6": "1.5rem", 312 | "7": "1.75rem", 313 | "8": "2rem", 314 | "9": "2.25rem", 315 | "10": "2.5rem" 316 | }, 317 | listStyleType: { 318 | none: "none", 319 | disc: "disc", 320 | decimal: "decimal" 321 | }, 322 | margin: (theme, { negative }) => ({ 323 | auto: "auto", 324 | ...theme("spacing"), 325 | ...negative(theme("spacing")) 326 | }), 327 | maxHeight: { 328 | full: "100%", 329 | screen: "100vh" 330 | }, 331 | maxWidth: (theme, { breakpoints }) => ({ 332 | none: "none", 333 | xs: "20rem", 334 | sm: "24rem", 335 | md: "28rem", 336 | lg: "32rem", 337 | xl: "36rem", 338 | "2xl": "42rem", 339 | "3xl": "48rem", 340 | "4xl": "56rem", 341 | "5xl": "64rem", 342 | "6xl": "72rem", 343 | full: "100%", 344 | ...breakpoints(theme("screens")) 345 | }), 346 | minHeight: { 347 | "0": "0", 348 | full: "100%", 349 | screen: "100vh" 350 | }, 351 | minWidth: { 352 | "0": "0", 353 | full: "100%" 354 | }, 355 | objectPosition: { 356 | bottom: "bottom", 357 | center: "center", 358 | left: "left", 359 | "left-bottom": "left bottom", 360 | "left-top": "left top", 361 | right: "right", 362 | "right-bottom": "right bottom", 363 | "right-top": "right top", 364 | top: "top" 365 | }, 366 | opacity: { 367 | "0": "0", 368 | "25": "0.25", 369 | "50": "0.5", 370 | "75": "0.75", 371 | "100": "1" 372 | }, 373 | order: { 374 | first: "-9999", 375 | last: "9999", 376 | none: "0", 377 | "1": "1", 378 | "2": "2", 379 | "3": "3", 380 | "4": "4", 381 | "5": "5", 382 | "6": "6", 383 | "7": "7", 384 | "8": "8", 385 | "9": "9", 386 | "10": "10", 387 | "11": "11", 388 | "12": "12" 389 | }, 390 | padding: theme => theme("spacing"), 391 | placeholderColor: theme => theme("colors"), 392 | stroke: { 393 | current: "currentColor" 394 | }, 395 | strokeWidth: { 396 | "0": "0", 397 | "1": "1", 398 | "2": "2" 399 | }, 400 | textColor: theme => theme("colors"), 401 | width: theme => ({ 402 | auto: "auto", 403 | ...theme("spacing"), 404 | "1/2": "50%", 405 | "1/3": "33.333333%", 406 | "2/3": "66.666667%", 407 | "1/4": "25%", 408 | "2/4": "50%", 409 | "3/4": "75%", 410 | "1/5": "20%", 411 | "2/5": "40%", 412 | "3/5": "60%", 413 | "4/5": "80%", 414 | "1/6": "16.666667%", 415 | "2/6": "33.333333%", 416 | "3/6": "50%", 417 | "4/6": "66.666667%", 418 | "5/6": "83.333333%", 419 | "1/12": "8.333333%", 420 | "2/12": "16.666667%", 421 | "3/12": "25%", 422 | "4/12": "33.333333%", 423 | "5/12": "41.666667%", 424 | "6/12": "50%", 425 | "7/12": "58.333333%", 426 | "8/12": "66.666667%", 427 | "9/12": "75%", 428 | "10/12": "83.333333%", 429 | "11/12": "91.666667%", 430 | full: "100%", 431 | screen: "100vw" 432 | }), 433 | zIndex: { 434 | auto: "auto", 435 | "0": "0", 436 | "10": "10", 437 | "20": "20", 438 | "30": "30", 439 | "40": "40", 440 | "50": "50" 441 | }, 442 | gap: theme => theme("spacing"), 443 | gridTemplateColumns: { 444 | none: "none", 445 | "1": "repeat(1, minmax(0, 1fr))", 446 | "2": "repeat(2, minmax(0, 1fr))", 447 | "3": "repeat(3, minmax(0, 1fr))", 448 | "4": "repeat(4, minmax(0, 1fr))", 449 | "5": "repeat(5, minmax(0, 1fr))", 450 | "6": "repeat(6, minmax(0, 1fr))", 451 | "7": "repeat(7, minmax(0, 1fr))", 452 | "8": "repeat(8, minmax(0, 1fr))", 453 | "9": "repeat(9, minmax(0, 1fr))", 454 | "10": "repeat(10, minmax(0, 1fr))", 455 | "11": "repeat(11, minmax(0, 1fr))", 456 | "12": "repeat(12, minmax(0, 1fr))" 457 | }, 458 | gridColumn: { 459 | auto: "auto", 460 | "span-1": "span 1 / span 1", 461 | "span-2": "span 2 / span 2", 462 | "span-3": "span 3 / span 3", 463 | "span-4": "span 4 / span 4", 464 | "span-5": "span 5 / span 5", 465 | "span-6": "span 6 / span 6", 466 | "span-7": "span 7 / span 7", 467 | "span-8": "span 8 / span 8", 468 | "span-9": "span 9 / span 9", 469 | "span-10": "span 10 / span 10", 470 | "span-11": "span 11 / span 11", 471 | "span-12": "span 12 / span 12" 472 | }, 473 | gridColumnStart: { 474 | auto: "auto", 475 | "1": "1", 476 | "2": "2", 477 | "3": "3", 478 | "4": "4", 479 | "5": "5", 480 | "6": "6", 481 | "7": "7", 482 | "8": "8", 483 | "9": "9", 484 | "10": "10", 485 | "11": "11", 486 | "12": "12", 487 | "13": "13" 488 | }, 489 | gridColumnEnd: { 490 | auto: "auto", 491 | "1": "1", 492 | "2": "2", 493 | "3": "3", 494 | "4": "4", 495 | "5": "5", 496 | "6": "6", 497 | "7": "7", 498 | "8": "8", 499 | "9": "9", 500 | "10": "10", 501 | "11": "11", 502 | "12": "12", 503 | "13": "13" 504 | }, 505 | gridTemplateRows: { 506 | none: "none", 507 | "1": "repeat(1, minmax(0, 1fr))", 508 | "2": "repeat(2, minmax(0, 1fr))", 509 | "3": "repeat(3, minmax(0, 1fr))", 510 | "4": "repeat(4, minmax(0, 1fr))", 511 | "5": "repeat(5, minmax(0, 1fr))", 512 | "6": "repeat(6, minmax(0, 1fr))" 513 | }, 514 | gridRow: { 515 | auto: "auto", 516 | "span-1": "span 1 / span 1", 517 | "span-2": "span 2 / span 2", 518 | "span-3": "span 3 / span 3", 519 | "span-4": "span 4 / span 4", 520 | "span-5": "span 5 / span 5", 521 | "span-6": "span 6 / span 6" 522 | }, 523 | gridRowStart: { 524 | auto: "auto", 525 | "1": "1", 526 | "2": "2", 527 | "3": "3", 528 | "4": "4", 529 | "5": "5", 530 | "6": "6", 531 | "7": "7" 532 | }, 533 | gridRowEnd: { 534 | auto: "auto", 535 | "1": "1", 536 | "2": "2", 537 | "3": "3", 538 | "4": "4", 539 | "5": "5", 540 | "6": "6", 541 | "7": "7" 542 | }, 543 | transformOrigin: { 544 | center: "center", 545 | top: "top", 546 | "top-right": "top right", 547 | right: "right", 548 | "bottom-right": "bottom right", 549 | bottom: "bottom", 550 | "bottom-left": "bottom left", 551 | left: "left", 552 | "top-left": "top left" 553 | }, 554 | scale: { 555 | "0": "0", 556 | "50": ".5", 557 | "75": ".75", 558 | "90": ".9", 559 | "95": ".95", 560 | "100": "1", 561 | "105": "1.05", 562 | "110": "1.1", 563 | "125": "1.25", 564 | "150": "1.5" 565 | }, 566 | rotate: { 567 | "-180": "-180deg", 568 | "-90": "-90deg", 569 | "-45": "-45deg", 570 | "0": "0", 571 | "45": "45deg", 572 | "90": "90deg", 573 | "180": "180deg" 574 | }, 575 | translate: (theme, { negative }) => ({ 576 | ...theme("spacing"), 577 | ...negative(theme("spacing")), 578 | "-full": "-100%", 579 | "-1/2": "-50%", 580 | "1/2": "50%", 581 | full: "100%" 582 | }), 583 | skew: { 584 | "-12": "-12deg", 585 | "-6": "-6deg", 586 | "-3": "-3deg", 587 | "0": "0", 588 | "3": "3deg", 589 | "6": "6deg", 590 | "12": "12deg" 591 | }, 592 | transitionProperty: { 593 | none: "none", 594 | all: "all", 595 | default: 596 | "background-color, border-color, color, fill, stroke, opacity, box-shadow, transform", 597 | colors: "background-color, border-color, color, fill, stroke", 598 | opacity: "opacity", 599 | shadow: "box-shadow", 600 | transform: "transform" 601 | }, 602 | transitionTimingFunction: { 603 | linear: "linear", 604 | in: "cubic-bezier(0.4, 0, 1, 1)", 605 | out: "cubic-bezier(0, 0, 0.2, 1)", 606 | "in-out": "cubic-bezier(0.4, 0, 0.2, 1)" 607 | }, 608 | transitionDuration: { 609 | "75": "75ms", 610 | "100": "100ms", 611 | "150": "150ms", 612 | "200": "200ms", 613 | "300": "300ms", 614 | "500": "500ms", 615 | "700": "700ms", 616 | "1000": "1000ms" 617 | } 618 | }, 619 | variants: { 620 | accessibility: ["responsive", "focus"], 621 | alignContent: ["responsive"], 622 | alignItems: ["responsive"], 623 | alignSelf: ["responsive"], 624 | appearance: ["responsive"], 625 | backgroundAttachment: ["responsive"], 626 | backgroundColor: ["responsive", "hover", "focus"], 627 | backgroundPosition: ["responsive"], 628 | backgroundRepeat: ["responsive"], 629 | backgroundSize: ["responsive"], 630 | borderCollapse: ["responsive"], 631 | borderColor: ["responsive", "hover", "focus"], 632 | borderRadius: ["responsive"], 633 | borderStyle: ["responsive"], 634 | borderWidth: ["responsive"], 635 | boxShadow: ["responsive", "hover", "focus"], 636 | boxSizing: ["responsive"], 637 | cursor: ["responsive"], 638 | display: ["responsive"], 639 | fill: ["responsive"], 640 | flex: ["responsive"], 641 | flexDirection: ["responsive"], 642 | flexGrow: ["responsive"], 643 | flexShrink: ["responsive"], 644 | flexWrap: ["responsive"], 645 | float: ["responsive"], 646 | clear: ["responsive"], 647 | fontFamily: ["responsive"], 648 | fontSize: ["responsive"], 649 | fontSmoothing: ["responsive"], 650 | fontStyle: ["responsive"], 651 | fontWeight: ["responsive", "hover", "focus"], 652 | height: ["responsive"], 653 | inset: ["responsive"], 654 | justifyContent: ["responsive"], 655 | letterSpacing: ["responsive"], 656 | lineHeight: ["responsive"], 657 | listStylePosition: ["responsive"], 658 | listStyleType: ["responsive"], 659 | margin: ["responsive"], 660 | maxHeight: ["responsive"], 661 | maxWidth: ["responsive"], 662 | minHeight: ["responsive"], 663 | minWidth: ["responsive"], 664 | objectFit: ["responsive"], 665 | objectPosition: ["responsive"], 666 | opacity: ["responsive", "hover", "focus"], 667 | order: ["responsive"], 668 | outline: ["responsive", "focus"], 669 | overflow: ["responsive"], 670 | padding: ["responsive"], 671 | placeholderColor: ["responsive", "focus"], 672 | pointerEvents: ["responsive"], 673 | position: ["responsive"], 674 | resize: ["responsive"], 675 | stroke: ["responsive"], 676 | strokeWidth: ["responsive"], 677 | tableLayout: ["responsive"], 678 | textAlign: ["responsive"], 679 | textColor: ["responsive", "hover", "focus"], 680 | textDecoration: ["responsive", "hover", "focus"], 681 | textTransform: ["responsive"], 682 | userSelect: ["responsive"], 683 | verticalAlign: ["responsive"], 684 | visibility: ["responsive"], 685 | whitespace: ["responsive"], 686 | width: ["responsive"], 687 | wordBreak: ["responsive"], 688 | zIndex: ["responsive"], 689 | gap: ["responsive"], 690 | gridAutoFlow: ["responsive"], 691 | gridTemplateColumns: ["responsive"], 692 | gridColumn: ["responsive"], 693 | gridColumnStart: ["responsive"], 694 | gridColumnEnd: ["responsive"], 695 | gridTemplateRows: ["responsive"], 696 | gridRow: ["responsive"], 697 | gridRowStart: ["responsive"], 698 | gridRowEnd: ["responsive"], 699 | transform: ["responsive"], 700 | transformOrigin: ["responsive"], 701 | scale: ["responsive", "hover", "focus"], 702 | rotate: ["responsive", "hover", "focus"], 703 | translate: ["responsive", "hover", "focus"], 704 | skew: ["responsive", "hover", "focus"], 705 | transitionProperty: ["responsive"], 706 | transitionTimingFunction: ["responsive"], 707 | transitionDuration: ["responsive"] 708 | }, 709 | corePlugins: {}, 710 | plugins: [] 711 | }; 712 | -------------------------------------------------------------------------------- /src/tailwind/index.js: -------------------------------------------------------------------------------- 1 | import colors from "./lib/colors"; 2 | import borderRadius from "./lib/borderRadius"; 3 | import borderStyle from "./lib/borderStyle"; 4 | import borderWidth from "./lib/borderWidth"; 5 | import position from "./lib/position"; 6 | import spacing from "./lib/spacing"; 7 | import width from "./lib/width"; 8 | import flex from "./lib/flex"; 9 | import grid from "./lib/grid"; 10 | import { StyleSheet } from "react-native"; 11 | 12 | export default StyleSheet.create({ 13 | ...colors, 14 | ...borderRadius, 15 | ...borderStyle, 16 | ...borderWidth, 17 | hidden: { 18 | display: "none", 19 | }, 20 | ...flex, 21 | "font-sans": { 22 | fontFamily: 23 | "system-ui, BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif", 24 | }, 25 | "font-serif": { 26 | fontFamily: 27 | "Constantia, Lucida Bright, Lucidabright, Lucida Serif, Lucida, DejaVu Serif, Bitstream Vera Serif, Liberation Serif, Georgia, serif", 28 | }, 29 | "font-mono": { 30 | fontFamily: 31 | "Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace", 32 | }, 33 | "font-hairline": { 34 | fontWeight: "100", 35 | }, 36 | "font-thin": { 37 | fontWeight: "200", 38 | }, 39 | "font-light": { 40 | fontWeight: "300", 41 | }, 42 | "font-normal": { 43 | fontWeight: "400", 44 | }, 45 | "font-medium": { 46 | fontWeight: "500", 47 | }, 48 | "font-semibold": { 49 | fontWeight: "600", 50 | }, 51 | "font-bold": { 52 | fontWeight: "700", 53 | }, 54 | "font-extrabold": { 55 | fontWeight: "800", 56 | }, 57 | "font-black": { 58 | fontWeight: "900", 59 | }, 60 | ...grid, 61 | "h-1": { 62 | height: 4, 63 | }, 64 | "h-2": { 65 | height: 8, 66 | }, 67 | "h-3": { 68 | height: 12, 69 | }, 70 | "h-4": { 71 | height: 16, 72 | }, 73 | "h-5": { 74 | height: 20, 75 | }, 76 | "h-6": { 77 | height: 24, 78 | }, 79 | "h-8": { 80 | height: 32, 81 | }, 82 | "h-10": { 83 | height: 40, 84 | }, 85 | "h-12": { 86 | height: 48, 87 | }, 88 | "h-16": { 89 | height: 64, 90 | }, 91 | "h-20": { 92 | height: 80, 93 | }, 94 | "h-24": { 95 | height: 96, 96 | }, 97 | "h-32": { 98 | height: 128, 99 | }, 100 | "h-48": { 101 | height: 192, 102 | }, 103 | "h-64": { 104 | height: 256, 105 | }, 106 | "h-auto": { 107 | height: "auto", 108 | }, 109 | "h-px": { 110 | height: 1, 111 | }, 112 | "h-full": { 113 | height: "100%", 114 | }, 115 | "leading-none": { 116 | lineHeight: 1, 117 | }, 118 | "leading-tight": { 119 | lineHeight: 1.25, 120 | }, 121 | "leading-snug": { 122 | lineHeight: 1.375, 123 | }, 124 | "leading-normal": { 125 | lineHeight: 1.5, 126 | }, 127 | "leading-relaxed": { 128 | lineHeight: 1.625, 129 | }, 130 | "leading-loose": { 131 | lineHeight: 2, 132 | }, 133 | "max-h-full": { 134 | maxHeight: "100%", 135 | }, 136 | "max-w-xs": { 137 | maxWidth: 320, 138 | }, 139 | "max-w-sm": { 140 | maxWidth: 480, 141 | }, 142 | "max-w-md": { 143 | maxWidth: 640, 144 | }, 145 | "max-w-lg": { 146 | maxWidth: 800, 147 | }, 148 | "max-w-xl": { 149 | maxWidth: 960, 150 | }, 151 | "max-w-2xl": { 152 | maxWidth: 1120, 153 | }, 154 | "max-w-3xl": { 155 | maxWidth: 1280, 156 | }, 157 | "max-w-4xl": { 158 | maxWidth: 1440, 159 | }, 160 | "max-w-5xl": { 161 | maxWidth: 1600, 162 | }, 163 | "max-w-full": { 164 | maxWidth: "100%", 165 | }, 166 | "min-h-0": { 167 | minHeight: 0, 168 | }, 169 | "min-h-full": { 170 | minHeight: "100%", 171 | }, 172 | "min-w-0": { 173 | minWidth: 0, 174 | }, 175 | "min-w-full": { 176 | minWidth: "100%", 177 | }, 178 | "opacity-0": { 179 | opacity: 0, 180 | }, 181 | "opacity-25": { 182 | opacity: 0.25, 183 | }, 184 | "opacity-50": { 185 | opacity: 0.5, 186 | }, 187 | "opacity-75": { 188 | opacity: 0.75, 189 | }, 190 | "opacity-100": { 191 | opacity: 1, 192 | }, 193 | ...spacing, 194 | ...position, 195 | "text-left": { 196 | textAlign: "left", 197 | }, 198 | "text-center": { 199 | textAlign: "center", 200 | }, 201 | "text-right": { 202 | textAlign: "right", 203 | }, 204 | "text-justify": { 205 | textAlign: "justify", 206 | }, 207 | "text-xs": { 208 | fontSize: 12, 209 | }, 210 | "text-sm": { 211 | fontSize: 14, 212 | }, 213 | "text-base": { 214 | fontSize: 16, 215 | }, 216 | "text-lg": { 217 | fontSize: 18, 218 | }, 219 | "text-xl": { 220 | fontSize: 20, 221 | }, 222 | "text-2xl": { 223 | fontSize: 24, 224 | }, 225 | "text-3xl": { 226 | fontSize: 30, 227 | }, 228 | "text-4xl": { 229 | fontSize: 36, 230 | }, 231 | "text-5xl": { 232 | fontSize: 48, 233 | }, 234 | italic: { 235 | fontStyle: "italic", 236 | }, 237 | roman: { 238 | fontStyle: "normal", 239 | }, 240 | "tracking-tight": { 241 | letterSpacing: -0.8, 242 | }, 243 | "tracking-normal": { 244 | letterSpacing: 0, 245 | }, 246 | "tracking-wide": { 247 | letterSpacing: 0.8, 248 | }, 249 | ...width, 250 | }); 251 | -------------------------------------------------------------------------------- /src/tailwind/lib/borderRadius.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | const styles = {}; 4 | 5 | Object.entries(config.theme.borderRadius).forEach(([key, val]) => { 6 | const suffix = key === "default" ? "" : `-${key}`; 7 | const value = 8 | typeof val === "string" && val.includes("rem") 9 | ? parseFloat(val) * 16 10 | : parseFloat(val); 11 | styles[`rounded${suffix}`] = { borderRadius: value }; 12 | styles[`rounded-t${suffix}`] = { 13 | borderTopLeftRadius: value, 14 | borderTopRightRadius: value, 15 | }; 16 | styles[`rounded-r${suffix}`] = { 17 | borderTopRightRadius: value, 18 | borderBottomRightRadius: value, 19 | }; 20 | styles[`rounded-b${suffix}`] = { 21 | borderBottomLeftRadius: value, 22 | borderBottomRightRadius: value, 23 | }; 24 | styles[`rounded-l${suffix}`] = { 25 | borderBottomLeftRadius: value, 26 | borderTopLeftRadius: value, 27 | }; 28 | styles[`rounded-tr${suffix}`] = { borderTopRightRadius: value }; 29 | styles[`rounded-br${suffix}`] = { borderBottomRightRadius: value }; 30 | styles[`rounded-bl${suffix}`] = { borderBottomLeftRadius: value }; 31 | styles[`rounded-tl${suffix}`] = { borderTopLeftRadius: value }; 32 | }); 33 | 34 | console.log({ styles }); 35 | 36 | export default styles; 37 | -------------------------------------------------------------------------------- /src/tailwind/lib/borderStyle.js: -------------------------------------------------------------------------------- 1 | const style = { 2 | "border-solid": { 3 | borderStyle: "solid", 4 | }, 5 | "border-dashed": { 6 | borderStyle: "dashed", 7 | }, 8 | "border-dotted": { 9 | borderStyle: "dotted", 10 | }, 11 | }; 12 | 13 | export default style; 14 | -------------------------------------------------------------------------------- /src/tailwind/lib/borderWidth.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | const styles = {}; 4 | 5 | Object.entries(config.theme.borderWidth).forEach(([key, val]) => { 6 | const suffix = key === "default" ? "" : `-${key}`; 7 | const value = parseInt(val); 8 | styles[`border${suffix}`] = { borderWidth: value }; 9 | styles[`border-t${suffix}`] = { borderTopWidth: value }; 10 | styles[`border-r${suffix}`] = { borderRightWidth: value }; 11 | styles[`border-b${suffix}`] = { borderBottomWidth: value }; 12 | styles[`border-l${suffix}`] = { borderLeftWidth: value }; 13 | }); 14 | 15 | export default styles; 16 | -------------------------------------------------------------------------------- /src/tailwind/lib/colors.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | const styles = {}; 4 | 5 | Object.entries(config.theme.colors).forEach(([colorName, colorValues]) => { 6 | if (typeof colorValues === "string") { 7 | styles[`border-${colorName}`] = { borderColor: colorValues }; 8 | styles[`bg-${colorName}`] = { backgroundColor: colorValues }; 9 | styles[`text-${colorName}`] = { color: colorValues }; 10 | return; 11 | } 12 | Object.entries(colorValues).forEach(([gradientIndex, hexValue]) => { 13 | styles[`border-${colorName}-${gradientIndex}`] = { borderColor: hexValue }; 14 | styles[`bg-${colorName}-${gradientIndex}`] = { backgroundColor: hexValue }; 15 | styles[`text-${colorName}-${gradientIndex}`] = { color: hexValue }; 16 | }); 17 | }); 18 | 19 | export default styles; 20 | -------------------------------------------------------------------------------- /src/tailwind/lib/flex.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | const styles = { 4 | "flex-row": { 5 | flexDirection: "row" 6 | }, 7 | "flex-row-reverse": { 8 | flexDirection: "row-reverse" 9 | }, 10 | "flex-col": { 11 | flexDirection: "column" 12 | }, 13 | "flex-col-reverse": { 14 | flexDirection: "column-reverse" 15 | }, 16 | "flex-wrap": { 17 | flexWrap: "wrap" 18 | }, 19 | "flex-no-wrap": { 20 | flexWrap: "nowrap" 21 | }, 22 | "items-start": { 23 | alignItems: "flex-start" 24 | }, 25 | "items-end": { 26 | alignItems: "flex-end" 27 | }, 28 | "items-center": { 29 | alignItems: "center" 30 | }, 31 | "items-baseline": { 32 | alignItems: "baseline" 33 | }, 34 | "items-stretch": { 35 | alignItems: "stretch" 36 | }, 37 | "self-auto": { 38 | alignSelf: "auto" 39 | }, 40 | "self-start": { 41 | alignSelf: "flex-start" 42 | }, 43 | "self-end": { 44 | alignSelf: "flex-end" 45 | }, 46 | "self-center": { 47 | alignSelf: "center" 48 | }, 49 | "self-stretch": { 50 | alignSelf: "stretch" 51 | }, 52 | "justify-start": { 53 | justifyContent: "flex-start" 54 | }, 55 | "justify-end": { 56 | justifyContent: "flex-end" 57 | }, 58 | "justify-center": { 59 | justifyContent: "center" 60 | }, 61 | "justify-between": { 62 | justifyContent: "space-between" 63 | }, 64 | "justify-around": { 65 | justifyContent: "space-around" 66 | }, 67 | "content-center": { 68 | alignContent: "center" 69 | }, 70 | "content-start": { 71 | alignContent: "flex-start" 72 | }, 73 | "content-end": { 74 | alignContent: "flex-end" 75 | }, 76 | "content-between": { 77 | alignContent: "space-between" 78 | }, 79 | "content-around": { 80 | alignContent: "space-around" 81 | }, 82 | // NOTE: flex-auto etc. as defined in the config can't be used in RN. 83 | "flex-1": { 84 | flex: 1 85 | }, 86 | "flex-2": { 87 | flex: 2 88 | }, 89 | "flex-3": { 90 | flex: 3 91 | }, 92 | "flex-4": { 93 | flex: 4 94 | } 95 | }; 96 | 97 | Object.entries(config.theme.flexGrow).forEach(([key, value]) => { 98 | const suffix = key === "default" ? "" : `-${key}`; 99 | styles[`flex-grow${suffix}`] = { flexGrow: parseInt(value) }; 100 | }); 101 | 102 | Object.entries(config.theme.flexShrink).forEach(([key, value]) => { 103 | const suffix = key === "default" ? "" : `-${key}`; 104 | styles[`flex-shrink${suffix}`] = { flexShrink: parseInt(value) }; 105 | }); 106 | 107 | export default styles; 108 | -------------------------------------------------------------------------------- /src/tailwind/lib/grid.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | const styles = { 4 | "grid-cols-1": { 5 | gridTemplateColumns: "repeat(1, minmax(0, 1fr))" 6 | }, 7 | "grid-cols-2": { 8 | gridTemplateColumns: "repeat(2, minmax(0, 1fr))" 9 | }, 10 | "grid-cols-3": { 11 | gridTemplateColumns: "repeat(3, minmax(0, 1fr))" 12 | }, 13 | "grid-cols-4": { 14 | gridTemplateColumns: "repeat(4, minmax(0, 1fr))" 15 | }, 16 | "grid-cols-5": { 17 | gridTemplateColumns: "repeat(5, minmax(0, 1fr))" 18 | }, 19 | "grid-cols-6": { 20 | gridTemplateColumns: "repeat(6, minmax(0, 1fr))" 21 | }, 22 | "grid-cols-7": { 23 | gridTemplateColumns: "repeat(7, minmax(0, 1fr))" 24 | }, 25 | "grid-cols-8": { 26 | gridTemplateColumns: "repeat(8, minmax(0, 1fr))" 27 | }, 28 | "grid-cols-9": { 29 | gridTemplateColumns: "repeat(9, minmax(0, 1fr))" 30 | }, 31 | "grid-cols-10": { 32 | gridTemplateColumns: "repeat(10, minmax(0, 1fr))" 33 | }, 34 | "grid-cols-11": { 35 | gridTemplateColumns: "repeat(11, minmax(0, 1fr))" 36 | }, 37 | "grid-cols-12": { 38 | gridTemplateColumns: "repeat(12, minmax(0, 1fr))" 39 | }, 40 | "grid-cols-none": { 41 | gridTemplateColumns: "none" 42 | }, 43 | "col-auto": { 44 | gridColumn: "auto" 45 | }, 46 | "col-span-1": { 47 | gridColumn: "span 1 / span 1" 48 | }, 49 | "col-span-2": { 50 | gridColumn: "span 2 / span 2" 51 | }, 52 | "col-span-3": { 53 | gridColumn: "span 3 / span 3" 54 | }, 55 | "col-span-4": { 56 | gridColumn: "span 4 / span 4" 57 | }, 58 | "col-span-5": { 59 | gridColumn: "span 5 / span 5" 60 | }, 61 | "col-span-6": { 62 | gridColumn: "span 6 / span 6" 63 | }, 64 | "col-span-7": { 65 | gridColumn: "span 7 / span 7" 66 | }, 67 | "col-span-8": { 68 | gridColumn: "span 8 / span 8" 69 | }, 70 | "col-span-9": { 71 | gridColumn: "span 9 / span 9" 72 | }, 73 | "col-span-10": { 74 | gridColumn: "span 10 / span 10" 75 | }, 76 | "col-span-11": { 77 | gridColumn: "span 11 / span 11" 78 | }, 79 | "col-span-12": { 80 | gridColumn: "span 12 / span 12" 81 | }, 82 | "col-span-full": { 83 | gridColumn: "1 / -1" 84 | }, 85 | "col-start-1": { 86 | gridColumnStart: "1" 87 | }, 88 | "col-start-2": { 89 | gridColumnStart: "2" 90 | }, 91 | "col-start-3": { 92 | gridColumnStart: "3" 93 | }, 94 | "col-start-4": { 95 | gridColumnStart: "4" 96 | }, 97 | "col-start-5": { 98 | gridColumnStart: "5" 99 | }, 100 | "col-start-6": { 101 | gridColumnStart: "6" 102 | }, 103 | "col-start-7": { 104 | gridColumnStart: "7" 105 | }, 106 | "col-start-8": { 107 | gridColumnStart: "8" 108 | }, 109 | "col-start-9": { 110 | gridColumnStart: "9" 111 | }, 112 | "col-start-10": { 113 | gridColumnStart: "10" 114 | }, 115 | "col-start-11": { 116 | gridColumnStart: "11" 117 | }, 118 | "col-start-12": { 119 | gridColumnStart: "12" 120 | }, 121 | "col-start-auto": { 122 | gridColumnStart: "auto" 123 | }, 124 | "col-end-1": { 125 | gridColumnEnd: "1" 126 | }, 127 | "col-end-2": { 128 | gridColumnEnd: "2" 129 | }, 130 | "col-end-3": { 131 | gridColumnEnd: "3" 132 | }, 133 | "col-end-4": { 134 | gridColumnEnd: "4" 135 | }, 136 | "col-end-5": { 137 | gridColumnEnd: "5" 138 | }, 139 | "col-end-6": { 140 | gridColumnEnd: "6" 141 | }, 142 | "col-end-7": { 143 | gridColumnEnd: "7" 144 | }, 145 | "col-end-8": { 146 | gridColumnEnd: "8" 147 | }, 148 | "col-end-9": { 149 | gridColumnEnd: "9" 150 | }, 151 | "col-end-10": { 152 | gridColumnEnd: "10" 153 | }, 154 | "col-end-11": { 155 | gridColumnEnd: "11" 156 | }, 157 | "col-end-12": { 158 | gridColumnEnd: "12" 159 | }, 160 | "col-end-auto": { 161 | gridColumnEnd: "auto" 162 | }, 163 | "grid-rows-1": { 164 | gridTemplateRows: "repeat(1, minmax(0, 1fr))" 165 | }, 166 | "grid-rows-2": { 167 | gridTemplateRows: "repeat(2, minmax(0, 1fr))" 168 | }, 169 | "grid-rows-3": { 170 | gridTemplateRows: "repeat(3, minmax(0, 1fr))" 171 | }, 172 | "grid-rows-4": { 173 | gridTemplateRows: "repeat(4, minmax(0, 1fr))" 174 | }, 175 | "grid-rows-5": { 176 | gridTemplateRows: "repeat(5, minmax(0, 1fr))" 177 | }, 178 | "grid-rows-6": { 179 | gridTemplateRows: "repeat(6, minmax(0, 1fr))" 180 | }, 181 | "grid-rows-none": { 182 | gridTemplateRows: "none" 183 | }, 184 | "row-auto": { 185 | gridRow: "auto" 186 | }, 187 | "row-span-1": { 188 | gridRow: "span 1 / span 1" 189 | }, 190 | "row-span-2": { 191 | gridRow: "span 2 / span 2" 192 | }, 193 | "row-span-3": { 194 | gridRow: "span 3 / span 3" 195 | }, 196 | "row-span-4": { 197 | gridRow: "span 4 / span 4" 198 | }, 199 | "row-span-5": { 200 | gridRow: "span 5 / span 5" 201 | }, 202 | "row-span-6": { 203 | gridRow: "span 6 / span 6" 204 | }, 205 | "row-span-7": { 206 | gridRow: "span 7 / span 7" 207 | }, 208 | "row-span-8": { 209 | gridRow: "span 8 / span 8" 210 | }, 211 | "row-span-9": { 212 | gridRow: "span 9 / span 9" 213 | }, 214 | "row-span-10": { 215 | gridRow: "span 10 / span 10" 216 | }, 217 | "row-span-11": { 218 | gridRow: "span 11 / span 11" 219 | }, 220 | "row-span-12": { 221 | gridRow: "span 12 / span 12" 222 | }, 223 | "row-span-full": { 224 | gridRow: "1 / -1" 225 | }, 226 | "row-start-1": { 227 | gridRowStart: "1" 228 | }, 229 | "row-start-2": { 230 | gridRowStart: "2" 231 | }, 232 | "row-start-3": { 233 | gridRowStart: "3" 234 | }, 235 | "row-start-4": { 236 | gridRowStart: "4" 237 | }, 238 | "row-start-5": { 239 | gridRowStart: "5" 240 | }, 241 | "row-start-6": { 242 | gridRowStart: "6" 243 | }, 244 | "row-start-7": { 245 | gridRowStart: "7" 246 | }, 247 | "row-start-8": { 248 | gridRowStart: "8" 249 | }, 250 | "row-start-9": { 251 | gridRowStart: "9" 252 | }, 253 | "row-start-10": { 254 | gridRowStart: "10" 255 | }, 256 | "row-start-11": { 257 | gridRowStart: "11" 258 | }, 259 | "row-start-12": { 260 | gridRowStart: "12" 261 | }, 262 | "row-start-auto": { 263 | gridRowStart: "auto" 264 | }, 265 | "row-end-1": { 266 | gridRowEnd: "1" 267 | }, 268 | "row-end-2": { 269 | gridRowEnd: "2" 270 | }, 271 | "row-end-3": { 272 | gridRowEnd: "3" 273 | }, 274 | "row-end-4": { 275 | gridRowEnd: "4" 276 | }, 277 | "row-end-5": { 278 | gridRowEnd: "5" 279 | }, 280 | "row-end-6": { 281 | gridRowEnd: "6" 282 | }, 283 | "row-end-7": { 284 | gridRowEnd: "7" 285 | }, 286 | "row-end-8": { 287 | gridRowEnd: "8" 288 | }, 289 | "row-end-9": { 290 | gridRowEnd: "9" 291 | }, 292 | "row-end-10": { 293 | gridRowEnd: "10" 294 | }, 295 | "row-end-11": { 296 | gridRowEnd: "11" 297 | }, 298 | "row-end-12": { 299 | gridRowEnd: "12" 300 | }, 301 | "row-end-auto": { 302 | gridRowEnd: "auto" 303 | }, 304 | "grid-flow-row": { 305 | gridAutoFlow: "row" 306 | }, 307 | "grid-flow-col": { 308 | gridAutoFlow: "column" 309 | }, 310 | "grid-flow-row-dense": { 311 | gridAutoFlow: "row dense" 312 | }, 313 | "grid-flow-col-dense": { 314 | gridAutoFlow: "column dense" 315 | }, 316 | "auto-cols-auto": { 317 | gridAutoColumns: "auto" 318 | }, 319 | "auto-cols-min": { 320 | gridAutoColumns: "min-content" 321 | }, 322 | "auto-cols-max": { 323 | gridAutoColumns: "max-content" 324 | }, 325 | "auto-cols-fr": { 326 | gridAutoColumns: "minmax(0, 1fr)" 327 | }, 328 | "auto-rows-auto": { 329 | gridAutoRows: "auto" 330 | }, 331 | "auto-rows-min": { 332 | gridAutoRows: "min-content" 333 | }, 334 | "auto-rows-max": { 335 | gridAutoRows: "max-content" 336 | }, 337 | "auto-rows-fr": { 338 | gridAutoRows: "minmax(0, 1fr)" 339 | }, 340 | "gap-0": { 341 | gap: "0px" 342 | }, 343 | "gap-x-0": { 344 | columnGap: "0px" 345 | }, 346 | "gap-y-0": { 347 | rowGap: "0px" 348 | }, 349 | "gap-px": { 350 | gap: "1px" 351 | }, 352 | "gap-x-px": { 353 | columnGap: "1px" 354 | }, 355 | "gap-y-px": { 356 | rowGap: "1px" 357 | }, 358 | "justify-start": { 359 | justifyContent: "flex-start" 360 | }, 361 | "justify-end": { 362 | justifyContent: "flex-end" 363 | }, 364 | "justify-center": { 365 | justifyContent: "center" 366 | }, 367 | "justify-between": { 368 | justifyContent: "space-between" 369 | }, 370 | "justify-around": { 371 | justifyContent: "space-around" 372 | }, 373 | "justify-evenly": { 374 | justifyContent: "space-evenly" 375 | }, 376 | "justify-items-start": { 377 | justifyItems: "start" 378 | }, 379 | "justify-items-end": { 380 | justifyItems: "end" 381 | }, 382 | "justify-items-center": { 383 | justifyItems: "center" 384 | }, 385 | "justify-items-stretch": { 386 | justifyItems: "stretch" 387 | }, 388 | "justify-self-auto": { 389 | justifySelf: "auto" 390 | }, 391 | "justify-self-start": { 392 | justifySelf: "start" 393 | }, 394 | "justify-self-end": { 395 | justifySelf: "end" 396 | }, 397 | "justify-self-center": { 398 | justifySelf: "center" 399 | }, 400 | "justify-self-stretch": { 401 | justifySelf: "stretch" 402 | }, 403 | "content-center": { 404 | alignContent: "center" 405 | }, 406 | "content-start": { 407 | alignContent: "flex-start" 408 | }, 409 | "content-end": { 410 | alignContent: "flex-end" 411 | }, 412 | "content-between": { 413 | alignContent: "space-between" 414 | }, 415 | "content-around": { 416 | alignContent: "space-around" 417 | }, 418 | "content-evenly": { 419 | alignContent: "space-evenly" 420 | }, 421 | "items-start": { 422 | alignItems: "flex-start" 423 | }, 424 | "items-end": { 425 | alignItems: "flex-end" 426 | }, 427 | "items-center": { 428 | alignItems: "center" 429 | }, 430 | "items-baseline": { 431 | alignItems: "baseline" 432 | }, 433 | "items-stretch": { 434 | alignItems: "stretch" 435 | }, 436 | "self-auto": { 437 | alignSelf: "auto" 438 | }, 439 | "self-start": { 440 | alignSelf: "flex-start" 441 | }, 442 | "self-end": { 443 | alignSelf: "flex-end" 444 | }, 445 | "self-center": { 446 | alignSelf: "center" 447 | }, 448 | "self-stretch": { 449 | alignSelf: "stretch" 450 | }, 451 | "self-baseline": { 452 | alignSelf: "baseline" 453 | }, 454 | "place-content-center": { 455 | placeContent: "center" 456 | }, 457 | "place-content-start": { 458 | placeContent: "start" 459 | }, 460 | "place-content-end": { 461 | placeContent: "end" 462 | }, 463 | "place-content-between": { 464 | placeContent: "space-between" 465 | }, 466 | "place-content-around": { 467 | placeContent: "space-around" 468 | }, 469 | "place-content-evenly": { 470 | placeContent: "space-evenly" 471 | }, 472 | "place-content-stretch": { 473 | placeContent: "stretch" 474 | }, 475 | "place-items-start": { 476 | placeItems: "start" 477 | }, 478 | "place-items-end": { 479 | placeItems: "end" 480 | }, 481 | "place-items-center": { 482 | placeItems: "center" 483 | }, 484 | "place-items-stretch": { 485 | placeItems: "stretch" 486 | }, 487 | "place-self-auto": { 488 | placeSelf: "auto" 489 | }, 490 | "place-self-start": { 491 | placeSelf: "start" 492 | }, 493 | "place-self-end": { 494 | placeSelf: "end" 495 | }, 496 | "place-self-center": { 497 | placeSelf: "center" 498 | }, 499 | "place-self-stretch": { 500 | placeSelf: "stretch" 501 | } 502 | }; 503 | 504 | function addGapStyles(styles, i) { 505 | let val = (i / 4) + "rem"; 506 | styles["gap-" + i] = {gap: val}; 507 | styles["gap-x-" + i] = {columnGap: val}; 508 | styles["gap-y-" + i] = {rowGap: val}; 509 | } 510 | 511 | for (let i = 0.5; i < 4; i += 0.5) { 512 | addGapStyles(styles, i); 513 | } 514 | 515 | for (let i = 4; i <= 12; i++) { 516 | addGapStyles(styles, i); 517 | } 518 | 519 | addGapStyles(styles, 14); 520 | 521 | for (let i = 16; i <= 64; i += 4) { 522 | addGapStyles(styles, i); 523 | } 524 | 525 | addGapStyles(styles, 72); 526 | addGapStyles(styles, 80); 527 | addGapStyles(styles, 96); 528 | 529 | export default styles; 530 | -------------------------------------------------------------------------------- /src/tailwind/lib/position.js: -------------------------------------------------------------------------------- 1 | const styles = {}; 2 | 3 | ["0", "auto"].forEach((variation) => { 4 | const value = variation === "auto" ? variation : parseInt(variation); 5 | styles[`inset-${variation}`] = { 6 | top: value, 7 | right: value, 8 | bottom: value, 9 | left: value 10 | }; 11 | styles[`inset-y-${variation}`] = { 12 | top: value, 13 | bottom: value 14 | }; 15 | styles[`inset-x-${variation}`] = { 16 | right: value, 17 | left: value 18 | }; 19 | styles[`top-${variation}`] = { top: value }; 20 | styles[`right-${variation}`] = { right: value }; 21 | styles[`bottom-${variation}`] = { bottom: value }; 22 | styles[`left-${variation}`] = { left: value }; 23 | }); 24 | 25 | export default { 26 | relative: { position: "relative" }, 27 | absolute: { position: "absolute" }, 28 | ...styles 29 | }; 30 | -------------------------------------------------------------------------------- /src/tailwind/lib/spacing.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | const makeSpace = (negative = false) => { 4 | const styles = {}; 5 | Object.keys({ ...config.theme.spacing, auto: "auto" }).forEach((key) => { 6 | let value = 1; 7 | let prefix = ""; 8 | if (key === "auto") { 9 | value = "auto"; 10 | } else if (key !== "px") value = parseFloat(key) * 4; 11 | 12 | if (negative && value === ("auto" || 0)) return; 13 | 14 | if (negative) { 15 | prefix = "-"; 16 | value = parseFloat(`-${value}`); 17 | } 18 | 19 | styles[`${prefix}m-${key}`] = { margin: value }; 20 | styles[`${prefix}mx-${key}`] = { marginLeft: value, marginRight: value }; 21 | styles[`${prefix}my-${key}`] = { marginTop: value, marginBottom: value }; 22 | styles[`${prefix}mt-${key}`] = { marginTop: value }; 23 | styles[`${prefix}mr-${key}`] = { marginRight: value }; 24 | styles[`${prefix}mb-${key}`] = { marginBottom: value }; 25 | styles[`${prefix}ml-${key}`] = { marginLeft: value }; 26 | 27 | if (!negative) { 28 | styles[`p-${key}`] = { padding: value }; 29 | styles[`px-${key}`] = { 30 | paddingLeft: value, 31 | paddingRight: value 32 | }; 33 | styles[`py-${key}`] = { 34 | paddingTop: value, 35 | paddingBottom: value 36 | }; 37 | styles[`pt-${key}`] = { paddingTop: value }; 38 | styles[`pr-${key}`] = { paddingRight: value }; 39 | styles[`pb-${key}`] = { paddingBottom: value }; 40 | styles[`pl-${key}`] = { paddingLeft: value }; 41 | } 42 | }); 43 | return styles; 44 | }; 45 | 46 | export default { 47 | ...makeSpace(), 48 | ...makeSpace(true) 49 | }; 50 | -------------------------------------------------------------------------------- /src/tailwind/lib/width.js: -------------------------------------------------------------------------------- 1 | import config from "../defaultConfig-1.2.0"; 2 | 3 | // TODO: facilitate theming 4 | const getSpacing = () => { 5 | const spacing = {}; 6 | Object.keys(config.theme.spacing).forEach((key) => { 7 | if (key === "px") return; 8 | spacing[key] = parseFloat(key) * 4; 9 | }); 10 | return spacing; 11 | }; 12 | 13 | const widths = config.theme.width(getSpacing); 14 | const styles = {}; 15 | 16 | Object.entries(widths).forEach(([key, val]) => { 17 | styles[`w-${key}`] = { width: val }; 18 | }); 19 | 20 | export default styles; 21 | --------------------------------------------------------------------------------