Upgraded to Tailwind UI defaults (fixed checkmark color bug) and tweaked class order for transitions

Author: Zaydek Michels-Gualtieri

package.json

@@ -1,7 +1,5 @@
 {
 	"name": "codex-editor-prototypes",
-	"version": "0.1.0",
-	"private": true,
 	"dependencies": {
 		"emoji-trie": "https://github.com/codex-src/emoji-trie.js",
 		"lodash": "^4.17.15",
@@ -36,6 +34,7 @@
 		]
 	},
 	"devDependencies": {
+		"@tailwindcss/ui": "^0.3.0",
 		"debug.css": "https://github.com/codex-src/debug.css",
 		"raw.macro": "^0.3.0",
 		"serve": "^11.3.0",

src/Editor/Elements/Elements.js

@@ -168,21 +168,7 @@ export const TodoItem = React.memo(({ id, syntax, checked, children, dispatch })
 				<div className="absolute" contentEditable={false}>
 					<input
 						ref={ref}
-						className={dedupeSpaces(`
-							form-checkbox
-							text-blue-500
-							border-none
-							rounded-md
-							shadow-hero
-							transform
-							scale-105
-							transition
-							ease-out
-							duration-150
-							cursor-pointer
-						`)}
-						// FIXME: Remove style={{ ... }}
-						style={{ color: "var(--blue-500)" }}
+						className={dedupeSpaces(`form-checkbox text-blue-500 border-none rounded-md shadow-hero transform scale-105 transition duration-150 ease-out cursor-pointer`)}
 						type="checkbox"
 						checked={checked}
 						onChange={() => {

src/EditorApp/FixedPreferences.js

@@ -35,7 +35,7 @@ const FixedPreferences = ({
 					Zoom -
 				</Button>
 				<div
-					className="p-2 flex flex-row items-center font-medium text-xxs transition ease-out duration-500"
+					className="p-2 flex flex-row items-center font-medium text-xxs transition duration-500 ease-out"
 					style={{ opacity: !saveStatus || saveStatus === 3 ? "0" : "1" }}
 				>
 					Saved
@@ -98,10 +98,10 @@ const FixedPreferences = ({
 		<Transition
 			unmountOnExit={false}
 			show={prefs.showSidebar}
-			enter="transition ease-out duration-300"
+			enter="transition duration-300 ease-out"
 			enterFrom="transform opacity-0 translate-x-32"
 			enterTo="transform opacity-100 translate-x-0 pointer-events-auto"
-			leave="transition ease-in duration-300"
+			leave="transition duration-300 ease-in"
 			leaveFrom="transform opacity-100 translate-x-0"
 			leaveTo="transform opacity-0 translate-x-32 pointer-events-none"
 		>

tailwind.config.js

@@ -43,5 +43,7 @@ module.exports = {
 		},
 	},
 	variants: {},
-	plugins: [],
+	plugins: [
+		require("@tailwindcss/ui"),
+	],
 }

yarn.lock

@@ -1328,6 +1328,24 @@
     "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
+"@tailwindcss/custom-forms@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/custom-forms/-/custom-forms-0.2.1.tgz#40e5ed1fff6d29d8ed1c508a0b2aaf8da96962e0"
+  integrity sha512-XdP5XY6kxo3x5o50mWUyoYWxOPV16baagLoZ5uM41gh6IhXzhz/vJYzqrTb/lN58maGIKlpkxgVsQUNSsbAS3Q==
+  dependencies:
+    lodash "^4.17.11"
+    mini-svg-data-uri "^1.0.3"
+    traverse "^0.6.6"
+
+"@tailwindcss/ui@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@tailwindcss/ui/-/ui-0.3.0.tgz#846e489c61bdeb60bdd4e2c32033db770ad8d429"
+  integrity sha512-LucyddG60/XAGN7aau+Jn84dsl2BFMZya7o/rGVKSXBVXUv+9SoaGmkbPdl0G3kkpcfQrGndDPSkdUgVTS0y8g==
+  dependencies:
+    "@tailwindcss/custom-forms" "^0.2.1"
+    hex-rgb "^4.1.0"
+    postcss-selector-parser "^6.0.2"
+
 "@types/babel__core@^7.1.0":
   version "7.1.7"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
@@ -5087,6 +5105,11 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
+hex-rgb@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.1.0.tgz#2d5d3a2943bd40e7dc9b0d5b98903d7d17035967"
+  integrity sha512-n7xsIfyBkFChITGPh6FLtxNzAt2HxZLcQIY9hYH4gm2gmMQJHMguMH3E+jnmvUbSTF5QrmFnGab5Ippi+D7e/g==
+
 hmac-drbg@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -6871,6 +6894,11 @@ mini-css-extract-plugin@0.9.0:
     schema-utils "^1.0.0"
     webpack-sources "^1.1.0"
 
+mini-svg-data-uri@^1.0.3:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.2.3.tgz#e16baa92ad55ddaa1c2c135759129f41910bc39f"
+  integrity sha512-zd6KCAyXgmq6FV1mR10oKXYtvmA9vRoB6xPSTUJTbFApCtkefDnYueVR1gkof3KcdLZo1Y8mjF2DFmQMIxsHNQ==
+
 minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
@@ -10408,6 +10436,11 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+traverse@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
+  integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
+
 ts-pnp@1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"