Next/font & updated tailwind config (#52)

* refactor: use `next/font` for more optimized font loading * fix: update tailwind configuration to v3, remove unneeded properties & font @see https://tailwindcss.com/docs/upgrade-guide * fix: remove font-sans classname
laravel · Jun 9, 2024 · f2e0a46 · f2e0a46
1 parent e56e01c
commit f2e0a46
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 23 deletions.
diff --git a/src/app/(auth)/layout.js b/src/app/(auth)/layout.js
@@ -9,7 +9,7 @@ export const metadata = {
 const Layout = ({ children }) => {
     return (
         <div>
-            <div className="font-sans text-gray-900 antialiased">
+            <div className="text-gray-900 antialiased">
                 <AuthCard
                     logo={
                         <Link href="/">

diff --git a/src/app/global.css b/src/app/global.css
@@ -1,5 +1,3 @@
-@import url("https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap");
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,14 +1,21 @@
+import { Nunito } from 'next/font/google'
 import '@/app/global.css'
 
-export const metadata = {
-    title: 'Laravel',
-}
+const nunitoFont = Nunito({
+    subsets: ['latin'],
+    display: 'swap',
+})
+
 const RootLayout = ({ children }) => {
     return (
-        <html lang="en">
+        <html lang="en" className={nunitoFont.className}>
             <body className="antialiased">{children}</body>
         </html>
     )
 }
 
+export const metadata = {
+    title: 'Laravel',
+}
+
 export default RootLayout
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,19 +1,5 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
 module.exports = {
-    content: ['./src/**/*.js'],
-    darkMode: 'media',
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
-            },
-        },
-    },
-    variants: {
-        extend: {
-            opacity: ['disabled'],
-        },
-    },
+    content: ['./src/**/*.{js,jsx,ts,tsx}'],
+    theme: {},
     plugins: [require('@tailwindcss/forms')],
 }