Skip to content

Sharing Common CSS Between Themes

This approach is ideal for managing multiple child themes with slight variations across different websites.
It promotes code reusability and simplifies maintenance.

Using CSS Variables

CSS Variables (custom properties) allow you to centralize styling and enable easy customization across themes. By defining a base theme and customizing it using variables, you can maintain consistent design while allowing flexibility, such as supporting dark mode.

Update tailwind.config.js

First, replace desired properties in your tailwind.config.js with CSS variables. Here's an example using primary colors:

module.exports = hyvaModules.mergeTailwindConfig({
    theme: {
        extend: {
            colors: {
                primary: {
                    lighter: 'hsl(var(--color-primary-lighter) / <alpha-value>)',
                    DEFAULT: 'hsl(var(--color-primary) / <alpha-value>)',
                    darker: 'hsl(var(--color-primary-darker) / <alpha-value>)',
                },
            },
        },
    },
});

This setup uses CSS color functions (hsl or rgb) to retain TailwindCSS's opacity modifier functionality.

Tip

We now have a newer solution for easier customization and implementation, though it has slightly less browser support. Learn more on our dedicated CSS Variables + TailwindCSS Docs page.

Define CSS Variables

After configuring tailwind.config.js, define the CSS variables in your styles. Here are a few options:

  • Global CSS: Add variables to the root selector (:root) in a separate CSS file. 
    :root {
  --color-primary: 160 100% 54%;
  --color-primary-lighter: 20 255 175; /* Example using RGB syntax */
}
  • Magento Theme Configuration: Define variables in the Magento Admin under
    Design Configuration → <STORE> → HTML Head → Scripts and Style Sheets.
  • PHTML Files: Use PHP in PHTML files to define variables dynamically. 
    <style>
:root {
  --color-primary: 160 100% 54%;
  --color-primary-darker: <?= $brandColor ?>; /* Dynamic value from Magento */
}
</style>
  • Third-party Solutions: Some libraries allow you to set CSS variables directly within your TailwindCSS configuration.

Important Notes:

  • Opacity Modifiers: Hex color values aren't compatible with Tailwind's opacity modifiers when using CSS variables. Use HSL or RGB syntax for opacity support.
  • Disabling Opacity Modifiers: If you don't need opacity modifiers, you can use any color syntax (hex, hsl, rgb) but at the cost of losing Tailwind's built-in opacity functionality.

Importing from a Parent Theme

In Magento 2's traditional Luma theme, CSS inheritance via LessCSS was automatic, but this is not the case with Hyvä and TailwindCSS.

In Hyvä, files such as Tailwind configurations and CSS do not inherit automatically from a parent theme if they are missing in a child theme.

This means that, unlike Magento’s Luma setup, where LessCSS files were inherited by default, you will need to explicitly import settings and styles from the parent theme to the child theme.

This can be done by adjusting the import paths to point to the parent theme or a shared folder, which avoids manual copying of files.

Note

Before proceeding, ensure that your purge settings are properly configured to reference the parent theme's phtml and xml files. If you're unsure how to do this, refer to the guide on setting up a child theme with Hyvä.

Importing tailwind.config.js

There are two main methods for importing the Tailwind configuration from a parent theme.

Using Presets

The presets method allows you to inherit the parent theme’s configuration and override any part of it. This is the simplest and most straightforward way to work with configurations from an external source, similar to how TailwindCSS loads its default configuration by default.

For more details, check 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: [
        // Include your own purge config for this theme’s phtml and layout XML files
        "../../**/*.phtml",
        "../../*/layout/*.xml",
        "../../*/page_layout/override/base/*.xml",
        // Parent theme’s phtml and XML files (if this is a child theme)
        "../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml",
        "../../../../../../../vendor/hyva-themes/magento2-default-theme/*/layout/*.xml",
        "../../../../../../../vendor/hyva-themes/magento2-default-theme/*/page_layout/override/base/*.xml",
        // Optionally include app/code phtml files if needed
        //'../../../../../../../app/code/**/*.phtml',
    ],
});

Using Imports

For more granular control, you can selectively import specific parts of the parent theme’s Tailwind configuration. This method allows you to extend or modify only the parts you need, such as 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 custom breakpoints
            },
            // Extend or modify other parts of the configuration as needed
        },
    },
});

This method gives you the flexibility to inherit only the specific parts of the parent configuration that you want, while applying your own customizations.

Importing CSS Files

In addition to the Tailwind configuration, you can also import CSS files from the parent theme. This works similarly to importing other files, using relative paths to reference the parent theme’s CSS files. For example:

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

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

This works for any CSS file you need to reuse from a parent theme. However, avoid importing the tailwind-source.css file, as this could lead to redundant tailwindcss imports. Instead, focus on importing specific styles or files that should be shared between the parent and child themes.

If you have multiple shared files across themes, you can group these imports into a dedicated shared CSS file, similar to how the theme.css file is structured in the Hyvä default theme.