From d891102e5fb3aea135682b52ee07d3f8c763f61a Mon Sep 17 00:00:00 2001 From: tjs Date: Wed, 2 Mar 2022 18:03:33 -0500 Subject: [PATCH] upgrade to tailwind 3 --- components/FlipCard.tsx | 2 +- package.json | 2 +- styles/index.css | 54 ++++++++++++++++++++--------------------- tailwind.config.js | 27 +++++++++------------ yarn.lock | 50 ++++++++++++++++++++++++++++++++------ 5 files changed, 83 insertions(+), 52 deletions(-) diff --git a/components/FlipCard.tsx b/components/FlipCard.tsx index 34f9f1ff..1b758334 100644 --- a/components/FlipCard.tsx +++ b/components/FlipCard.tsx @@ -22,7 +22,7 @@ export const FlipCardInner = (props) => { } export const FlipCardFront = (props) => { - return
{props.children}
+ return
{props.children}
} export const FlipCardBack = ({ children }) => { diff --git a/package.json b/package.json index f80bcdd5..55bf59e1 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "postcss": "^8.4.7", "prettier": "^2.0.2", "react-is": "^17.0.2", - "tailwindcss": "^2.2.17", + "tailwindcss": "^3.0.23", "twin.macro": "^2.4.1", "typescript": "^4.1.3" }, diff --git a/styles/index.css b/styles/index.css index c7d9254c..16075492 100644 --- a/styles/index.css +++ b/styles/index.css @@ -14,15 +14,15 @@ --green-dark: theme('colors.light-theme.green.dark'); --green-muted: theme('colors.light-theme.green.muted'); --orange: theme('colors.light-theme.orange.DEFAULT'); - --bkg-1: theme('colors.light-theme["bkg-1"]'); - --bkg-2: theme('colors.light-theme["bkg-2"]'); - --bkg-3: theme('colors.light-theme["bkg-3"]'); - --bkg-4: theme('colors.light-theme["bkg-4"]'); - --fgd-1: theme('colors.light-theme["fgd-1"]'); - --fgd-2: theme('colors.light-theme["fgd-2"]'); - --fgd-3: theme('colors.light-theme["fgd-3"]'); - --fgd-4: theme('colors.light-theme["fgd-4"]'); - --bkg-button: theme('colors.light-theme["bkg-button"]'); + --bkg-1: theme('colors.light-theme.bkg-1'); + --bkg-2: theme('colors.light-theme.bkg-2'); + --bkg-3: theme('colors.light-theme.bkg-3'); + --bkg-4: theme('colors.light-theme.bkg-4'); + --fgd-1: theme('colors.light-theme.fgd-1'); + --fgd-2: theme('colors.light-theme.fgd-2'); + --fgd-3: theme('colors.light-theme.fgd-3'); + --fgd-4: theme('colors.light-theme.fgd-4'); + --bkg-button: theme('colors.light-theme.bkg-button'); } [data-theme='Dark'] { @@ -35,15 +35,15 @@ --green-dark: theme('colors.dark-theme.green.dark'); --green-muted: theme('colors.dark-theme.green.muted'); --orange: theme('colors.dark-theme.orange.DEFAULT'); - --bkg-1: theme('colors.dark-theme["bkg-1"]'); - --bkg-2: theme('colors.dark-theme["bkg-2"]'); - --bkg-3: theme('colors.dark-theme["bkg-3"]'); - --bkg-4: theme('colors.dark-theme["bkg-4"]'); - --fgd-1: theme('colors.dark-theme["fgd-1"]'); - --fgd-2: theme('colors.dark-theme["fgd-2"]'); - --fgd-3: theme('colors.dark-theme["fgd-3"]'); - --fgd-4: theme('colors.dark-theme["fgd-4"]'); - --bkg-button: theme('colors.dark-theme["bkg-button"]'); + --bkg-1: theme('colors.dark-theme.bkg-1'); + --bkg-2: theme('colors.dark-theme.bkg-2'); + --bkg-3: theme('colors.dark-theme.bkg-3'); + --bkg-4: theme('colors.dark-theme.bkg-4'); + --fgd-1: theme('colors.dark-theme.fgd-1'); + --fgd-2: theme('colors.dark-theme.fgd-2'); + --fgd-3: theme('colors.dark-theme.fgd-3'); + --fgd-4: theme('colors.dark-theme.fgd-4'); + --bkg-button: theme('colors.dark-theme.bkg-button'); } [data-theme='Mango'] { @@ -56,15 +56,15 @@ --green-dark: theme('colors.mango-theme.green.dark'); --green-muted: theme('colors.mango-theme.green.muted'); --orange: theme('colors.mango-theme.orange.DEFAULT'); - --bkg-1: theme('colors.mango-theme["bkg-1"]'); - --bkg-2: theme('colors.mango-theme["bkg-2"]'); - --bkg-3: theme('colors.mango-theme["bkg-3"]'); - --bkg-4: theme('colors.mango-theme["bkg-4"]'); - --fgd-1: theme('colors.mango-theme["fgd-1"]'); - --fgd-2: theme('colors.mango-theme["fgd-2"]'); - --fgd-3: theme('colors.mango-theme["fgd-3"]'); - --fgd-4: theme('colors.mango-theme["fgd-4"]'); - --bkg-button: theme('colors.mango-theme["bkg-button"]'); + --bkg-1: theme('colors.mango-theme.bkg-1'); + --bkg-2: theme('colors.mango-theme.bkg-2'); + --bkg-3: theme('colors.mango-theme.bkg-3'); + --bkg-4: theme('colors.mango-theme.bkg-4'); + --fgd-1: theme('colors.mango-theme.fgd-1'); + --fgd-2: theme('colors.mango-theme.fgd-2'); + --fgd-3: theme('colors.mango-theme.fgd-3'); + --fgd-4: theme('colors.mango-theme.fgd-4'); + --bkg-button: theme('colors.mango-theme.bkg-button'); } /* Base */ diff --git a/tailwind.config.js b/tailwind.config.js index 921feb45..2e8f88c8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,13 +2,10 @@ // const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { - mode: 'jit', - purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'], - future: { - removeDeprecatedGapUtilities: true, - purgeLayersByDefault: true, - }, - darkMode: false, + content: [ + './pages/**/*.{js,ts,jsx,tsx}', + './components/**/*.{js,ts,jsx,tsx}', + ], theme: { fontFamily: { display: ['Lato, sans-serif'], @@ -113,13 +110,13 @@ module.exports = { }, }, }, - variants: { - extend: { - cursor: ['hover', 'focus', 'disabled'], - opacity: ['disabled'], - backgroundColor: ['disabled'], - textColor: ['disabled'], - }, - }, + // variants: { + // extend: { + // cursor: ['hover', 'focus', 'disabled'], + // opacity: ['disabled'], + // backgroundColor: ['disabled'], + // textColor: ['disabled'], + // }, + // }, plugins: [], } diff --git a/yarn.lock b/yarn.lock index 2d05452e..d7d9f7ef 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2947,7 +2947,7 @@ char-regex@^1.0.2: resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" integrity sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw== -chokidar@^3.5.2: +chokidar@^3.5.2, chokidar@^3.5.3: version "3.5.3" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd" integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw== @@ -3074,7 +3074,7 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.0.0, color-name@~1.1.4: +color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== @@ -3997,7 +3997,7 @@ fast-equals@^2.0.0, fast-equals@^2.0.1: resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927" integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w== -fast-glob@^3.2.7, fast-glob@^3.2.9: +fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9: version "3.2.11" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew== @@ -4229,7 +4229,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2: dependencies: is-glob "^4.0.1" -glob-parent@^6.0.1: +glob-parent@^6.0.1, glob-parent@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A== @@ -6304,6 +6304,13 @@ postcss-js@^3.0.3: camelcase-css "^2.0.1" postcss "^8.1.6" +postcss-js@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.0.tgz#31db79889531b80dc7bc9b0ad283e418dce0ac00" + integrity sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ== + dependencies: + camelcase-css "^2.0.1" + postcss-load-config@^3.1.0: version "3.1.3" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.3.tgz#21935b2c43b9a86e6581a576ca7ee1bde2bd1d23" @@ -6319,7 +6326,7 @@ postcss-nested@5.0.6: dependencies: postcss-selector-parser "^6.0.6" -postcss-selector-parser@^6.0.6: +postcss-selector-parser@^6.0.6, postcss-selector-parser@^6.0.9: version "6.0.9" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.9.tgz#ee71c3b9ff63d9cd130838876c13a2ec1a992b2f" integrity sha512-UO3SgnZOVTwu4kyLR22UQ1xZh086RyNZppb7lLAKBFK8a32ttG5i87Y/P3+2bRSjZNyJ1B7hfFNo273tKe9YxQ== @@ -6355,7 +6362,7 @@ postcss@^8.1.6, postcss@^8.1.8, postcss@^8.3.5: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^8.4.7: +postcss@^8.4.6, postcss@^8.4.7: version "8.4.7" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.7.tgz#f99862069ec4541de386bf57f5660a6c7a0875a8" integrity sha512-L9Ye3r6hkkCeOETQX6iOaWZgjp3LL6Lpqm6EtgbKrgqGGteRMNb9vzBfRL96YOSu8o7x3MfIH9Mo5cPJFGrW6A== @@ -6927,7 +6934,7 @@ resolve.exports@^1.1.0: resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9" integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ== -resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0: +resolve@^1.12.0, resolve@^1.14.2, resolve@^1.20.0, resolve@^1.22.0: version "1.22.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198" integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw== @@ -7448,7 +7455,7 @@ table@^6.0.9: string-width "^4.2.3" strip-ansi "^6.0.1" -tailwindcss@^2.2.17, tailwindcss@^2.2.7: +tailwindcss@^2.2.7: version "2.2.19" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.19.tgz#540e464832cd462bb9649c1484b0a38315c2653c" integrity sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw== @@ -7486,6 +7493,33 @@ tailwindcss@^2.2.17, tailwindcss@^2.2.7: resolve "^1.20.0" tmp "^0.2.1" +tailwindcss@^3.0.23: + version "3.0.23" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10" + integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA== + dependencies: + arg "^5.0.1" + chalk "^4.1.2" + chokidar "^3.5.3" + color-name "^1.1.4" + cosmiconfig "^7.0.1" + detective "^5.2.0" + didyoumean "^1.2.2" + dlv "^1.1.3" + fast-glob "^3.2.11" + glob-parent "^6.0.2" + is-glob "^4.0.3" + normalize-path "^3.0.0" + object-hash "^2.2.0" + postcss "^8.4.6" + postcss-js "^4.0.0" + postcss-load-config "^3.1.0" + postcss-nested "5.0.6" + postcss-selector-parser "^6.0.9" + postcss-value-parser "^4.2.0" + quick-lru "^5.1.1" + resolve "^1.22.0" + tar-fs@^2.0.0, tar-fs@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"