Hyvä Theme erstellen für Magento 2.4.8-p3

3. Tailwind-Verzeichnis vom Parent-Theme kopieren

Das ist der wichtigste Schritt! Du musst das komplette web/tailwind Verzeichnis vom Parent-Theme in dein Child-Theme kopieren:

4. CSS-Verzeichnis erstellen

bin/cli mkdir -p app/design/frontend/Mironsoft/default/web/css

5. Media-Verzeichnis erstellen

bin/cli mkdir -p app/design/frontend/Mironsoft/default/media

6. NPM Dependencies installieren

bin/npm --prefix app/design/frontend/Mironsoft/default/web/tailwind install

7. CSS generieren und bauen

bin/npm --prefix app/design/frontend/Mironsoft/default/web/tailwind run build

8. Während der Entwicklung (Watch-Modus)

bin/npm --prefix app/design/frontend/Mironsoft/default/web/tailwind run watch

9. Config anpassen:

10. tailwind-source.css anpassen

**
 * Mironsoft Default Theme
 *
 * Main entry file for theme CSS, processed by Tailwind CSS v4.
 */

@import "@hyva-themes/hyva-modules/css";
@import "tailwindcss" source(none);
@source "../../**/*.phtml";
@source "../../**/*.xml";

/* Custom styles */
@import "./base";
@import "./components";
@import "./theme";
@import "./utilities";

/* Import generated styles for Hyvä Compatible Modules and Design Tokens */
@import "./generated/hyva-source.css";
@import "./generated/hyva-tokens.css";

@theme {
    /* Background and foreground colors */
    --color-bg: var(--color-slate-50);
    --color-fg: var(--color-slate-950);
    --color-fg-secondary: var(--color-slate-600);
    --color-surface: var(--color-white);
}

11. package.json anpassen

{
  "name": "@mironsoft/default-theme",
  "version": "1.0.0",
  "description": "Mironsoft Default Hyvä Theme with Tailwind CSS v4",
  "type": "module",
  "dependencies": {
    "@hyva-themes/hyva-modules": "^1.2.4",
    "@tailwindcss/cli": "^4.1.17",
    "tailwindcss": "^4.1.17"
  },
  "scripts": {
    "start": "npm run watch",
    "generate": "npx hyva-sources && npx hyva-tokens",
    "prewatch": "npm run generate",
    "watch": "npx tailwindcss -i tailwind-source.css -o ../css/styles.css --watch",
    "browser-sync": "npx browser-sync start --config ./browser-sync.config.cjs",
    "prebuild": "npm run generate",
    "build": "npx tailwindcss -i tailwind-source.css -o ../css/styles.css --minify"
  },
  "engine-strict": true,
  "engines": {
    "node": ">=20.0.0"
  },
  "browserslist": [
    "> 0.5% and not dead"
  ],
  "author": "Mironsoft",
  "license": "proprietary",
  "private": true
}

12. Komplette Verzeichnisstruktur

app/design/frontend/Mironsoft/default/
├── etc/
│   └── view.xml (optional)
├── media/
│   └── preview.png
├── web/
│   ├── css/
│   │   └── styles.css (wird generiert)
│   └── tailwind/
│       ├── base/
│       │   ├── index.css
│       │   ├── preflight.css
│       │   └── print.css
│       ├── components/
│       │   ├── index.css
│       │   └── ... (weitere CSS-Dateien)
│       ├── generated/
│       │   ├── hyva-source.css
│       │   └── hyva-tokens.css
│       ├── theme/
│       │   ├── index.css
│       │   └── ... (weitere CSS-Dateien)
│       ├── utilities/
│       │   ├── index.css
│       │   └── ... (weitere CSS-Dateien)
│       ├── .nvmrc
│       ├── browser-sync.config.cjs
│       ├── hyva.config.json
│       ├── package.json
│       └── tailwind-source.css
├── registration.php
└── theme.xml

13. Magento Setup

bin/magento setup:upgrade
bin/magento setup:di:compile
bin/magento setup:static-content:deploy -f de_DE en_US
bin/cache-clean