From 8746673f7d8586bae39fc54629c8f4afe1bb989b Mon Sep 17 00:00:00 2001 From: Peter Banka Date: Wed, 11 Dec 2019 15:44:10 -0800 Subject: [PATCH 1/6] upgrade tailwind to 1.x --- package.json | 2 +- yarn.lock | 160 +++++++++------------------------------------------ 2 files changed, 29 insertions(+), 133 deletions(-) diff --git a/package.json b/package.json index 969b6d8cb..d1556689a 100644 --- a/package.json +++ b/package.json @@ -87,7 +87,7 @@ "sass": "^1.22.10", "semver": "^6.3.0", "striptags": "^3.1.1", - "tailwindcss": "0.7.4", + "tailwindcss": "^1.0", "walk-sync": "^2.0.2", "yuidocjs": "^0.10.2" }, diff --git a/yarn.lock b/yarn.lock index aacab0f7d..2fa03b60a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1931,13 +1931,6 @@ babel-eslint@^10.0.3: eslint-visitor-keys "^1.0.0" resolve "^1.12.0" -babel-extract-comments@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21" - integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ== - dependencies: - babylon "^6.18.0" - babel-generator@6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-generator/-/babel-generator-6.26.0.tgz#ac1ae20070b79f6e3ca1d3269613053774f20dc5" @@ -4151,11 +4144,6 @@ commander@^2.15.1, commander@^2.20.0, commander@^2.6.0, commander@~2.20.3: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== -comment-regex@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/comment-regex/-/comment-regex-1.0.1.tgz#e070d2c4db33231955d0979d27c918fcb6f93565" - integrity sha512-IWlN//Yfby92tOIje7J18HkNmWRR7JESA/BK8W7wqY/akITpU5B0JQWnbTjCfdChSrDNb0DrdA9jfAxiiBXyiQ== - common-tags@^1.4.0, common-tags@^1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937" @@ -4530,6 +4518,11 @@ css-tree@1.0.0-alpha.33: mdn-data "2.0.4" source-map "^0.5.3" +css-unit-converter@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996" + integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY= + css-what@2.1: version "2.1.3" resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2" @@ -4540,16 +4533,6 @@ css-what@^3.2.1: resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1" integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw== -css.escape@^1.5.1: - version "1.5.1" - resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb" - integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s= - -cssesc@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-2.0.0.tgz#3b13bd1bb1cb36e1bcb5a4dcd27f54c5dcb35703" - integrity sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg== - cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -4736,11 +4719,6 @@ define-property@^2.0.2: is-descriptor "^1.0.2" isobject "^3.0.1" -defined@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" - integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM= - delayed-stream@0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-0.0.5.tgz#d4b1f43a93e8296dfe02694f4680bc37a313c73f" @@ -7095,11 +7073,6 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= -gather-stream@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/gather-stream/-/gather-stream-1.0.0.tgz#b33994af457a8115700d410f317733cbe7a0904b" - integrity sha1-szmUr0V6gRVwDUEPMXczy+egkEs= - gauge@~2.7.3: version "2.7.4" resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7" @@ -7431,11 +7404,6 @@ has-cors@1.1.0: resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39" integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk= -has-flag@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-1.0.0.tgz#9d9e793165ce017a00f00418c43f942a7b1d11fa" - integrity sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo= - has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -8236,11 +8204,6 @@ jquery@^3.2.1, jquery@^3.4.1: resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.4.1.tgz#714f1f8d9dde4bdfa55764ba37ef214630d80ef2" integrity sha512-36+AdBzCL+y6qjw5Tx7HgzeGCzC81MDDgaUP8ld2zhx58HdqXGoBd+tHdrBMiyjGQs0Hxs/MLZTu/eHNJJuWPw== -js-base64@^2.1.9: - version "2.5.1" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121" - integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw== - js-levenshtein@^1.1.3: version "1.1.6" resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" @@ -9713,6 +9676,11 @@ normalize-url@2.0.1: query-string "^5.0.1" sort-keys "^2.0.0" +normalize.css@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3" + integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== + npm-bundled@^1.0.1: version "1.1.0" resolved "https://registry.yarnpkg.com/npm-bundled/-/npm-bundled-1.1.0.tgz#2e8fdb7e69eff2df963937b696243316537c284b" @@ -10238,22 +10206,6 @@ pbkdf2@^3.0.3: safe-buffer "^5.0.1" sha.js "^2.4.8" -perfectionist@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/perfectionist/-/perfectionist-2.4.0.tgz#c147ad3714e126467f1764129ee72df861d47ea0" - integrity sha1-wUetNxThJkZ/F2QSnuct+GHUfqA= - dependencies: - comment-regex "^1.0.0" - defined "^1.0.0" - minimist "^1.2.0" - postcss "^5.0.8" - postcss-scss "^0.3.0" - postcss-value-parser "^3.3.0" - read-file-stdin "^0.2.0" - string.prototype.repeat "^0.2.0" - vendors "^1.0.0" - write-file-stdout "0.0.2" - performance-now@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" @@ -10352,13 +10304,6 @@ postcss-nested@^4.1.1: postcss "^7.0.21" postcss-selector-parser "^6.0.2" -postcss-scss@^0.3.0: - version "0.3.1" - resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-0.3.1.tgz#65c610d8e2a7ee0e62b1835b71b8870734816e4b" - integrity sha1-ZcYQ2OKn7g5isYNbcbiHBzSBbks= - dependencies: - postcss "^5.2.4" - postcss-scss@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.0.0.tgz#248b0a28af77ea7b32b1011aba0f738bda27dea1" @@ -10373,16 +10318,7 @@ postcss-selector-namespace@^2.0.0: dependencies: postcss "^7.0.0" -postcss-selector-parser@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz#249044356697b33b64f1a8f7c80922dddee7195c" - integrity sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ== - dependencies: - cssesc "^2.0.0" - indexes-of "^1.0.1" - uniq "^1.0.1" - -postcss-selector-parser@^6.0.2: +postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz#934cf799d016c83411859e09dcecade01286ec5c" integrity sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg== @@ -10401,16 +10337,6 @@ postcss-value-parser@^4.0.2: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.2.tgz#482282c09a42706d1fc9a069b73f44ec08391dc9" integrity sha512-LmeoohTpp/K4UiyQCwuGWlONxXamGzCMtFxLq4W1nZVGIQLYvMCJx3yAF9qyyuFpflABI9yVdtJAqbihOsCsJQ== -postcss@^5.0.8, postcss@^5.2.4: - version "5.2.18" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" - integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== - dependencies: - chalk "^1.1.3" - js-base64 "^2.1.9" - source-map "^0.5.6" - supports-color "^3.2.3" - postcss@^6.0.1, postcss@^6.0.17, postcss@^6.0.9: version "6.0.23" resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324" @@ -10721,13 +10647,6 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -read-file-stdin@^0.2.0: - version "0.2.1" - resolved "https://registry.yarnpkg.com/read-file-stdin/-/read-file-stdin-0.2.1.tgz#25eccff3a153b6809afacb23ee15387db9e0ee61" - integrity sha1-JezP86FTtoCa+ssj7hU4fbng7mE= - dependencies: - gather-stream "^1.0.0" - "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6: version "2.3.6" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf" @@ -10803,6 +10722,14 @@ redeyed@~1.0.0: dependencies: esprima "~3.0.0" +reduce-css-calc@^2.1.6: + version "2.1.7" + resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.7.tgz#1ace2e02c286d78abcd01fd92bfe8097ab0602c2" + integrity sha512-fDnlZ+AybAS3C7Q9xDq5y8A2z+lT63zLbynew/lur/IR24OQF5x98tfNwf79mzEdfywZ0a2wpM860FhFfMxZlA== + dependencies: + css-unit-converter "^1.1.1" + postcss-value-parser "^3.3.0" + regenerate-unicode-properties@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.1.0.tgz#ef51e0f0ea4ad424b77bf7cb41f3e015c70a3f0e" @@ -11801,11 +11728,6 @@ string-width@^3.0.0, string-width@^3.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" -string.prototype.repeat@^0.2.0: - version "0.2.0" - resolved "https://registry.yarnpkg.com/string.prototype.repeat/-/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf" - integrity sha1-q6Nt4I3O5qWjN9SbLqHaGyj8Ds8= - string.prototype.trimleft@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.0.tgz#6cc47f0d7eb8d62b0f3701611715a3954591d634" @@ -11885,14 +11807,6 @@ strip-bom@^4.0.0: resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-4.0.0.tgz#9c3505c1db45bcedca3d9cf7a16f5c5aa3901878" integrity sha512-3xurFv5tEgii33Zi8Jtp55wEIILR9eh34FAW00PZf+JnSsTmV/ioewSgQl97JHvgjoRGwPShsWm+IdrxB35d0w== -strip-comments@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d" - integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw== - dependencies: - babel-extract-comments "^1.0.0" - babel-plugin-transform-object-rest-spread "^6.26.0" - strip-eof@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf" @@ -11937,13 +11851,6 @@ supports-color@^2.0.0: resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7" integrity sha1-U10EXOa2Nj+kARcIRimZXp3zJMc= -supports-color@^3.2.3: - version "3.2.3" - resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.2.3.tgz#65ac0504b3954171d8a64946b2ae3cbb8a5f54f6" - integrity sha1-ZawFBLOVQXHYpklGsq48u4pfVPY= - dependencies: - has-flag "^1.0.0" - supports-color@^5.3.0, supports-color@^5.4.0: version "5.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f" @@ -12013,26 +11920,25 @@ taffydb@2.7.2: resolved "https://registry.yarnpkg.com/taffydb/-/taffydb-2.7.2.tgz#7bf8106a5c1a48251b3e3bc0a0e1732489fd0dc8" integrity sha1-e/gQalwaSCUbPjvAoOFzJIn9Dcg= -tailwindcss@0.7.4: - version "0.7.4" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.7.4.tgz#fb7926821d42eacdc12e6621a49d21f37a3ff9e9" - integrity sha512-+GeQjHRJ2VmeLkrNwMCbPDfm2cc5P8eoc7n+DtZfI8oQdlo5eSHqsIlPEuZOtoqQlIALsd2jAggWrUUBFGP2ow== +tailwindcss@^1.0: + version "1.1.4" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.1.4.tgz#786bd5faaf485c9eddcb821dd55666c56baa814e" + integrity sha512-p4AxVa4CKpX7IbNxImwNMGG9MHuLgratOaOE/iGriNd4AsRQRM2xMisoQ3KQHqShunrWuObga7rI7xbNsVoWGA== dependencies: autoprefixer "^9.4.5" bytes "^3.0.0" chalk "^2.4.1" - css.escape "^1.5.1" - fs-extra "^4.0.2" - lodash "^4.17.5" + fs-extra "^8.0.0" + lodash "^4.17.11" node-emoji "^1.8.1" - perfectionist "^2.4.0" + normalize.css "^8.0.1" postcss "^7.0.11" postcss-functions "^3.0.0" postcss-js "^2.0.0" postcss-nested "^4.1.1" - postcss-selector-parser "^5.0.0" + postcss-selector-parser "^6.0.0" pretty-hrtime "^1.0.3" - strip-comments "^1.0.2" + reduce-css-calc "^2.1.6" tap-parser@^7.0.0: version "7.0.0" @@ -12686,11 +12592,6 @@ velocity-animate@^1.5.2: resolved "https://registry.yarnpkg.com/velocity-animate/-/velocity-animate-1.5.2.tgz#5a351d75fca2a92756f5c3867548b873f6c32105" integrity sha512-m6EXlCAMetKztO1ppBhGU1/1MR3IiEevO6ESq6rcrSQ3Q77xYSW13jkfXW88o4xMrkXJhy/U7j4wFR/twMB0Eg== -vendors@^1.0.0: - version "1.0.3" - resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0" - integrity sha512-fOi47nsJP5Wqefa43kyWSg80qF+Q3XA6MUkgi7Hp1HQaKDQW4cQrK2D0P7mmbFtsV1N89am55Yru/nyEwRubcw== - verror@1.10.0: version "1.10.0" resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400" @@ -12982,11 +12883,6 @@ write-file-atomic@^3.0.0: signal-exit "^3.0.2" typedarray-to-buffer "^3.1.5" -write-file-stdout@0.0.2: - version "0.0.2" - resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1" - integrity sha1-wlLXx8WxtAKJdjDjRTx7/mkNnKE= - write@1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3" From ccb7fa7c3bd446b4af0447942680016944a351c8 Mon Sep 17 00:00:00 2001 From: Peter Banka Date: Wed, 11 Dec 2019 15:41:10 -0800 Subject: [PATCH 2/6] Update config file according to upgrade-guide --- addon/styles/tailwind.js | 1479 ++++++++++++++++++-------------------- 1 file changed, 714 insertions(+), 765 deletions(-) diff --git a/addon/styles/tailwind.js b/addon/styles/tailwind.js index cb6172bd1..cf8558b31 100644 --- a/addon/styles/tailwind.js +++ b/addon/styles/tailwind.js @@ -25,46 +25,6 @@ View the full documentation at https://tailwindcss.com. | */ -// let defaultConfig = require('tailwindcss/defaultConfig')() - -/* -|------------------------------------------------------------------------------- -| Colors https://tailwindcss.com/docs/colors -|------------------------------------------------------------------------------- -| -| Here you can specify the colors used in your project. To get you started, -| we've provided a generous palette of great looking colors that are perfect -| for prototyping, but don't hesitate to change them for your project. You -| own these colors, nothing will break if you change everything about them. -| -| We've used literal color names ("red", "blue", etc.) for the default -| palette, but if you'd rather use functional names like "primary" and -| "secondary", or even a numeric scale like "100" and "200", go for it. -| -*/ - -let colors = { - transparent: 'transparent', - inherit: 'inherit', - - black: '#22292f', - 'grey-darkest': '#3d4852', - 'grey-darker': '#606f7b', - 'grey-dark': '#8795a1', - grey: '#b8c2cc', - 'grey-light': '#dae1e7', - 'grey-lighter': '#f1f5f8', - 'grey-lightest': '#f8fafc', - white: 'white', - - yellow: '#ffed4a', - - 'code-base': '#282c34', - - // See the note in tailwind/compnents/docs-brand-colors.css - 'brand-var': 'var(--brand-primary, #E04E39)' -}; - let textSizesMap = { xxs: '12px', xs: '14px', @@ -83,7 +43,7 @@ let textSizesMap = { }; // Convert pixel sizes to REMs -let textSizes = Object.keys(textSizesMap).reduce((memo, textSize) => { +let fontSize = Object.keys(textSizesMap).reduce((memo, textSize) => { let pixelValue = textSizesMap[textSize]; let remValue = `${+pixelValue.replace('px', '') / 16}rem`; @@ -93,701 +53,687 @@ let textSizes = Object.keys(textSizesMap).reduce((memo, textSize) => { }, {}); module.exports = { - /* - |----------------------------------------------------------------------------- - | Colors https://tailwindcss.com/docs/colors - |----------------------------------------------------------------------------- - | - | The color palette defined above is also assigned to the "colors" key of - | your Tailwind config. This makes it easy to access them in your CSS - | using Tailwind's config helper. For example: - | - | .error { color: config('colors.red') } - | - */ - - colors: colors, - - /* - |----------------------------------------------------------------------------- - | Screens https://tailwindcss.com/docs/responsive-design - |----------------------------------------------------------------------------- - | - | Screens in Tailwind are translated to CSS media queries. They define the - | responsive breakpoints for your project. By default Tailwind takes a - | "mobile first" approach, where each screen size represents a minimum - | viewport width. Feel free to have as few or as many screens as you - | want, naming them in whatever way you'd prefer for your project. - | - | Tailwind also allows for more complex screen definitions, which can be - | useful in certain situations. Be sure to see the full responsive - | documentation for a complete list of options. - | - | Class name: .{screen}:{utility} - | - */ - - screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px' - }, - - /* - |----------------------------------------------------------------------------- - | Fonts https://tailwindcss.com/docs/fonts - |----------------------------------------------------------------------------- - | - | Here is where you define your project's font stack, or font families. - | Keep in mind that Tailwind doesn't actually load any fonts for you. - | If you're using custom fonts you'll need to import them prior to - | defining them here. - | - | By default we provide a native font stack that works remarkably well on - | any device or OS you're using, since it just uses the default fonts - | provided by the platform. - | - | Class name: .font-{name} - | CSS property: font-family - | - */ - - fonts: { - title: ['"Crimson Text"', 'serif'], - sans: [ - 'system-ui', - 'BlinkMacSystemFont', - '-apple-system', - 'Segoe UI', - 'Roboto', - 'Oxygen', - 'Ubuntu', - 'Cantarell', - 'Fira Sans', - 'Droid Sans', - 'Helvetica Neue', - 'sans-serif' - ], - serif: [ - 'Constantia', - 'Lucida Bright', - 'Lucidabright', - 'Lucida Serif', - 'Lucida', - 'DejaVu Serif', - 'Bitstream Vera Serif', - 'Liberation Serif', - 'Georgia', - 'serif' - ], - mono: [ - 'Menlo', - 'Monaco', - 'Consolas', - 'Liberation Mono', - 'Courier New', - 'monospace' - ] - }, - - /* - |----------------------------------------------------------------------------- - | Text sizes https://tailwindcss.com/docs/text-sizing - |----------------------------------------------------------------------------- - | - | Here is where you define your text sizes. Name these in whatever way - | makes the most sense to you. We use size names by default, but - | you're welcome to use a numeric scale or even something else - | entirely. - | - | By default Tailwind uses the "rem" unit type for most measurements. - | This allows you to set a root font size which all other sizes are - | then based on. That said, you are free to use whatever units you - | prefer, be it rems, ems, pixels or other. - | - | Class name: .text-{size} - | CSS property: font-size - | - */ - - textSizes, - /* - |----------------------------------------------------------------------------- - | Font weights https://tailwindcss.com/docs/font-weight - |----------------------------------------------------------------------------- - | - | Here is where you define your font weights. We've provided a list of - | common font weight names with their respective numeric scale values - | to get you started. It's unlikely that your project will require - | all of these, so we recommend removing those you don't need. - | - | Class name: .font-{weight} - | CSS property: font-weight - | - */ - - fontWeights: { - hairline: 100, - thin: 200, - light: 300, - normal: 400, - medium: 500, - semibold: 600, - bold: 700, - extrabold: 800, - black: 900 - }, - - /* - |----------------------------------------------------------------------------- - | Leading (line height) https://tailwindcss.com/docs/line-height - |----------------------------------------------------------------------------- - | - | Here is where you define your line height values, or as we call - | them in Tailwind, leadings. - | - | Class name: .leading-{size} - | CSS property: line-height - | - */ - - leading: { - none: 1, - tight: 1.25, - small: 1.45, - normal: 1.625, - loose: 2 - }, - - /* - |----------------------------------------------------------------------------- - | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing - |----------------------------------------------------------------------------- - | - | Here is where you define your letter spacing values, or as we call - | them in Tailwind, tracking. - | - | Class name: .tracking-{size} - | CSS property: letter-spacing - | - */ - - tracking: { - tight: '-0.2px', - normal: '0', - wide: '0.05em' - }, - - /* - |----------------------------------------------------------------------------- - | Text colors https://tailwindcss.com/docs/text-color - |----------------------------------------------------------------------------- - | - | Here is where you define your text colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Class name: .text-{color} - | CSS property: color - | - */ - - textColors: colors, - - /* - |----------------------------------------------------------------------------- - | Background colors https://tailwindcss.com/docs/background-color - |----------------------------------------------------------------------------- - | - | Here is where you define your background colors. By default these use - | the color palette we defined above, however you're welcome to set - | these independently if that makes sense for your project. - | - | Class name: .bg-{color} - | CSS property: background-color - | - */ - - backgroundColors: colors, - - /* - |----------------------------------------------------------------------------- - | Background sizes https://tailwindcss.com/docs/background-size - |----------------------------------------------------------------------------- - | - | Here is where you define your background sizes. We provide some common - | values that are useful in most projects, but feel free to add other sizes - | that are specific to your project here as well. - | - | Class name: .bg-{size} - | CSS property: background-size - | - */ - - backgroundSize: { - auto: 'auto', - cover: 'cover', - contain: 'contain' - }, - - /* - |----------------------------------------------------------------------------- - | Border widths https://tailwindcss.com/docs/border-width - |----------------------------------------------------------------------------- - | - | Here is where you define your border widths. Take note that border - | widths require a special "default" value set as well. This is the - | width that will be used when you do not specify a border width. - | - | Class name: .border{-side?}{-width?} - | CSS property: border-width - | - */ - - borderWidths: { - default: '1px', - '0': '0', - '2': '2px', - '4': '4px', - '8': '8px' - }, - - /* - |----------------------------------------------------------------------------- - | Border colors https://tailwindcss.com/docs/border-color - |----------------------------------------------------------------------------- - | - | Here is where you define your border colors. By default these use the - | color palette we defined above, however you're welcome to set these - | independently if that makes sense for your project. - | - | Take note that border colors require a special "default" value set - | as well. This is the color that will be used when you do not - | specify a border color. - | - | Class name: .border-{color} - | CSS property: border-color - | - */ - - borderColors: Object.assign({ default: colors['grey-light'] }, colors), - - /* - |----------------------------------------------------------------------------- - | Border radius https://tailwindcss.com/docs/border-radius - |----------------------------------------------------------------------------- - | - | Here is where you define your border radius values. If a `default` radius - | is provided, it will be made available as the non-suffixed `.rounded` - | utility. - | - | If your scale includes a `0` value to reset already rounded corners, it's - | a good idea to put it first so other values are able to override it. - | - | Class name: .rounded{-side?}{-size?} - | CSS property: border-radius - | - */ - - borderRadius: { - none: '0', - sm: '.125rem', - default: '.25rem', - lg: '.5rem', - full: '9999px' - }, - - /* - |----------------------------------------------------------------------------- - | Width https://tailwindcss.com/docs/width - |----------------------------------------------------------------------------- - | - | Here is where you define your width utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale, a percentage - | based fraction scale, plus some other common use-cases. You - | can, of course, modify these values as needed. - | - | - | It's also worth mentioning that Tailwind automatically escapes - | invalid CSS class name characters, which allows you to have - | awesome classes like .w-2/3. - | - | Class name: .w-{size} - | CSS property: width - | - */ - - width: { - 'site-container': '1400px', - - auto: 'auto', - px: '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '56': '14rem', - '64': '16rem', - '72': '18rem', - '76': '19rem', - '1/2': '50%', - '1/3': '33.33333%', - '2/3': '66.66667%', - '1/4': '25%', - '3/4': '75%', - '1/5': '20%', - '2/5': '40%', - '3/5': '60%', - '4/5': '80%', - '1/6': '16.66667%', - '5/6': '83.33333%', - '90%': '90%', - full: '100%', - screen: '100vw' - }, - - /* - |----------------------------------------------------------------------------- - | Height https://tailwindcss.com/docs/height - |----------------------------------------------------------------------------- - | - | Here is where you define your height utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based numeric scale plus some other - | common use-cases. You can, of course, modify these values as - | needed. - | - | Class name: .h-{size} - | CSS property: height - | - */ - - height: { - auto: 'auto', - px: '1px', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '10': '2.5rem', - '12': '3rem', - '16': '4rem', - '24': '6rem', - '32': '8rem', - '48': '12rem', - '64': '16rem', - full: '100%', - screen: '100vh' - }, - - /* - |----------------------------------------------------------------------------- - | Minimum width https://tailwindcss.com/docs/min-width - |----------------------------------------------------------------------------- - | - | Here is where you define your minimum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .min-w-{size} - | CSS property: min-width - | - */ - - minWidth: { - '0': '0', - full: '100%' - }, - - /* - |----------------------------------------------------------------------------- - | Minimum height https://tailwindcss.com/docs/min-height - |----------------------------------------------------------------------------- - | - | Here is where you define your minimum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | few common use-cases by default. You can, of course, modify these - | values as needed. - | - | Class name: .min-h-{size} - | CSS property: min-height - | - */ - - minHeight: { - '0': '0', - full: '100%', - screen: '100vh' - }, - - /* - |----------------------------------------------------------------------------- - | Maximum width https://tailwindcss.com/docs/max-width - |----------------------------------------------------------------------------- - | - | Here is where you define your maximum width utility sizes. These can - | be percentage based, pixels, rems, or any other units. By default - | we provide a sensible rem based scale and a "full width" size, - | which is basically a reset utility. You can, of course, - | modify these values as needed. - | - | Class name: .max-w-{size} - | CSS property: max-width - | - */ - - maxWidth: { - 'site-container': '1400px', - 'measure-byline': '12rem', - - none: 'none', - xxs: '17rem', - xs: '20rem', - sm: '30rem', - md: '40rem', - lg: '50rem', - xl: '60rem', - '2xl': '70rem', - '3xl': '80rem', - '4xl': '90rem', - '5xl': '100rem', - full: '100%', - - '2/3': '66.67%' - }, - - /* - |----------------------------------------------------------------------------- - | Maximum height https://tailwindcss.com/docs/max-height - |----------------------------------------------------------------------------- - | - | Here is where you define your maximum height utility sizes. These can - | be percentage based, pixels, rems, or any other units. We provide a - | couple common use-cases by default. You can, of course, modify - | these values as needed. - | - | Class name: .max-h-{size} - | CSS property: max-height - | - */ - - maxHeight: { - full: '100%', - screen: '100vh' - }, - - /* - |----------------------------------------------------------------------------- - | Padding https://tailwindcss.com/docs/padding - |----------------------------------------------------------------------------- - | - | Here is where you define your padding utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .p{side?}-{size} - | CSS property: padding - | - */ - - padding: { - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '5': '1.25rem', - '6': '1.5rem', - '8': '2rem', - '16': '4rem', - '20': '5rem' - }, - - /* - |----------------------------------------------------------------------------- - | Margin https://tailwindcss.com/docs/margin - |----------------------------------------------------------------------------- - | - | Here is where you define your margin utility sizes. These can be - | percentage based, pixels, rems, or any other units. By default we - | provide a sensible rem based numeric scale plus a couple other - | common use-cases like "1px". You can, of course, modify these - | values as needed. - | - | Class name: .m{side?}-{size} - | CSS property: margin - | - */ - - margin: { - auto: 'auto', - px: '1px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '12': '3rem', - '16': '4rem', - '20': '5rem' - }, - - /* - |----------------------------------------------------------------------------- - | Negative margin https://tailwindcss.com/docs/negative-margin - |----------------------------------------------------------------------------- - | - | Here is where you define your negative margin utility sizes. These can - | be percentage based, pixels, rems, or any other units. By default we - | provide matching values to the padding scale since these utilities - | generally get used together. You can, of course, modify these - | values as needed. - | - | Class name: .-m{side?}-{size} - | CSS property: margin - | - */ - - negativeMargin: { - px: '1px', - '2px': '2px', - '0': '0', - '1': '0.25rem', - '2': '0.5rem', - '3': '0.75rem', - '4': '1rem', - '6': '1.5rem', - '8': '2rem', - '16': '4rem', - '20': '5rem' - }, - - /* - |----------------------------------------------------------------------------- - | Shadows https://tailwindcss.com/docs/shadows - |----------------------------------------------------------------------------- - | - | Here is where you define your shadow utilities. As you can see from - | the defaults we provide, it's possible to apply multiple shadows - | per utility using comma separation. - | - | If a `default` shadow is provided, it will be made available as the non- - | suffixed `.shadow` utility. - | - | Class name: .shadow-{size?} - | CSS property: box-shadow - | - */ - - shadows: { - sm: '0 1px 1px 0 rgba(116, 129, 141, 0.1)', - default: '0 2px 4px 0 rgba(0,0,0,0.10)', - md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', - lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', - inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', - none: 'none' - }, - - /* - |----------------------------------------------------------------------------- - | Z-index https://tailwindcss.com/docs/z-index - |----------------------------------------------------------------------------- - | - | Here is where you define your z-index utility values. By default we - | provide a sensible numeric scale. You can, of course, modify these - | values as needed. - | - | Class name: .z-{index} - | CSS property: z-index - | - */ - - zIndex: { - auto: 'auto', - '0': 0, - '10': 10, - '20': 20, - '30': 30, - '40': 40, - '50': 50 - }, - - /* - |----------------------------------------------------------------------------- - | Opacity https://tailwindcss.com/docs/opacity - |----------------------------------------------------------------------------- - | - | Here is where you define your opacity utility values. By default we - | provide a sensible numeric scale. You can, of course, modify these - | values as needed. - | - | Class name: .opacity-{name} - | CSS property: opacity - | - */ - - opacity: { - '0': '0', - '25': '.25', - '50': '.5', - '75': '.75', - '100': '1' - }, - - /* - |----------------------------------------------------------------------------- - | SVG fill https://tailwindcss.com/docs/svg - |----------------------------------------------------------------------------- - | - | Here is where you define your SVG fill colors. By default we just provide - | `fill-current` which sets the fill to the current text color. This lets you - | specify a fill color using existing text color utilities and helps keep the - | generated CSS file size down. - | - | Class name: .fill-{name} - | CSS property: fill - | - */ - - svgFill: { - current: 'currentColor' - }, - - /* - |----------------------------------------------------------------------------- - | SVG stroke https://tailwindcss.com/docs/svg - |----------------------------------------------------------------------------- - | - | Here is where you define your SVG stroke colors. By default we just provide - | `stroke-current` which sets the stroke to the current text color. This lets - | you specify a stroke color using existing text color utilities and helps - | keep the generated CSS file size down. - | - | Class name: .stroke-{name} - | CSS property: stroke - | - */ - - svgStroke: { - current: 'currentColor' + prefix: 'docs-', + + theme: { + /* + |----------------------------------------------------------------------------- + | Colors https://tailwindcss.com/docs/colors + |----------------------------------------------------------------------------- + | + | The color palette defined above is also assigned to the "colors" key of + | your Tailwind config. This makes it easy to access them in your CSS + | using Tailwind's config helper. For example: + | + | .error { color: config('colors.red') } + | + */ + + colors: { + transparent: 'transparent', + inherit: 'inherit', + + black: '#22292f', + 'grey-darkest': '#3d4852', + 'grey-darker': '#606f7b', + 'grey-dark': '#8795a1', + grey: '#b8c2cc', + 'grey-light': '#dae1e7', + 'grey-lighter': '#f1f5f8', + 'grey-lightest': '#f8fafc', + white: 'white', + + yellow: '#ffed4a', + + 'code-base': '#282c34', + + // See the note in tailwind/compnents/docs-brand-colors.css + 'brand-var': 'var(--brand-primary, #E04E39)' + }, + + /* + |----------------------------------------------------------------------------- + | Screens https://tailwindcss.com/docs/responsive-design + |----------------------------------------------------------------------------- + | + | Screens in Tailwind are translated to CSS media queries. They define the + | responsive breakpoints for your project. By default Tailwind takes a + | "mobile first" approach, where each screen size represents a minimum + | viewport width. Feel free to have as few or as many screens as you + | want, naming them in whatever way you'd prefer for your project. + | + | Tailwind also allows for more complex screen definitions, which can be + | useful in certain situations. Be sure to see the full responsive + | documentation for a complete list of options. + | + | Class name: .{screen}:{utility} + | + */ + + screens: { + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px' + }, + + /* + |----------------------------------------------------------------------------- + | Fonts https://tailwindcss.com/docs/fonts + |----------------------------------------------------------------------------- + | + | Here is where you define your project's font stack, or font families. + | Keep in mind that Tailwind doesn't actually load any fonts for you. + | If you're using custom fonts you'll need to import them prior to + | defining them here. + | + | By default we provide a native font stack that works remarkably well on + | any device or OS you're using, since it just uses the default fonts + | provided by the platform. + | + | Class name: .font-{name} + | CSS property: font-family + | + */ + + fontFamily: { + title: ['"Crimson Text"', 'serif'], + sans: [ + 'system-ui', + 'BlinkMacSystemFont', + '-apple-system', + 'Segoe UI', + 'Roboto', + 'Oxygen', + 'Ubuntu', + 'Cantarell', + 'Fira Sans', + 'Droid Sans', + 'Helvetica Neue', + 'sans-serif' + ], + serif: [ + 'Constantia', + 'Lucida Bright', + 'Lucidabright', + 'Lucida Serif', + 'Lucida', + 'DejaVu Serif', + 'Bitstream Vera Serif', + 'Liberation Serif', + 'Georgia', + 'serif' + ], + mono: [ + 'Menlo', + 'Monaco', + 'Consolas', + 'Liberation Mono', + 'Courier New', + 'monospace' + ] + }, + + /* + |----------------------------------------------------------------------------- + | Text sizes https://tailwindcss.com/docs/text-sizing + |----------------------------------------------------------------------------- + | + | Here is where you define your text sizes. Name these in whatever way + | makes the most sense to you. We use size names by default, but + | you're welcome to use a numeric scale or even something else + | entirely. + | + | By default Tailwind uses the "rem" unit type for most measurements. + | This allows you to set a root font size which all other sizes are + | then based on. That said, you are free to use whatever units you + | prefer, be it rems, ems, pixels or other. + | + | Class name: .text-{size} + | CSS property: font-size + | + */ + + fontSize, + /* + |----------------------------------------------------------------------------- + | Font weights https://tailwindcss.com/docs/font-weight + |----------------------------------------------------------------------------- + | + | Here is where you define your font weights. We've provided a list of + | common font weight names with their respective numeric scale values + | to get you started. It's unlikely that your project will require + | all of these, so we recommend removing those you don't need. + | + | Class name: .font-{weight} + | CSS property: font-weight + | + */ + + fontWeight: { + hairline: 100, + thin: 200, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900 + }, + + /* + |----------------------------------------------------------------------------- + | Leading (line height) https://tailwindcss.com/docs/line-height + |----------------------------------------------------------------------------- + | + | Here is where you define your line height values, or as we call + | them in Tailwind, leadings. + | + | Class name: .leading-{size} + | CSS property: line-height + | + */ + + lineHeight: { + none: 1, + tight: 1.25, + small: 1.45, + normal: 1.625, + loose: 2 + }, + + /* + |----------------------------------------------------------------------------- + | Tracking (letter spacing) https://tailwindcss.com/docs/letter-spacing + |----------------------------------------------------------------------------- + | + | Here is where you define your letter spacing values, or as we call + | them in Tailwind, tracking. + | + | Class name: .tracking-{size} + | CSS property: letter-spacing + | + */ + + letterSpacing: { + tight: '-0.2px', + normal: '0', + wide: '0.05em' + }, + + /* + |----------------------------------------------------------------------------- + | Text colors https://tailwindcss.com/docs/text-color + |----------------------------------------------------------------------------- + | + | Here is where you define your text colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Class name: .text-{color} + | CSS property: color + | + */ + + textColor: theme => theme('colors'), + + /* + |----------------------------------------------------------------------------- + | Background colors https://tailwindcss.com/docs/background-color + |----------------------------------------------------------------------------- + | + | Here is where you define your background colors. By default these use + | the color palette we defined above, however you're welcome to set + | these independently if that makes sense for your project. + | + | Class name: .bg-{color} + | CSS property: background-color + | + */ + + backgroundColor: theme => theme('colors'), + + /* + |----------------------------------------------------------------------------- + | Background sizes https://tailwindcss.com/docs/background-size + |----------------------------------------------------------------------------- + | + | Here is where you define your background sizes. We provide some common + | values that are useful in most projects, but feel free to add other sizes + | that are specific to your project here as well. + | + | Class name: .bg-{size} + | CSS property: background-size + | + */ + + backgroundSize: { + auto: 'auto', + cover: 'cover', + contain: 'contain' + }, + + /* + |----------------------------------------------------------------------------- + | Border widths https://tailwindcss.com/docs/border-width + |----------------------------------------------------------------------------- + | + | Here is where you define your border widths. Take note that border + | widths require a special "default" value set as well. This is the + | width that will be used when you do not specify a border width. + | + | Class name: .border{-side?}{-width?} + | CSS property: border-width + | + */ + + borderWidth: { + default: '1px', + '0': '0', + '2': '2px', + '4': '4px', + '8': '8px' + }, + + /* + |----------------------------------------------------------------------------- + | Border colors https://tailwindcss.com/docs/border-color + |----------------------------------------------------------------------------- + | + | Here is where you define your border colors. By default these use the + | color palette we defined above, however you're welcome to set these + | independently if that makes sense for your project. + | + | Take note that border colors require a special "default" value set + | as well. This is the color that will be used when you do not + | specify a border color. + | + | Class name: .border-{color} + | CSS property: border-color + | + */ + + borderColor: theme => ({ + default: theme('colors.grey-light'), + ...theme('colors'), + }), + + /* + |----------------------------------------------------------------------------- + | Border radius https://tailwindcss.com/docs/border-radius + |----------------------------------------------------------------------------- + | + | Here is where you define your border radius values. If a `default` radius + | is provided, it will be made available as the non-suffixed `.rounded` + | utility. + | + | If your scale includes a `0` value to reset already rounded corners, it's + | a good idea to put it first so other values are able to override it. + | + | Class name: .rounded{-side?}{-size?} + | CSS property: border-radius + | + */ + + borderRadius: { + none: '0', + sm: '.125rem', + default: '.25rem', + lg: '.5rem', + full: '9999px' + }, + + /* + |----------------------------------------------------------------------------- + | Width https://tailwindcss.com/docs/width + |----------------------------------------------------------------------------- + | + | Here is where you define your width utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale, a percentage + | based fraction scale, plus some other common use-cases. You + | can, of course, modify these values as needed. + | + | + | It's also worth mentioning that Tailwind automatically escapes + | invalid CSS class name characters, which allows you to have + | awesome classes like .w-2/3. + | + | Class name: .w-{size} + | CSS property: width + | + */ + + width: { + 'site-container': '1400px', + + auto: 'auto', + px: '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '56': '14rem', + '64': '16rem', + '72': '18rem', + '76': '19rem', + '1/2': '50%', + '1/3': '33.33333%', + '2/3': '66.66667%', + '1/4': '25%', + '3/4': '75%', + '1/5': '20%', + '2/5': '40%', + '3/5': '60%', + '4/5': '80%', + '1/6': '16.66667%', + '5/6': '83.33333%', + '90%': '90%', + full: '100%', + screen: '100vw' + }, + + /* + |----------------------------------------------------------------------------- + | Height https://tailwindcss.com/docs/height + |----------------------------------------------------------------------------- + | + | Here is where you define your height utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based numeric scale plus some other + | common use-cases. You can, of course, modify these values as + | needed. + | + | Class name: .h-{size} + | CSS property: height + | + */ + + height: { + auto: 'auto', + px: '1px', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '10': '2.5rem', + '12': '3rem', + '16': '4rem', + '24': '6rem', + '32': '8rem', + '48': '12rem', + '64': '16rem', + full: '100%', + screen: '100vh' + }, + + /* + |----------------------------------------------------------------------------- + | Minimum width https://tailwindcss.com/docs/min-width + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .min-w-{size} + | CSS property: min-width + | + */ + + minWidth: { + '0': '0', + full: '100%' + }, + + /* + |----------------------------------------------------------------------------- + | Minimum height https://tailwindcss.com/docs/min-height + |----------------------------------------------------------------------------- + | + | Here is where you define your minimum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | few common use-cases by default. You can, of course, modify these + | values as needed. + | + | Class name: .min-h-{size} + | CSS property: min-height + | + */ + + minHeight: { + '0': '0', + full: '100%', + screen: '100vh' + }, + + /* + |----------------------------------------------------------------------------- + | Maximum width https://tailwindcss.com/docs/max-width + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum width utility sizes. These can + | be percentage based, pixels, rems, or any other units. By default + | we provide a sensible rem based scale and a "full width" size, + | which is basically a reset utility. You can, of course, + | modify these values as needed. + | + | Class name: .max-w-{size} + | CSS property: max-width + | + */ + + maxWidth: { + 'site-container': '1400px', + 'measure-byline': '12rem', + + none: 'none', + xxs: '17rem', + xs: '20rem', + sm: '30rem', + md: '40rem', + lg: '50rem', + xl: '60rem', + '2xl': '70rem', + '3xl': '80rem', + '4xl': '90rem', + '5xl': '100rem', + full: '100%', + + '2/3': '66.67%' + }, + + /* + |----------------------------------------------------------------------------- + | Maximum height https://tailwindcss.com/docs/max-height + |----------------------------------------------------------------------------- + | + | Here is where you define your maximum height utility sizes. These can + | be percentage based, pixels, rems, or any other units. We provide a + | couple common use-cases by default. You can, of course, modify + | these values as needed. + | + | Class name: .max-h-{size} + | CSS property: max-height + | + */ + + maxHeight: { + full: '100%', + screen: '100vh' + }, + + /* + |----------------------------------------------------------------------------- + | Padding https://tailwindcss.com/docs/padding + |----------------------------------------------------------------------------- + | + | Here is where you define your padding utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .p{side?}-{size} + | CSS property: padding + | + */ + + padding: { + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '5': '1.25rem', + '6': '1.5rem', + '8': '2rem', + '16': '4rem', + '20': '5rem' + }, + + /* + |----------------------------------------------------------------------------- + | Margin https://tailwindcss.com/docs/margin + |----------------------------------------------------------------------------- + | + | Here is where you define your margin utility sizes. These can be + | percentage based, pixels, rems, or any other units. By default we + | provide a sensible rem based numeric scale plus a couple other + | common use-cases like "1px". You can, of course, modify these + | values as needed. + | + | Class name: .m{side?}-{size} + | CSS property: margin + | + */ + + margin: { + auto: 'auto', + px: '1px', + '0': '0', + '1': '0.25rem', + '2': '0.5rem', + '3': '0.75rem', + '4': '1rem', + '6': '1.5rem', + '8': '2rem', + '12': '3rem', + '16': '4rem', + '20': '5rem', + '-px': '-1px', + '-2px': '-2px', + '-0': '-0', + '-1': '-0.25rem', + '-2': '-0.5rem', + '-3': '-0.75rem', + '-4': '-1rem', + '-6': '-1.5rem', + '-8': '-2rem', + '-16': '-4rem', + '-20': '-5rem' + }, + + /* + |----------------------------------------------------------------------------- + | Shadows https://tailwindcss.com/docs/shadows + |----------------------------------------------------------------------------- + | + | Here is where you define your shadow utilities. As you can see from + | the defaults we provide, it's possible to apply multiple shadows + | per utility using comma separation. + | + | If a `default` shadow is provided, it will be made available as the non- + | suffixed `.shadow` utility. + | + | Class name: .shadow-{size?} + | CSS property: box-shadow + | + */ + + boxShadow: { + sm: '0 1px 1px 0 rgba(116, 129, 141, 0.1)', + default: '0 2px 4px 0 rgba(0,0,0,0.10)', + md: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)', + lg: '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)', + inner: 'inset 0 2px 4px 0 rgba(0,0,0,0.06)', + none: 'none' + }, + + /* + |----------------------------------------------------------------------------- + | Z-index https://tailwindcss.com/docs/z-index + |----------------------------------------------------------------------------- + | + | Here is where you define your z-index utility values. By default we + | provide a sensible numeric scale. You can, of course, modify these + | values as needed. + | + | Class name: .z-{index} + | CSS property: z-index + | + */ + + zIndex: { + auto: 'auto', + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50 + }, + + /* + |----------------------------------------------------------------------------- + | SVG fill https://tailwindcss.com/docs/svg + |----------------------------------------------------------------------------- + | + | Here is where you define your SVG fill colors. By default we just provide + | `fill-current` which sets the fill to the current text color. This lets you + | specify a fill color using existing text color utilities and helps keep the + | generated CSS file size down. + | + | Class name: .fill-{name} + | CSS property: fill + | + */ + + fill: { + current: 'currentColor' + }, + + /* + |----------------------------------------------------------------------------- + | SVG stroke https://tailwindcss.com/docs/svg + |----------------------------------------------------------------------------- + | + | Here is where you define your SVG stroke colors. By default we just provide + | `stroke-current` which sets the stroke to the current text color. This lets + | you specify a stroke color using existing text color utilities and helps + | keep the generated CSS file size down. + | + | Class name: .stroke-{name} + | CSS property: stroke + | + */ + + stroke: { + current: 'currentColor' + }, }, /* @@ -809,26 +755,35 @@ module.exports = { | To disable a module completely, use `false` instead of an array. | */ - modules: { + variants: { appearance: ['responsive'], backgroundAttachment: ['responsive'], - backgroundColors: ['responsive', 'hover', 'focus'], + backgroundColor: ['responsive', 'hover', 'focus'], backgroundPosition: ['responsive'], backgroundRepeat: ['responsive'], backgroundSize: ['responsive'], - borderColors: ['responsive', 'hover'], + borderColor: ['responsive', 'hover'], borderRadius: ['responsive'], borderStyle: ['responsive'], - borderWidths: ['responsive'], + borderWidth: ['responsive'], cursor: ['responsive'], display: ['responsive'], - flexbox: ['responsive'], + flexDirection: ['responsive'], + flexWrap: ['responsive'], + alignItems: ['responsive'], + alignSelf: ['responsive'], + justifyContent: ['responsive'], + alignContent: ['responsive'], + flex: ['responsive'], + flexGrow: ['responsive'], + flexShrink: ['responsive'], float: ['responsive'], fonts: ['responsive'], - fontWeights: ['responsive', 'hover'], + fontWeight: ['responsive', 'hover'], height: ['responsive'], - leading: ['responsive'], - lists: ['responsive'], + lineHeight: ['responsive'], + listStylePosition: ['responsive'], + listStyleType: ['responsive'], margin: ['responsive'], maxHeight: ['responsive'], maxWidth: ['responsive'], @@ -840,19 +795,24 @@ module.exports = { padding: ['responsive'], pointerEvents: ['responsive'], position: ['responsive'], + inset: ['responsive'], resize: ['responsive'], - shadows: ['responsive', 'hover'], - svgFill: [], - svgStroke: [], + boxShadow: ['responsive', 'hover'], + fill: [], + stroke: [], textAlign: ['responsive'], - textColors: ['responsive', 'hover'], - textSizes: ['responsive'], - textStyle: ['responsive', 'hover'], - tracking: ['responsive'], + textColor: ['responsive', 'hover'], + fontSize: ['responsive'], + fontStyle: ['responsive', 'hover'], + fontSmoothing: ['responsive', 'hover'], + textDecoration: ['responsive', 'hover'], + textTransform: ['responsive', 'hover'], + letterSpacing: ['responsive'], userSelect: ['responsive'], verticalAlign: ['responsive'], visibility: ['responsive'], whitespace: ['responsive'], + wordBreak: ['responsive'], width: ['responsive'], zIndex: ['responsive'] }, @@ -873,19 +833,8 @@ module.exports = { plugins: [], - /* - |----------------------------------------------------------------------------- - | Advanced Options https://tailwindcss.com/docs/configuration#options - |----------------------------------------------------------------------------- - | - | Here is where you can tweak advanced configuration options. We recommend - | leaving these options alone unless you absolutely need to change them. - | - */ + corePlugins: { + container: false + }, - options: { - prefix: 'docs-', - important: false, - separator: ':' - } }; From 6b494d396d3fe50a7814c9e8ba92892ccaf3626d Mon Sep 17 00:00:00 2001 From: Peter Banka Date: Wed, 11 Dec 2019 15:43:51 -0800 Subject: [PATCH 3/6] rename tailwind config file --- addon/styles/addon.scss | 2 +- addon/styles/{tailwind.js => tailwind.config.js} | 0 index.js | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename addon/styles/{tailwind.js => tailwind.config.js} (100%) diff --git a/addon/styles/addon.scss b/addon/styles/addon.scss index 105e6a112..26a785f80 100644 --- a/addon/styles/addon.scss +++ b/addon/styles/addon.scss @@ -1,7 +1,7 @@ // Global settings $site-container: 1400px; -@tailwind preflight; +@tailwind base; @tailwind components; @tailwind utilities; diff --git a/addon/styles/tailwind.js b/addon/styles/tailwind.config.js similarity index 100% rename from addon/styles/tailwind.js rename to addon/styles/tailwind.config.js diff --git a/index.js b/index.js index 73f2656b7..2bee67e87 100644 --- a/index.js +++ b/index.js @@ -29,7 +29,7 @@ module.exports = { enabled: true, includePaths: [styleDir], plugins: [ - require('tailwindcss')(path.join( __dirname, 'addon', 'styles', 'tailwind.js')) + require('tailwindcss')(path.join( __dirname, 'addon', 'styles', 'tailwind.config.js')) ] }, }, From 5a9d5ed4ac38a268047558b2665dc47813a304d9 Mon Sep 17 00:00:00 2001 From: Peter Banka Date: Wed, 11 Dec 2019 15:50:09 -0800 Subject: [PATCH 4/6] replace calls to config with calls to theme --- addon/styles/components/_docs-container.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/styles/components/_docs-container.scss b/addon/styles/components/_docs-container.scss index debab6f85..3cb09e3dd 100644 --- a/addon/styles/components/_docs-container.scss +++ b/addon/styles/components/_docs-container.scss @@ -1,7 +1,7 @@ .docs-container { @apply docs-px-4 docs-max-w-site-container docs-mx-auto; } -@media (min-width: config('screens.md')) { +@media (min-width: theme('screens.md')) { .docs-container { @apply docs-px-6; } From 546543dd197838d081120a624b0118d463a2d26e Mon Sep 17 00:00:00 2001 From: Peter Banka Date: Wed, 11 Dec 2019 16:00:18 -0800 Subject: [PATCH 5/6] remove all use of list-reset, as this is already being done --- addon/components/api/x-toggles/template.hbs | 2 +- addon/components/docs-header/search-results/template.hbs | 2 +- addon/components/docs-header/version-selector/template.hbs | 2 +- .../components/docs-viewer/x-current-page-index/template.hbs | 2 +- addon/components/docs-viewer/x-nav-list/component.js | 4 +--- 5 files changed, 5 insertions(+), 7 deletions(-) diff --git a/addon/components/api/x-toggles/template.hbs b/addon/components/api/x-toggles/template.hbs index 48a8baa9b..a7c36d430 100644 --- a/addon/components/api/x-toggles/template.hbs +++ b/addon/components/api/x-toggles/template.hbs @@ -1,4 +1,4 @@ -