Prove Thatf Z z2 is Continuous and Differentiable
ChristianOConnor Asks: Tailwind and DaisyUI in a Next.js app, I can't get the navbar to stretch across the entire webpage
I have a next.js app that uses DaisyUI which is a tailwind based css component library. The problem is that I can't get any DaisyUI navbar to stretch all the way across the webpage horizontally. The navbar components stack up vertically crowding to the left side of the page.
This is the way that it's supposed to look
So I copied the JSX code from the DaisyUI example into my next.js app's Layout but as you can see from the first image it didn't work.
This is the relevant code from my app:
"_app.tsx"
Code:
import '../styles/globals.css' import type { AppProps } from 'next/app' import Layout from '../components/Layout' function MyApp({ Component, pageProps }: AppProps) { return ( <Layout> <Component {...pageProps} /> </Layout> ) } export default MyApp "index.tsx"
Code:
import type { NextPage } from 'next' import { useState } from 'react' import styles from '../styles/Home.module.css' const Home: NextPage = () => { return ( <div className="hero min-h-screen bg-base-200"> <div className="hero-content text-center"> <div className="max-w-md"> <h1 className="text-5xl font-bold">Hello visitor</h1> <p className="py-6">This is a placeholder for the landing page of my website</p> <button className="btn btn-primary">Get Started</button> </div> </div> </div> ) } export default Home "components/Layout.tsx"
Code:
import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' const Layout = ({ children } : { children: any }) => { return ( <div data-theme="synthwave" className={styles.container}> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <link rel="icon" href="/favicon.ico" /> </Head> <div className="navbar bg-base-100"> <div className="navbar-start"> <div className="dropdown"> <label tabIndex={0} className="btn btn-ghost btn-circle"> <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16M4 18h7" /></svg> </label> <ul tabIndex={0} className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-52"> <li><a>Homepage</a></li> <li><a>Portfolio</a></li> <li><a>About</a></li> </ul> </div> </div> <div className="navbar-center"> <a className="btn btn-ghost normal-case text-xl">daisyUI</a> </div> <div className="navbar-end"> <button className="btn btn-ghost btn-circle"> <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg> </button> <button className="btn btn-ghost btn-circle"> <div className="indicator"> <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg> <span className="badge badge-xs badge-primary indicator-item"></span> </div> </button> </div> </div> <main className={styles.main}> {children} </main> <footer className={styles.footer}> <a href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > Powered by{' '} <span className={styles.logo}> <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} /> </span> </a> </footer> </div> ); }; export default Layout Also this is the relevant css files:
"globals.css"
Code:
@tailwind base; @tailwind components; @tailwind utilities; html, body { padding: 0; margin: 0; font-family: 'Titillium Web', sans-serif; } a { color: inherit; text-decoration: none; } * { box-sizing: border-box; } @media (prefers-color-scheme: dark) { html { color-scheme: dark; } body { color: white; background: black; } } /* titillium-web-200 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 200; src: url('/fonts/titillium-web-v15-latin-200.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-200.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-200.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-200.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-200italic - latin */ @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 200; src: url('/fonts/titillium-web-v15-latin-200italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-200italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-200italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-200italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-200italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-200italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-300 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 300; src: url('/fonts/titillium-web-v15-latin-300.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-300.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-300.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-300italic - latin */ @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 300; src: url('/fonts/titillium-web-v15-latin-300italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-300italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-300italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-regular - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 400; src: url('/fonts/titillium-web-v15-latin-regular.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-regular.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-regular.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-italic - latin */ @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 400; src: url('/fonts/titillium-web-v15-latin-italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-600 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 600; src: url('/fonts/titillium-web-v15-latin-600.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-600.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-600.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-600.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-600italic - latin */ @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 600; src: url('/fonts/titillium-web-v15-latin-600italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-600italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-600italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-700 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 700; src: url('/fonts/titillium-web-v15-latin-700.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-700.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-700.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-700italic - latin */ @font-face { font-family: 'Titillium Web'; font-style: italic; font-weight: 700; src: url('/fonts/titillium-web-v15-latin-700italic.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-700italic.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-700italic.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* titillium-web-900 - latin */ @font-face { font-family: 'Titillium Web'; font-style: normal; font-weight: 900; src: url('/fonts/titillium-web-v15-latin-900.eot'); /* IE9 Compat Modes */ src: local(''), url('/fonts/titillium-web-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/titillium-web-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/titillium-web-v15-latin-900.woff') format('woff'), /* Modern Browsers */ url('/fonts/titillium-web-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/titillium-web-v15-latin-900.svg#TitilliumWeb') format('svg'); /* Legacy iOS */ } /* Old font-family font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; */ "Home.module.css"
Code:
.container { padding: 0 2rem; } .main { min-height: 100vh; padding: 4rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } .footer { display: flex; flex: 1; padding: 2rem 0; border-top: 1px solid #eaeaea; justify-content: center; align-items: center; } .footer a { display: flex; justify-content: center; align-items: center; flex-grow: 1; } .title a { color: #0070f3; text-decoration: none; } .title a:hover, .title a:focus, .title a:active { text-decoration: underline; } .title { margin: 0; line-height: 1.15; font-size: 4rem; } .title, .description { text-align: center; } .description { margin: 4rem 0; line-height: 1.5; font-size: 1.5rem; } .code { background: #fafafa; border-radius: 5px; padding: 0.75rem; font-size: 1.1rem; font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; } .grid { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 800px; } .card { margin: 1rem; padding: 1.5rem; text-align: left; color: inherit; text-decoration: none; border: 1px solid #eaeaea; border-radius: 10px; transition: color 0.15s ease, border-color 0.15s ease; max-width: 300px; } .card:hover, .card:focus, .card:active { color: #0070f3; border-color: #0070f3; } .card h2 { margin: 0 0 1rem 0; font-size: 1.5rem; } .card p { margin: 0; font-size: 1.25rem; line-height: 1.5; } .logo { height: 1em; margin-left: 0.5rem; } @media (max-width: 600px) { .grid { width: 100%; flex-direction: column; } } @media (prefers-color-scheme: dark) { .card, .footer { border-color: #222; } .code { background: #111; } .logo img { filter: invert(1); } } Also this is the tailwind.config.js file:
Code:
/** @type {import('tailwindcss').Config} */ module.exports = { //... content: ['./pages/**/*.{js,ts,jsx,tsx}'], plugins: [require("daisyui")], daisyui: { styled: true, themes: true, base: true, utils: true, logs: true, rtl: false } } I don't understand why the navbar is getting scrunched together on the left side. As you can see, the synthwave theme is being loaded just fine. Also the Head, "Hello visitor" hero, Get Started button, etc... are all loading fine. The navbar just won't stretch. So why is the navbar not extending across the entire page horizontally?
Source: https://solveforum.com/forums/threads/show-that-f-is-continuous-on-0-%E2%88%9E-and-differentiable-on-0-%E2%88%9E.739293/
0 Response to "Prove Thatf Z z2 is Continuous and Differentiable"
إرسال تعليق