Skip to main content
Squeditor extends Tailwind CSS with a suite of custom utility classes mapped to the project’s foundational CSS variables. These utilities support native Tailwind variants (hover:, dark:, /opacity, etc.) and works seamlessly and magically to create stunning and professional multi-theme websites.

​
Theme Backgrounds

These classes feature built-in auto contrast. When applied, they don’t just change the background color—they automatically calculate and apply the correct text color to ensure perfect legibility, regardless of what theme is currently active.
​
sq-bg-primary
bg: rgb(--sq-color-primary-rgb)
Primary background, auto-shifts text to match --sq-color-primary-contrast.
​
sq-bg-secondary
bg: rgb(--sq-color-secondary-rgb)
Secondary background, auto-shifts text to match --sq-color-secondary-contrast.
​
sq-bg-accent
bg: rgb(--sq-color-accent-rgb)
Accent background, auto-shifts text to match --sq-color-accent-contrast.
Example
<div class="sq-bg-primary p-8 rounded-xl">
  <h3 class="text-h3 font-bold mb-2 text-inherit">Auto Contrast in Action</h3>
  <p class="opacity-80">
    This text automatically shifts to a readable contrast color because of the parent sq-bg-primary class.
  </p>
</div>
User text-inherit to forces an element to inherit the parent contrast color established by the theme backgrounds above.

​
Theme Colors

These utilities are essential for the framework’s multi-theme and auto light/dark schema engine. Because they map to CSS variables rather than hardcoded hex values, the entire site’s color palette can swap instantly based on user preferences or the active theme.
​
primary, secondary, accent
rgb(var(--sq-color-*-rgb) / <alpha-value>)
Brand color palette. Supports opacity modifiers natively (e.g. bg-primary/50).
​
body, muted
rgb(var(--sq-color-*-rgb) / <alpha-value>)
Structural semantic backgrounds and muted text panes.
​
light, dark
rgb(var(--sq-color-*-rgb) / <alpha-value>)
Specific light/dark mode forced backgrounds.
Example
<div class="bg-body p-6 border border-primary/20 rounded-lg">
  <span class="text-accent font-mono text-sm uppercase tracking-wide">New Feature</span>
  <h4 class="text-heading text-h4 mt-2 mb-4">Multi-theme enabled content</h4>
  <button class="bg-primary hover:bg-secondary text-white px-4 py-2 rounded transition-colors">
    Get Started
  </button>
</div>

​
Text Sizes

​
text-display-{1-6}
Sizes: 8rem -> 3.5rem
Massive display header sizes. Pre-configured tightly with negative tracking (letter-spacing) to ensure visual punch.
​
text-h{1-6}
Sizes: 3rem -> 1rem
Standard heading sizing scale. Sized responsively and pre-configured with tight tracking.
Example
<div class="flex flex-col gap-4">
  <h1 class="text-display-4 font-bold">Massive Hero Headline</h1>
  <h2 class="text-h2 text-heading">Standard Section Title</h2>
  <h3 class="text-h5 text-muted uppercase tracking-wider">Small Eyebrow Text</h3>
</div>

​
Text Fonts

​
font-sans
var(--sq-font-sans)
The primary sans-serif framework font defined in the styling dashboard.
​
font-serif
var(--sq-font-serif)
The secondary serif framework font.
​
font-mono
var(--sq-font-mono)
The active monospace framework font.
Example
<article class="font-sans">
  <h2 class="font-serif text-h3 italic mb-4">A Serif Heading for Elegance</h2>
  <p class="text-body mb-4">
    Our standard sans-serif font is highly legible for long-form reading and structural layout.
  </p>
  <code class="font-mono bg-muted px-2 py-1 rounded">
    npm install @squeditor/framework
  </code>
</article>