Nextjs Css Globals

styling structure for nextjs

• in the globals.css file, set up the base styles for the website, including typography, color palette, and any global layout styles. this is where you can define the overall look and feel of the website, such as font choices, base font sizes, line heights, and color variables. have a small hsl brand color palette that is used to derive all colors for the website. so background, foreground, border, primary, secondary, etc. all derive from this palette. all the colors should be in hsl format to allow for easy manipulation of the colors using css variables and tailwind utilities. the color palette should be cohesive and reflect the artist's aesthetic and personality.
• use css react component libraries like shadcn/ui, reactbits.dev, magicui.design, uiverse.io, framer motion, and others to use in the website. customize these pre-built components as needed to fit the website's design and aesthetic.
• use the tailwind layer structure to organize styling tokens and classes. @layer theme → @theme inline → @layer base → @layer components. look at example_globals.css to see how to set up the layers and color palette. using this layer structure will keep styles organized and make it easier to manage as the website grows and evolves.
• for any custom styles that are specific to a single component, use css modules to scope the styles to that component and avoid global css conflicts. for example, if you have a custom carousel component that has specific styles, create a Carousel.module.css file and import it into the Carousel component. this way, the styles will only apply to the Carousel component and won't affect any other parts of the website. put custom styles in a folder called "customStyles" to keep them organized and separate from the global styles. this will also make it easier to find and manage custom styles as the website grows and evolves.