fix: munging around with tailwinds configuration

lib/comparisonView.js

@@ -252,7 +252,7 @@ export default function ComparisonView({ listOfElementsForView }) {
         <p>{`${numSteps} out of ~${expectedSteps} (max ${maxSteps}) comparisons`}</p>
 
         {/* Comparison section */}
-        <div className={`${isListOrdered ? "hidden" : ""}`}>
+        <div className={isListOrdered ? "hidden" : ""}>
           <div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
             
             {/* Element 1 */}
@@ -341,7 +341,7 @@ export default function ComparisonView({ listOfElementsForView }) {
           </DrawGraph>
 
           {/* Comparison table */}
-          <div className={`inline items-center text-center mt-10 ${isListOrdered ? "" : "hidden"}`}>
+          <div className={isListOrdered ? "inline items-center text-center mt-10" : "hidden"}>
             <CreateTable
               isListOrdered={isListOrdered}
               orderedList={orderedList}
@@ -364,7 +364,7 @@ export default function ComparisonView({ listOfElementsForView }) {
           </button>
         </div>
 
-        <div className={`flex flex-wrap -mx-4 overflow-hidden ${showAdvancedOptions ? "" : "hidden"}`}>
+        <div className={showAdvancedOptions? "flex flex-wrap -mx-4 overflow-hidden" : "hidden"}>
           {/* Button: Restart */}
           <div className="my-4 px-4 w-1/3 overflow-hidden">
             <button
@@ -391,12 +391,12 @@ export default function ComparisonView({ listOfElementsForView }) {
           </div>
         </div>
         {/* Change dataset section */}
-        <div className={`inline mt-5 ${showChangeDataSet ? "" : "hidden"}`}>
+        <div className={showChangeDataSet ? "inline mt-5" : "hidden"}>
           <DataSetChanger handleSubmit={changeDataSet} />
         </div>
 
         {/* Show comparisons section */}
-        <div className={`inline mt-5 ${showComparisons ? "" : "hidden"}`}>
+        <div className={showComparisons ? "inline mt-5" : "hidden"}>
           <h2>Comparisons</h2>
           <div className="text-left">
             <DisplayAsMarkdown

lib/datasetChanger.js

@@ -94,7 +94,7 @@ Your old input was: ${value}`
       </button>
       &nbsp;
       <button
-        className={`${!displayingDoneMessage ? "hidden" : ""} bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10`}
+        className={displayingDoneMessage ? "bg-transparent text-blue-700 font-semibold py-2 px-4 border border-blue-500 rounded mt-5 p-10" : "hidden"}
       >
         Done!
       </button>

pages/_app.js

@@ -1,5 +1,5 @@
 // import 'tailwindcss/tailwind.css'
-import "../styles/tailwind.css";
+import 'tailwindcss/tailwind.css'
 import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {

postcss.config.js

@@ -1,5 +1,3 @@
-// If you want to use other PostCSS plugins, see the following:
-// https://tailwindcss.com/docs/using-with-preprocessors
 module.exports = {
   plugins: {
     tailwindcss: {},

styles/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   padding: 0;

styles/tailwind.css

@@ -1,15 +0,0 @@
-/*
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-*/
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/*
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import './globals.css';
-@import 'tailwindcss/utilities';
-*/

tailwind.config.js

@@ -1,7 +1,5 @@
 module.exports = {
-  mode: 'jit',
-  purge: [],
-  // previously: './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'
+  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},