Tailwind code refresh
Unanswered
starload7744 posted this in #help-forum
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '../styles/globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Threads',
description: 'Threads app facilitates seamless and private communication through instant messaging and media sharing'
}
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={
{children}
</body>
</html>
)
}
When i write this code it works exactly as it should but as soon as i refresh the page the tailwind doesnt work anymore .
Whereas this code below works perfectly :
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '../styles/globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Threads',
description: 'Threads app facilitates seamless and private communication through instant messaging and media sharing'
}
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={${inter.className} bg-none} style={{ backgroundImage: url('/assets/images/new_background.png'), display : 'flex' , height : '100vh' , alignItems : 'center' , justifyContent : 'center' , boxSizing : 'border-box'}}>
{children}
</body>
</html>
)
}
Can you explain why is that?
import { Inter } from 'next/font/google'
import '../styles/globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Threads',
description: 'Threads app facilitates seamless and private communication through instant messaging and media sharing'
}
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={
${inter.className} bg-[url(/assets/images/new_background.png)] flex justify-center items-center h-screen}>{children}
</body>
</html>
)
}
When i write this code it works exactly as it should but as soon as i refresh the page the tailwind doesnt work anymore .
Whereas this code below works perfectly :
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '../styles/globals.css'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Threads',
description: 'Threads app facilitates seamless and private communication through instant messaging and media sharing'
}
export default function AuthLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={${inter.className} bg-none} style={{ backgroundImage: url('/assets/images/new_background.png'), display : 'flex' , height : '100vh' , alignItems : 'center' , justifyContent : 'center' , boxSizing : 'border-box'}}>
{children}
</body>
</html>
)
}
Can you explain why is that?