Build a Fullstack App from Scratch V2 (feat Next.js)

Global CSS

We'll be using Tailwind CSS for all of our styling, but we have a little bit of global styling we need to add as well.

@layer base {
  [data-nextjs-scroll-focus-boundary] {
    display: contents;
  }
}

* {
  box-sizing: border-box;
}

.rainbow-mesh {
  background-color: hsla(0, 100%, 50%, 1);
  background-image: radial-gradient(
      at 40% 20%,
      hsla(28, 100%, 74%, 1) 0px,
      transparent 50%
    ), radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%);
}

.candy-mesh {
  background-color: #ff99ee;
  background-image: radial-gradient(
      at 99% 6%,
      hsla(195, 69%, 67%, 1) 0px,
      transparent 50%
    ), radial-gradient(at 55% 88%, hsla(189, 74%, 69%, 1) 0px, transparent 50%),
    radial-gradient(at 53% 27%, hsla(271, 78%, 63%, 1) 0px, transparent 50%),
    radial-gradient(at 89% 89%, hsla(317, 89%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 35% 44%, hsla(337, 92%, 61%, 1) 0px, transparent 50%);
}

.glass {
  backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(255, 255, 255, 0.4);
}

[data-nextjs-scroll-focus-boundary] {
  display: contents;
}