Table of Contents & Menu
On this page
Navigation

Generating CSS

Prerequisites

First, navigate to your Hyvä theme's web/tailwind directory:

cd path/to/project/app/design/frontend/Acme/default/web/tailwind

Then, install the required dependencies:

npm ci
Minimal Node.js version requirements per Hyvä version

For optimal performance, we recommend using the Node.js LTS version or later. Hyvä releases have different minimum Node.js requirements due to dependencies:

  • Hyvä 1.4.0 and newer: Node.js 20
  • Hyvä 1.3.6: Node.js 16
  • Hyvä 1.2.0: Node.js 14
  • Hyvä 1.1.0: Node.js 12.13

Building for Production

To generate optimized stylesheets for production use:

npm run build

Building for Development

For development, use this command to start a watch process:

npm run watch

This continuously monitors your templates for Tailwind CSS classes, automatically updating styles.css on changes to streamline development.

Running npm without changing directories

Alternatively, run npm commands from any directory by providing the path to your theme's web/tailwind directory using the --prefix argument:

npm --prefix path/to/project/app/design/frontend/Acme/default/web/tailwind ci
npm --prefix path/to/project/app/design/frontend/Acme/default/web/tailwind run build

Additional NPM Commands

npm start

Available since Hyvä 1.4.0

This command is a convenient alias for npm run watch:

npm start

browser-sync

For detailed instructions on using browser-sync, refer to the dedicated Using browser-sync documentation.

npm run browser-sync -- --proxy http://your-magento.test

Replace http://your-magento.test with your actual Magento development URL.

For advanced options, see the Using browser-sync documentation or the official browser-sync documentation.

Deprecated or Removed Commands

The following NPM commands are no longer available or recommended:

  • npm run build-prod
    (Removed in Hyvä 1.4.0):
    Identical to npm run build, but included a success message.

  • npm run build-dev
    (Deprecated in Hyvä 1.2.0, removed in Hyvä 1.4.0):
    Used before Tailwind's JIT mode for a development CSS build without watch. Now removed, it will display a deprecation message.