Skip to content

Generating CSS

Prerequisites

Before diving in, ensure you have the required dependencies installed. Navigate to the web/tailwind directory within your Hyvä theme:

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

Then, run the following command:

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 18
  • 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

Generate optimized stylesheets for production use with this command:

npm run build

Building for Development

While developing, use this command to start a watch process:

npm run watch

This continuously monitors your templates for Tailwind CSS classes mentioned in the purge configuration. Any changes are automatically reflected in the styles.css file, streamlining development.

Learn More: For in-depth information on controlling file size with Tailwind CSS and PurgeCSS, refer to the official documentation: v3.tailwindcss.com/docs/controlling-file-size#purge-css-options

Additional NPM Commands

start

Available since Hyvä 1.4.0

This command serves as an alias for npm run watch. You can use it for convenience:

npm start

browser-sync

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

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

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

For more advanced options, explore the documentation provided in the Using browser-sync or visit the official browser-sync documentation.

Deprecated or Removed Commands

The following NPM commands are no longer available or discouraged:

  • npm run build-prod (Removed in Hyvä 1.4.0): This command functioned identically to npm run build but included a success message.

  • npm run build-dev (Deprecated in Hyvä 1.2.0 and Removed in Hyvä 1.4.0): This command was used before Tailwind's JIT mode to generate a development CSS build without watch functionality. It's been removed and will only display a message informing you of its deprecation.