Foundation Template starter kit ships with a built-in theme system by default - enabling you to focus on feature development right from the start.
This template uses Tailwind’s functions and directives extensively. Read more about it here - Functions and Directives
Note: This document will evolve over time as and when new features are added.
Used to register design tokens with Tailwind compiler. The only purpose is to declare intent semantically.
File: src\styles\theme.css
Used to defined run-time values. This is where your design system’s colors live. The :root and .dark styles are auto-applied based on light/dark theme.
File: src\styles\tokens.css
Used to define structural styles, for example - containers, page sections, etc.
File: src\styles\layout.css
Used to define text presentation styles, for example - font weight, size, etc.
File: src\styles\typography.css
Used to define text presentation styles, for example - font weight, size, etc.
File: src\styles\utility.css
Used to define text presentation styles, for example - font weight, size, etc.
File: src\styles\components\[component-name].css