fix: munging around with tailwinds configuration

This commit is contained in:
NunoSempere 2021-12-08 13:49:29 +01:00
parent 5175b9c097
commit d2f1d8dd50
7 changed files with 12 additions and 27 deletions

View File

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

View File

@ -94,7 +94,7 @@ Your old input was: ${value}`
</button> </button>
&nbsp; &nbsp;
<button <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! Done!
</button> </button>

View File

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

View File

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

View File

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

View File

@ -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';
*/

View File

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