How to generate CSS in Magento Hyvä Theme?

We've witnessed the e-commerce success with Hyvä themes while working on couple of projects, so we are excited to share another helpful insight! This blog will share the step-by-step process for generating CSS for the Hyvä theme in Magento 2. Customizing the styles is pivotal for creating a unique and visually appealing storefront. We'll cover the steps for production and development environments and insights into their differences.

Why Generate CSS for Hyvä Theme?

Customizing the CSS of the Hyvä theme is an absolute must if you want your Magento storefront to stand out. Without generating CSS, any modifications made to your custom theme may not be reflected, which could lead to a suboptimal user experience. Don't settle for less than a visually stunning storefront - make sure your CSS is customized to perfection.

Installing Required Node Packages

Before generating CSS, ensure that all required Node packages are installed. Navigate to the Tailwind directory of your theme:

cd app/design/frontend/Navigate/default/web/tailwind/
npm install 

This step sets up the necessary environment for CSS generation.

Generating CSS for Production

Command for Production

To generate CSS for the production environment, please execute the following command.

cd app/design/frontend/Navigate/default/web/tailwind/ 
npm run build-prod 

Alternatively, you can run below in your root directory

npm --prefix app/design/frontend/Navigate/default/web/tailwind run build-prod

After executing the command, a success message will confirm the creation of the minified style.css file. The file can be found at:

app/design/frontend/Navigate/default/web/css/styles.css

After this step, run bin/magento setup:static-content:deploy command.

This step will copy the generated

app/design/frontend/Navigate/default/web/css/styles.css

file into the

pub/static/frontend/Navigate/default/en_US/css/styles.css 

directory structure so it can be loaded by browsers with Magento running in production mode.

Generating CSS During Development

Command for Development

To keep the Tailwind compiler running throughout the development process, use the following command:

cd app/design/frontend/Navigate/default/web/tailwind/
npm run watch 

Alternatively, you can run below in your root directory

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

This command immediately updates the style.css file with any added CSS classes from templates without minifying it.

Conclusion

Customizing the CSS in the Hyvä theme is an essential part of creating a distinctive and attractive online store. This article provides a step-by-step process for generating and deploying CSS that works seamlessly in both production and development environments. If you have any queries or need help, please feel free to reach out through the comments section or drop us a line at info@navigatecommerce.com. Happy theming!