Update config for tailwind

Author: handotdev

package-lock.json

@@ -17,22 +17,22 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-hot-toast": "^2.1.1",
-    "react-simple-code-editor": "^0.11.0",
-    "tailwindcss": "^3.0.15"
+    "react-simple-code-editor": "^0.11.0"
   },
   "devDependencies": {
     "@types/react": "17.0.30",
     "@typescript-eslint/eslint-plugin": "^5.1.0",
     "@typescript-eslint/parser": "^5.1.0",
-    "autoprefixer": "^10.3.7",
+    "autoprefixer": "^10.4.2",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-next": "11.1.2",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "postcss": "^8.3.9",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.15",
     "typescript": "4.4.4"
   }
 }

package.json

@@ -1,5 +1,5 @@
 import type { AppProps } from 'next/app';
-import 'tailwindcss/tailwind.css';
+import '../styles/global.css';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;

pages/_app.tsx

@@ -7,10 +7,8 @@ import {
   XIcon,
   MailIcon,
 } from '@heroicons/react/outline';
-import axios from 'axios';
 import CodeEditor from '../components/CodeEditor';
 import Output from '../components/Output';
-import { LanguagePrediction } from './api/detect';
 
 const navigation = [
   { name: 'Documentation', href: 'https://nicedoc.io/mintlify/inferapp', current: false },
@@ -75,9 +73,7 @@ export default function Example() {
     if (newCode.length < 40) {
       setOutputDisplay(`You need to add another ${40 - newCode.length} characters to detect`);
     } else {
-      const detectedResponse = await axios.post('/api/detect', { code: newCode });
-      const detected = detectedResponse.data as LanguagePrediction;
-      const detectedLanguage = detected.language || '';
+      const detectedLanguage = '';
       setOutputDisplay(detectedLanguage);
     }
   };
@@ -94,7 +90,7 @@ export default function Example() {
               )}
             >
               <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
-                <div className="relative h-16 flex items-center justify-between lg:border-b lg:border-sky-800">
+                <div className="relative h-16 flex items-center justify-between">
                   <div className="px-2 flex items-center lg:px-0">
                     <div className="flex-shrink-0">
                       <div className="h-7 w-7">

pages/api/detect.ts

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

pages/index.tsx

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

postcss.config.js

@@ -1,15 +1,9 @@
 module.exports = {
-  purge: [],
-  darkMode: false, // or 'media' or 'class'
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx}',
+    './components/**/*.{js,ts,jsx,tsx}',
+  ],
   theme: {
-    extend: {
-      colors: {
-        primary: '#0c8c5e',
-        secondary: '#18e299',
-      },
-    },
-  },
-  variants: {
     extend: {},
   },
   plugins: [],