feat: add shadow classes for page contents

4 weeks ago · 0c62c97eba
parent 5fa9bf3f82
commit 0c62c97eba
1 changed files with 14 additions and 0 deletions
--- a/frontend/src/css/tailwind.css
+++ b/frontend/src/css/tailwind.css
@ -37,6 +37,20 @@
@source '../../index.html';
@source '../**/*.{vue,js}';

+/*
+  Utilities a page author can reach for that no template here writes.
+
+  A rendered page is injected into `.page-contents` as markup, and the classes on it come from what
+  someone typed into the editor -- through `markdown-it-attrs` or raw HTML -- which is not a source
+  file and can never be scanned. `@source inline()` emits these whether or not anything references
+  them, which is what makes them dependable for content: the alternative is a class that works only
+  for as long as some unrelated component happens to still use it.
+
+  Kept to the elevation ramp deliberately. Every utility emitted here is in the build for every
+  visitor of every site, so this list earns its weight by being short.
+*/
+@source inline('shadow-{2xs,xs,sm,md,lg,xl,2xl}');
+
 /*
  Dark mode is driven by the `body--dark` class on <body>, which is what the app has always toggled
  (Quasar's `$q.dark.set()` writes it). Keying Tailwind's `dark:` variant off the same class means