TailwindCSS

Linear Admin adopts a utility-first CSS methodology and relies heavily on TailwindCSS for its styling needs. The project takes advantage of nearly all the features that TailwindCSS offers, including color modes, responsive design utilities, pseudo-selectors, and more. You can locate the primary TailwindCSS configuration file at /tailwind.config.ts.

CSS Variables

Linear Admin employs CSS custom properties (variables) alongside TailwindCSS to handle color-mode specific attributes. These variables are structured to facilitate seamless switching between light and dark modes, as illustrated below:

:root {
  --body: 207 54% 33%;
  --body-image: url("/img/misc/body.jpg");
  --headings: 210 57% 26%;
  --link: 209 88% 46%;
  ...
}

.dark {
  --body: 207 100% 81%;
  --body-image: url("/img/misc/body-dark.png");
  --headings: 207 100% 87%;
  --link: 209 100% 66%;
  ...
}

You can find all the available CSS variables in /app/globals.css.

Font

Linear Admin uses Roboto Contensed as the default font for both body copy and headings. It’s a google font from https://fonts.google.com/specimen/Roboto+Condensed. For monospace, SFMono-Regular is used.

To load the fonts from Google Fonts, Linear Admin utilizes the next/font package. For detailed instructions on using this package and adding or updating fonts, please refer to the documentation at https://nextjs.org/docs/app/building-your-application/optimizing/fonts.