From d2f1d8dd50357429ebae15bef345664c90282d19 Mon Sep 17 00:00:00 2001
From: NunoSempere <nuno.sempere@protonmail.com>
Date: Wed, 8 Dec 2021 13:49:29 +0100
Subject: [PATCH] fix: munging around with tailwinds configuration

---
 lib/comparisonView.js | 10 +++++-----
 lib/datasetChanger.js |  2 +-
 pages/_app.js         |  2 +-
 postcss.config.js     |  2 --
 styles/globals.css    |  4 ++++
 styles/tailwind.css   | 15 ---------------
 tailwind.config.js    |  4 +---
 7 files changed, 12 insertions(+), 27 deletions(-)
 delete mode 100644 styles/tailwind.css

diff --git a/lib/comparisonView.js b/lib/comparisonView.js
index ad6376a..0bd4bb1 100644
--- a/lib/comparisonView.js
+++ b/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
diff --git a/lib/datasetChanger.js b/lib/datasetChanger.js
index a46cc93..e404b6d 100644
--- a/lib/datasetChanger.js
+++ b/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>
diff --git a/pages/_app.js b/pages/_app.js
index 588fe6f..bdf791a 100644
--- a/pages/_app.js
+++ b/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 }) {
diff --git a/postcss.config.js b/postcss.config.js
index 3fa0a95..33ad091 100644
--- a/postcss.config.js
+++ b/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: {},
diff --git a/styles/globals.css b/styles/globals.css
index 8d864a7..b29a064 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   padding: 0;
diff --git a/styles/tailwind.css b/styles/tailwind.css
deleted file mode 100644
index ef83cf1..0000000
--- a/styles/tailwind.css
+++ /dev/null
@@ -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';
-*/
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index c8c8476..d7f0874 100644
--- a/tailwind.config.js
+++ b/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: {},