Instruction file imported from CraigDevJohnson/portfolio (
.github/instructions/tailwind.instructions.md). Copyright stays with the author.
Tailwind CSS Authoring Rules
⚠ Never edit the generated output
cmd/web/static/css/tailwind.css is compiled output. Do not edit it.
Edit the source files under cmd/web/tailwind/ and run task tailwind-build.
Source file roles
| File | Purpose |
|---|---|
app.css |
Entry point — imports all other files in order; also declares @source globs |
theme.css |
Color palette tokens and breakpoints |
shared.css |
Spacing, radius, typography, timing, and --header-height custom properties |
base.css |
Base element styles and :root semantic aliases |
components.css |
Shared component classes for layout, buttons, cards, and forms |
pages/*.css |
Route-owned styles for the public portfolio pages |
soccer.css |
Soccer-page-specific components (login modal, hero overlay, games section) |
portal.css |
Management portal and portal-preview styles |
Design tokens
Always use tokens from theme.css and shared.css instead of raw values.
- Colors:
--color-primary-*,--color-secondary-*,--color-accent-*,--color-carbon-*, and semantic aliases such as--color-copy-primary,--color-copy-secondary,--color-canvas,--color-panel. - Spacing:
--space-*(e.g.,--space-4,--space-8). - Radius:
--radius-*(e.g.,--radius-sm,--radius-xl). - Typography:
--font-*,--leading-*. - Timing:
--duration-*,--ease-*.
Do not introduce ad-hoc hex values or raw pixel sizes.
Adding new component styles
- Add shared classes to
components.css; add route-owned rules to the matchingpages/*.css,soccer.css, orportal.csssource. - Follow the existing
@applypattern for component classes. - Rebuild with
task tailwind-build(ortask tailwind-watchduring development).
Page structure
All portfolio content pages should be wrapped in .page-kit-page to apply the correct color scheme.
Common layout classes (defined in components.css):
.page-section/.page-section-tight— section vertical spacing.page-hero-title/.page-hero-description— hero typography.page-section-title/.page-section-subtitle— section headings