> ## Documentation Index
> Fetch the complete documentation index at: https://docs.squeditor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# TailwindCSS

> Syncing SCSS tokens directly inside Tailwind dynamically.

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**

```javascript tailwind.config.js theme={null}
/** @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.