---
title: "How to generate CSS for Hyva theme in Magento 2"
url: "https://dolphinwebsolution.com/how-to-generate-css-for-hyva-theme-in-magento-2"
date: "2023-05-16T09:06:16+05:30"
modified: "2024-02-27T16:08:57+05:30"
author:
  name: "Mayur patel"
categories:
  - "Magento2"
  - "Hyva"
word_count: 450
reading_time: "3 min read"
summary: "In this blog post, we will discuss how to generate CSS for the Hyva theme in Magento 2

It is important to generate CSS for the Hyva theme as mentioned below.

Always remember to renew your the..."
description: "In this blog post, we will discuss how to generate CSS for the Hyva theme in Magento 2 It is important to generate CSS for the Hyva theme as mentioned below...."
keywords: "Magento2, Hyva"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to add Custom Random Order Number in Magento 2"
    url: "https://dolphinwebsolution.com/how-to-add-custom-random-order-number-in-magento-2"
  - title: "How to add attribute options values into dropdown attribute programmatically"
    url: "https://dolphinwebsolution.com/how-to-add-attribute-options-values-into-dropdown-attribute-programmatically"
  - title: "Top 10 Magento Development Companies"
    url: "https://dolphinwebsolution.com/blog/top-magento-development-companies/"
---

# How to generate CSS for Hyva theme in Magento 2

_Published: May 16, 2023_  
_Author: Mayur patel_  

![](https://dolphinwebsolution.com/wp-content/uploads/2023/05/generate-css-1024x536.png)

In this blog post, we will discuss how to generate CSS for the Hyva theme in Magento 2

It is important to generate CSS for the Hyva theme as mentioned below.

Always remember to renew your theme’s styles after making changes to your custom Hyva theme.

First, you will need to install all required node packages.

```
cd /magento_root_directory/app/design/frontend/Dolphin/default/web/tailwind/
npm install
```

Generally, we are using the three options in hyva Magento 2 for generate css for production, development, and development stylesheet

### Generating CSS for production

You can generate the styles using the command

```
cd /magento_root_directory/app/design/frontend/Dolphin/default/web/tailwind/
npm run build-prod
```

After running the above command you show the below success message

![AI Integration in Magento: Benefits, Use Cases and Business Impact](/wp-content/uploads/2023/05/image3.png)

As per mention the above success message shows that minify style.css file is generated as mentioned below path

**/magento\_root\_directory/app/design/frontend/Dolphin/default/web/tailwind/**

### Generating CSS during development

You can generate the styles using the command

```
cd /magento_root_directory/app/design/frontend/Dolphin/default/web/tailwind/
npm run watch
```

After running the above command you show the below success message

![AI Integration in Magento: Benefits, Use Cases and Business Impact](/wp-content/uploads/2023/05/image1.png)

As per mention the above success message shows that style.css file, which is not minified version of it.
This will start running the tailwind compiler continuously and any CSS classes added to templates in the purge configuration will be added to the styles.css file immediately.

### Development stylesheet

This method is only applicable for Tailwind version 2 and below and not applicable for Tailwind version 3.

You can create an unpurged development bundle if you enjoy utilizing Chrome Developer Tools for development, which has auto-completion for all Tailwind CSS classes that are available.
A CSS file including all Tailwind classes as well as our own styles will be created by the development package.

It should only be used in the development, as the name suggests, and not in staging or production!

```
cd /magento_root_directory/app/design/frontend/Dolphin/default/web/tailwind/
npm run build-dev
```

After running the above command you show the below message

![AI Integration in Magento: Benefits, Use Cases and Business Impact](/wp-content/uploads/2023/05/image2.png)

It is not recommended to utilize the generated CSS file in production as it is rather huge (nearly as large as Magento’s default stylesheet).

### Difference between generating CSS in production and development

In production, the style.css file is minified file and the file size is less than the development file. while in development it is not minified file, and the file size is more than in production.

If you’re struggling with any questions or confusion regarding generating CSS in [hyva Magento 2](https://dolphinwebsolution.com/hyva-theme-development), feel free to reach out to us through the comments section. We’re always happy to assist and provide the guidance you need.


---

_View the original post at: [https://dolphinwebsolution.com/how-to-generate-css-for-hyva-theme-in-magento-2](https://dolphinwebsolution.com/how-to-generate-css-for-hyva-theme-in-magento-2)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-08-26 06:29:00 UTC_