Adding classes to the body of a NextJS application

If you want to add a class (className) to the body tag of a a NextJS page, you'll need to add it via JavaScript in the useEffect (or componentDidMount if you're using class-based components) Lifecycle function.

This adds TailWindCSS's font-light and text-gray-700 classes to the body tag.

import { useEffect } from 'react';
import type { NextPage } from 'next';

import Nav from './Nav';
import Header from './Header';
import Footer from './Footer';

const Layout: NextPage = ({children}) =>
{
    useEffect(() =>
    {        
        document.body.classList.add("font-light");
        document.body.classList.add("text-gray-700");
    });

    return (
        <>
        <div>       
            <Header />
            <header className="bg-white"> 
                <Nav />
            </header>
            <div>                
                {children}
            </div>            
        </div>        
        <Footer />
        </>
        );
}

export default Layout

Adding classes to the body of a NextJS application

Comments

More from this blog

Email validity checker using Google's JSON API for DNS over HTTPS (DoH) in Google Sheets

Getting picoclaw to work on Windows

The core use-case of TypeScript

Hashnode's GraphQL API for RSS feeds

make makemigrations work again

Command Palette

Comments

More from this blog