onwidget / tailnext Goto Github PK

View Code? Open in Web Editor NEW

253.0 11.0 102.0 6.1 MB

⭕️ TailNext: Free template using Next.js 14 app router and Tailwind CSS.

Home Page: https://tailnext.vercel.app/

License: MIT License

JavaScript 2.35% CSS 0.76% TypeScript 91.40% MDX 5.49%

astrowind javascript landing-page nextjs qwind reactjs tailwind tailwind-css-template tailwindcss theme

tailnext's People

Contributors

Stargazers

Watchers

Forkers

widgeter bitkarrot michael-seth mattdanielbrown isonomya blackypunk23 bocovo evoratec thisisutkarsh saidmounaim mandlamag sarvex pycleus banadda adityaguru149 yanagikane eriknewland jllahi ivarkol idea-garage templates-dev pabtab alonsoalex mikkivirus-dev meloinu johnisthedeveloper hashrei baltazartroisville vraj410 wanghaisheng uponhub spcfx al1056962 vstar1234 jordolang logesh-innoura vt2730 asxcro vuflysocial mister-bee umass-ml-club mrinalcs andersgerner pipaliyaatul hassan561979 shubhamnagota izzie12 ishworyunige ishandutta2007 maidabarrientos anil-shetty dyoungwd2 benjifriedman thbueno airdward deka27 lukarzmen ossinova dinhngoctu xdev818 alexduhem ladunjexa prototypa hunseto rmartis patrickbdevaney sirgama dtimon webdronez66 accountsware tutrandafc arey-pranay cowpeas hooliandro pplonski sjbat khainv3612 theapplegates holygeek00 rgcuffee toniagonzalez mha535 themediumm pic123 chikoulat aminebajji k0siara redevsorg kha333n houston-robotics-group flagg2 pitucode mirza7860 adepauldami calstu99 ragnarrlothbrok pavlsnak quoctruongdev gahcunha benzymeventures

tailnext's Issues

Does it make sense to enhance using @next/mdx

https://nextjs.org/docs/app/building-your-application/configuring/mdx

Hydration Mismatch Error in Next.js with Tailwind CSS and Dynamic Class Names

Issue Description:

I am encountering a persistent hydration warning in my Next.js application that uses Tailwind CSS for styling. The error persists even after removing dynamic class names, suggesting a deeper inconsistency in the server-client rendering process. This issue occurs across all major browsers (Chrome, Edge, Firefox) and also persists with a fresh fork of the TailNext repository.

Full Error Message: ( From Chrome)

app-index.js:33 Warning: Prop `className` did not match. Server: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans dark" Client: "motion-safe:scroll-smooth 2xl:text-[24px] __variable_aaf875 font-sans"
    at html
    at RootLayout (Server)
    at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:74:9)
    at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:82:11)
    at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:76:9)
    at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:84:11)
    at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:33:11)
    at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/ReactDevOverlay.js:87:9)
    at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/app/hot-reloader-client.js:321:11)
    at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:207:11)
    at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:113:9)
    at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:160:11)
    at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:577:13)
    at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:112:27)
    at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:117:11)

Steps to Reproduce:

Clone the repo and install dependencies.
Run the application in development mode using npm run dev.
Open the application in a browser to see the error in the console as the page loads.

Expected Behavior:

The application should hydrate without any warnings, with the server-rendered markup matching the client-rendered markup exactly.

Actual Behavior:

The application logs a warning about extra attributes (class, style) that are not expected during the hydration process, indicating a discrepancy between the server and client output.

Attempted Fixes:

I have tried removing all dynamic class and style attributes from the tag.
Ensured that the dynamic class names are consistent between server and client renders.
Checked for any third-party scripts that might alter the DOM before hydration.
Updated all related dependencies to their latest versions.

Additional Information:

Next.js version: 14.2.2

Code snippet from root layout.tsx component

return (
  <html lang="en" className={`motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans`}> 
    <head>
      <meta charSet="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body className="tracking-tight antialiased text-gray-900 dark:text-slate-300">
      <Providers>
        <Header />
        <Suspense fallback={<Loading />}>
          <main>{children}</main>
        </Suspense>
        <Footer />
      </Providers>
    </body>
  </html>
);

Issue line:

<html lang="en" className={motion-safe:scroll-smooth 2xl:text-[24px] ${customFont.variable} font-sans}>

Tags:

Next.js, hydration error, SSR, Tailwind CSS, bug

Lorem Ipsum in Features

Description

When you visit the website's features section, half of the features have relevant text while the other half has just random lorem ipsum. It should be kept uniform and adding relevant text for all the features seems like a fair solution to it.

Screenshot

Steps To Reproduce

Go to https://tailnext.vercel.app/
Scroll Down to the features section

Missing component [Team]

I can't find the component inside the about page. Where is it?

Also love the work you've done with it. It's amazing!

how i can change font sizes?

Hi how i can set font size? i need to change main menu font size plus the font itself. how i do that?

dev script error

Version: "next": "^13.4.1",

Error:

SyntaxError: Unexpected token '??='
    at wrapSafe (internal/modules/cjs/loader.js:1029:16)
    at Module._compile (internal/modules/cjs/loader.js:1078:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
    at Module.load (internal/modules/cjs/loader.js:979:32)
    at Function.Module._load (internal/modules/cjs/loader.js:819:12)
    at Module.require (internal/modules/cjs/loader.js:1003:19)
    at require (internal/modules/cjs/helpers.js:107:18)
    at Object.<anonymous> (/home/z/per/tailnext/node_modules/next/dist/telemetry/post-payload.js:17:20)
    at Module._compile (internal/modules/cjs/loader.js:1114:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @onwidget/[email protected] dev: 'next dev'
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @onwidget/[email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/z/.npm/_logs/2023-05-17T03_06_46_659Z-debug.log

Steps to reproduce:

npm install
npm run dev (Error occurs here)

Maybe it is because of the version of nextjs is incompatible, I am not sure.

OS: Ubuntu 20.04

First click on dark mode button doesn't change theme

Hi!

I've been exploring on integrating NextJS 13 (with new app dir) with TailwindCSS and I've found out your example. It does look great!

I've noticed some strange DarkMode toggle behaviour - if it's your first visit on the page (you can reproduce it by visiting your demo in incognito mode) then first click on the button does not change the theme. It changes the icon, but no the theme itself.

I was wondering if it might be connected with the prerendering NextJS does to Client Side components, so the "theme" state taken from next-themes is affected by this, but I'm not sure.

Worth noting - I'm on macOS 13.1, system preferences are set to Dark by default and I've been testing with newest Chrome and Firefox browsers.