Table of Contents & Menu
On this page
Navigation

Sharing Common CSS Between Themes

This guide explains how to share CSS and configurations between Hyvä themes, ideal for managing multiple child themes with slight variations. This promotes code reusability and simplifies maintenance.

Unlike Magento 2's traditional Luma theme, where LessCSS inheritance was automatic, Hyvä and TailwindCSS do not automatically inherit parent theme files (like Tailwind configurations and CSS) if they are missing in a child theme. You must explicitly import parent theme settings and styles.

Sourcing Parent Theme Files

Before importing CSS or configurations, ensure Tailwind CSS scans your parent theme's files for utility classes. Otherwise, styles used in the parent theme's .phtml or .xml files will not be included in your generated CSS.

  • Tailwind v3: Add parent theme file paths to the content array in your tailwind.config.js.
  • Tailwind v4: Manage this using the hyva-sources command and configuring include paths in your hyva.config.json file.

Note

For detailed instructions on setting up content configuration for a child theme, refer to the Hyvä child theme setup guide.

Importing Parent Theme Styles

After configuring content sourcing, you can import parent theme assets to avoid duplicating files and configurations.

Importing Shared CSS Files

To share styles, @import specific CSS files from a parent theme into your child theme's tailwind-source.css.

This works for any reusable CSS file. Avoid importing the entire parent tailwind-source.css, as it can lead to redundant tailwindcss imports. Instead, import only specific styles or files.

For example:

/* Import from Hyvä default theme */
@import "../../../../../../../vendor/hyva-themes/magento2-default-theme/web/tailwind/base";
@import "../../../../../../../vendor/hyva-themes/magento2-default-theme/web/tailwind/components";
@import "../../../../../../../vendor/hyva-themes/magento2-default-theme/web/tailwind/theme";
@import "../../../../../../../vendor/hyva-themes/magento2-default-theme/web/tailwind/utilities";

/* Import from another custom theme in the same folder */
@import "../../../acme-theme/web/tailwind/your-parent-theme-styles.css";

Tailwind v3: Importing Parent Theme tailwind.config.js

You can import a parent theme's Tailwind configuration using two methods:

Include as a Preset

The presets method inherits the parent theme’s entire configuration, allowing you to override any part. This is the simplest way to extend a parent theme.

For more details, see the Tailwind Presets Documentation.

const { mergeTailwindConfig } = require("@hyva-themes/hyva-modules");
const parentTheme = require("../../../../../../../vendor/hyva-themes/magento2-default-theme/web/tailwind/tailwind.config.js");

/** @type {import('tailwindcss').Config} */
module.exports = mergeTailwindConfig({
    presets: [parentTheme],  // Import the parent theme config
    content: [
        // Don't forget to configure the content for your child theme
        // and include the parent theme's content paths here.
    ],
    theme: {
        extend: {
            // Your overrides go here
        }
    }
});
Require Specific Parts of the Config

For more granular control, selectively require and merge only the necessary parts of the parent theme’s configuration.

This allows inheriting specific elements, such as screen breakpoints:

const { mergeTailwindConfig } = require("@hyva-themes/hyva-modules");
const parentTheme = require("../../../../../../../vendor/hyva-themes/magento2-default-theme/web/tailwind/tailwind.config.js");

/** @type {import('tailwindcss').Config} */
module.exports = mergeTailwindConfig({
    theme: {
        extend: {
            screens: {
                ...parentTheme.theme.extend.screens,  // Import parent breakpoints
                "3xl": "2200px",  // Add a custom breakpoint
            },
        },
    },
});

Sharing Styles with CSS Variables

CSS Variables (custom properties) offer a powerful way to create theme variations. A parent theme defines the structure using variables for colors, fonts, or spacing. Child themes then simply provide new values for these variables, creating a different look without altering underlying CSS or configuration.

This is the recommended approach for theming and creating variations like "dark mode".

Learn more about CSS Variables

For a complete guide on using CSS Variables with Tailwind CSS in Hyvä, refer to the CSS Variables + TailwindCSS documentation.

Defining CSS Variable Values

Declare CSS variables used in your Tailwind configuration so the browser recognizes their values. You have several options:

  • Global CSS: Add variables to the :root selector in a CSS file imported into your theme's tailwind-source.css.
  • Magento Theme Configuration: Define variables in the Magento Admin under Design Configuration → <STORE> → HTML Head → Scripts and Style Sheets.
  • .phtml Templates: Render variables in a <style> block, useful for dynamic values from Magento's configuration.
<style>
    :root {
        --color-primary: 160 100% 54%;
        --color-primary-darker: <?= $brandColor ?>; /* Dynamic value from Magento */
    }
</style>