Skip to content

Global NPM Packages

Danger

These steps are required only if you plan to maintain a single NPM installation for multiple themes. This method requires advanced knowledge of Node.js packages and TailwindCSS purging.

We do not provide basic setup support for this! Only reach out for support if you encounter a bug.

If you're looking for a setup similar to Luma or an SCSS-based workflow (like Snowdog Frontools), you’re in the right place.

However, if your goal is simply to share CSS between themes, we recommend reviewing our Shared CSS documentation first. It may offer a simpler solution than using this method.

Using NPM Packages Globally

While it's generally not recommended to install all packages globally, some packages like browser-sync can be used as global dependencies.

For this example, we’ll use browser-sync since it's often used globally.

Steps:

  1. Remove browser-sync from your theme’s dependencies with: 
    npm rm browser-sync
  2. Install browser-sync globally with: 
    npm install -g browser-sync

Now you can use browser-sync globally across your themes without needing to install it in each one.

Other NPM packages can work in a similar way, but it's not always advisable. Be sure to check whether the package is suitable for global installation.

Using a Project-Level Global Script

There are two primary ways to handle global scripts:

  1. Use a bash or PHP script to run the necessary NPM scripts within each theme. This allows you to manage multiple themes from the root of your project without manually navigating into each theme directory.

  2. Move all NPM dependencies to the project root, similar to the Luma workflow or SCSS compilers. This approach manages multiple themes through configuration at the project level.

We will focus on the second option as it provides a more structured setup.

Steps:

  1. Copy the following files from the default Hyvä theme to the root of your Magento project:

    • package.json
    • package-lock.json
    • browser-sync.config.js
    • postcss.config.js

  2. Run the following command to install the dependencies: 

    npm install

  3. In the root package.json, update the NPM scripts to correctly point to each theme's tailwind.config.js. This ensures that each theme uses its respective Tailwind configuration.

Example package.json

Here’s an example of a root package.json that contains build commands for two themes (default and anvil):

{
  ...
  "scripts": {
    ...
    "build-default": "npx tailwindcss --postcss -i app/design/frontend/Acme/default/web/tailwind/tailwind-source.css -o app/design/frontend/Acme/default/web/css/styles.css -c app/design/frontend/Acme/default/web/tailwind/tailwind.config.js --minify",
    "build-anvil": "npx tailwindcss --postcss -i app/design/frontend/Acme/anvil/web/tailwind/tailwind-source.css -o app/design/frontend/Acme/anvil/web/css/styles.css -c app/design/frontend/Acme/anvil/web/tailwind/tailwind.config.js --minify",
    "watch-default": "npx tailwindcss --postcss -i app/design/frontend/Acme/default/web/tailwind/tailwind-source.css -o app/design/frontend/Acme/default/web/css/styles.css -c app/design/frontend/Acme/default/web/tailwind/tailwind.config.js --watch --verbose",
    "watch-anvil": "npx tailwindcss --postcss -i app/design/frontend/Acme/anvil/web/tailwind/tailwind-source.css -o app/design/frontend/Acme/anvil/web/css/styles.css -c app/design/frontend/Acme/anvil/web/tailwind/tailwind.config.js --watch --verbose",
    ...
  },
  ...
}

After completing these steps, you'll be able to run all commands from the root of the project, simplifying your workflow across multiple themes.