Description
CSS is a lang used to describe the presentation of a document written in a markup lang.
@layer base
The @layer base { ... } directive is used to establish foundation style and controls the cascade.
:root in @layer base { :root { ... } } is a pseudo-class used to select root elements, <html>, of the doc.
It is used to define global CSS vars and can be used by any other CSS rule.
@theme static
The @theme static { ... } directive is for managing theme variables for processing at build time.
main.css
Configure CSS vars, import TW and @nuxt/ui and define theme in main.css:
@import "tailwindcss";
@import "@nuxt/ui";
/* Theme variables */
@theme static {
--font-sans: 'Public Sans', sans-serif;
--breakpoint-3xl: 1920px;
/* Custom color palette */
--color-indigo-50: #EEF2FF;
--color-indigo-100: #E0E7FF;
--color-indigo-500: #6366F1;
--color-indigo-600: #4F46E5;
--color-indigo-900: #312E81;
}
/* Base layer for global styles */
@layer base {
:root {
/* UI design tokens */
--ui-radius: var(--radius-md);
--ui-container: 90rem;
--ui-bg: var(--ui-color-neutral-50);
--ui-text: var(--ui-color-neutral-900);
--ui-border: var(--ui-color-neutral-200);
}
/* Dark mode overrides */
.dark {
--ui-bg: var(--ui-color-neutral-950);
--ui-text: var(--ui-color-neutral-100);
--ui-border: var(--ui-color-neutral-800);
}
html {
font-family: var(--font-sans);
scroll-behavior: smooth;
}
body {
@apply bg-(--ui-bg) text-(--ui-text);
}
}
/* Components layer for custom component styles */
@layer components {
.page-container {
@apply max-w-[var(--ui-container)] mx-auto px-4;
}
.section {
@apply py-12 md:py-16;
}
.card {
@apply rounded-[var(--ui-radius)] bg-(--ui-bg-elevated) p-4 shadow-sm;
}
}