config: 🔧 removed tailwind/typography and added css

BREAKING CHANGE: - Using tailwindcss/jit compiler for faster development

.stylelintrc

@@ -7,7 +7,9 @@
         "ignoreAtRules": [
           "extends",
           "tailwind",
-          "layer"
+          "layer",
+          "screen",
+          "variants"
         ]
       }
     ],

components/Container.tsx

@@ -49,7 +49,7 @@ const Container: React.FC<Props> = ({ children, ...customMeta }): JSX.Element =>
       {router.asPath === '/' ? (
         <main className="flex flex-col justify-center py-16">{children}</main>
       ) : (
-        <div className="max-w-full mx-auto prose-sm prose md:prose 2xl:prose-2xl dark:prose-dark md:max-w-3xl 2xl:max-w-6xl">
+        <div className="max-w-full mx-auto prose md:max-w-3xl 2xl:max-w-6xl">
           {mounted && <Navigation theme={theme} onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')} />}
           <main className="pt-8 pb-32">{children}</main>
         </div>

package.json

@@ -18,7 +18,7 @@
     "@mdx-js/loader": "^1.6.22",
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
-    "@tailwindcss/typography": "^0.4.0",
+    "@tailwindcss/jit": "^0.1.4",
     "@types/eslint": "^7.2.7",
     "@types/eslint-plugin-prettier": "^3.1.0",
     "@types/mdx-js__react": "^1.5.3",

pages/index.tsx

@@ -6,9 +6,7 @@ const IndexPage = (): JSX.Element => (
     <h1 className="text-4xl text-black dark:text-white">Hello Next.js 👋</h1>
     <p>
       <Link href="/blog">
-        <a className="leading-6 underline transition-colors text-black-600 hover:text-blue-600 visited:text-purple-600">
-          Blog again
-        </a>
+        <a className="leading-6">Blog again</a>
       </Link>
     </p>
   </Container>

postcss.config.js

@@ -1,6 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/jit': {},
     autoprefixer: {},
   },
 }