chore: update tailwind

apps/frontend/postcss.config.js

@@ -1,6 +1,7 @@
+const { join } = require('path');
 module.exports = {
   plugins: {
-    tailwindcss: { config: './apps/frontend/tailwind.config.js' },
+    tailwindcss: { config: join(__dirname, 'tailwind.config.js') },
     autoprefixer: {},
   },
 };

apps/frontend/project.json

@@ -17,7 +17,8 @@
         "assets": ["apps/frontend/src/favicon.ico", "apps/frontend/src/assets"],
         "styles": ["apps/frontend/src/styles.css"],
         "scripts": [],
-        "webpackConfig": "@nrwl/react/plugins/webpack"
+        "webpackConfig": "@nrwl/react/plugins/webpack",
+        "postcssConfig": "apps/frontend/postcss.config.js"
       },
       "configurations": {
         "production": {

apps/frontend/src/app/Card.tsx

@@ -20,12 +20,12 @@ export const Card = ({
   return (
     <div
       className={
-        'card font-mono ' +
+        'card font-mono md:w-36 sm:w-20 w-16 border-white border-2 sm:border-4 md:border-8 ' +
         (revealed === false ? 'flipped ' : ' ') +
         (isInput === true ? 'input ' : ' ') +
         (isHighlighted === true ? 'highlighted ' : ' ')
       }
-      style={{ aspectRatio: '3/4', backgroundColor: 'orange' }}
+      style={{ aspectRatio: '3/4' }}
     >
       <div className="card__face card__face--front bg-gray-300 font-black">
         <div className="smalltop">{shownValue}</div>

apps/frontend/src/app/Room.tsx

@@ -296,7 +296,7 @@ function Room({ username }: RoomProps) {
 
           {role === UserRole.DEVELOPER && (
             <div
-              className="flex flex-row justify-evenly p-10 absolute inset-x-0 bottom-0"
+              className="flex flex-row justify-evenly md:p-10 p-2 absolute inset-x-0 bottom-0 overflow-x-auto"
               style={{ borderTop: '2px solid #fafbfc' }}
             >
               <UserVoteInput

apps/frontend/src/app/VoteTable.tsx

@@ -38,12 +38,12 @@ export default ({
 
   return (
     <div className="w-5/6">
-      <div className="flex  justify-center mt-5">
-        <div className="flex flex-col items-center justify-center font-bold text-gray-100 flex-none justify-center font-mono text-4xl">
+      <div className="flex justify-center md:mt-5">
+        <div className="flex flex-col items-center justify-center font-bold text-gray-100 flex-none justify-center font-mono md:text-4xl text-xl">
           {description}
-          <div className="mt-10 mb-10">
+          <div className="md:mt-10 md:mb-10">
             {revealed ? (
-              <h1 className="text-pink-400 text-4xl">
+              <h1 className="text-pink-400 md:text-4xl text-xl">
                 {Number.isNaN(average) === false ? (
                   <>&#8709;{average.toFixed(1)}</>
                 ) : (

apps/frontend/src/styles.css

@@ -7,14 +7,10 @@ body {
 }
 
 .card {
-  width: 120px;
-  height: 160px;
   transition: transform 0.5s;
   transform-style: preserve-3d;
   cursor: pointer;
   position: relative;
-  border: 8px solid white;
-  border-radius: 4px;
   color: black;
 }
 
@@ -29,24 +25,16 @@ body {
 .card .value {
   justify-content: center;
   width: 100%;
-  font-size: 2rem;
   text-align: center;
 }
 
 .card .smalltop,
 .card .smallbot {
-  display: flex;
-  justify-content: left;
-  font-size: 0.75rem;
-  padding-left: 10px;
-  padding-top: 10px;
   cursor: pointer;
 }
 
 .card .smallbot {
   justify-content: flex-end;
-  padding-right: 10px;
-  padding-bottom: 10px;
 }
 
 .card.flipped {

apps/frontend/tailwind.config.js

@@ -1,5 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+const { join } = require('path');
+const { createGlobPatternsForDependencies } = require('@nrwl/react/tailwind');
 module.exports = {
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    join(
+      __dirname,
+      '{src,pages,components}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
   theme: {
     extend: {},
   },

apps/frontend/tsconfig.app.json

@@ -18,5 +18,5 @@
     "**/*.spec.jsx",
     "**/*.test.jsx"
   ],
-  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx", "tailwind.config.js.bak"]
 }