---
name: feedback-scss
description: SCSS architecture patterns that work in this project
metadata: 
  node_type: memory
  type: feedback
  originSessionId: 46f569a9-d561-4376-8644-c0a07c47905c
---

Each SCSS partial (`_typography.scss`, `_animations.scss`) must have its own `@use 'variables' as *;` at the top to access mixins, even when `main.scss` also imports it.

**Why:** Sass module system (`@use`) scopes imports per-file. Vite's `additionalData` only runs for component `<style lang="scss">` blocks, not for Sass-loaded partials.

**How to apply:** Any new SCSS partial that uses mixins/variables must include `@use 'variables' as *;` as its first line. Do NOT rely on Vite additionalData for partials loaded via `@use` in main.scss.

Tailwind v4 must be imported in a separate `src/styles/tailwind.css` (`@import "tailwindcss"`) and imported from `main.ts` before `main.scss`. Importing it inside a `.scss` file triggers Sass `@import` deprecation errors.