Skip to main content
Squeditor uses TailwindCSS as its utility framework. However, a common issue when using SCSS architectures alongside Tailwind is syncing variables (like colors and fonts) so they are available in both tailwindcss classes and standard SCSS stylesheets. Squeditor bridges this natively in the templates.

​
Configuration Bridge

Inside each project, the tailwind.config.js file is wired directly to resolve the deep SCSS properties. This ensures changes made in src/assets/scss/_tokens.scss propagate globally into standard bg-primary, text-accent, or font-sans classes. The config file
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.php',
    './src/**/*.html',
  ],
  theme: {
    extend: {
      colors: {
        // Semantic colors — support opacity modifiers (bg-body/10)
        body:    'rgb(var(--sq-color-body-bg-rgb) / <alpha-value>)',
        muted:   'rgb(var(--sq-color-muted-bg-rgb) / <alpha-value>)',
        // Brand colors map to RGB channels
        primary:   'rgb(var(--sq-color-primary-rgb) / <alpha-value>)',
        secondary: 'rgb(var(--sq-color-secondary-rgb) / <alpha-value>)',
        accent:    'rgb(var(--sq-color-accent-rgb) / <alpha-value>)',
      },
      fontFamily: {
        sans:  ['var(--sq-font-sans)'],
        serif: ['var(--sq-font-serif)'],
        mono:  ['var(--sq-font-mono)'],
      },
      // ...
    },
  },
  plugins: [
    function({ addUtilities }) {
      addUtilities({
        '.sq-bg-primary': {
          '--sq-contrast-color': 'var(--sq-color-primary-contrast)',
          'background-color': 'rgb(var(--sq-color-primary-rgb) / var(--tw-bg-opacity, 1))',
          'color': 'var(--sq-contrast-color)',
        },
        // ... secondary & accent
      })
    }
  ],
}

​
How It Works

Because the variables evaluate at runtime in the browser as CSS variables:
  1. SCSS defines the style channels: _tokens.scss assigns --sq-color-primary-rgb: 25 25 27; to :root.
  2. Tailwind maps the class: The config maps text-primary to color: rgb(var(--sq-color-primary-rgb) / <alpha-value>);.
  3. The Browser renders: It compiles as color: rgb(25 25 27 / 1).
If you use an opacity modifier like bg-primary/50, Tailwind safely replaces <alpha-value> with 0.5, guaranteeing dynamic transparency that matches the exact active theme variables.

​
Custom Plugins (addUtilities)

Squeditor relies on the plugins array to inject overarching background utilities (like .sq-bg-primary). While you could just define .sq-bg-primary inside your _utilities.scss, doing so hides that class from Tailwind’s view. By mapping it through addUtilities, Tailwind instantly auto-generates every modifier for those custom styles. This is why hover:sq-bg-primary, dark:sq-bg-accent, and group-[.uk-open]:sq-bg-secondary work natively without additional CSS.