{"id":15684,"date":"2025-05-22T17:46:30","date_gmt":"2025-05-22T12:16:30","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=15684"},"modified":"2025-07-14T09:17:34","modified_gmt":"2025-07-14T03:47:34","slug":"hyva-theme-css-file-directory-structure","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/hyva-theme-css-file-directory-structure\/","title":{"rendered":"Learn About the Hyv\u00e4 Theme CSS File Directory Structure"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Hyv\u00e4 theme in Magento 2 has gained significant popularity due to its modern approach and performance benefits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since it uses the TailwindCSS framework, it is essential to understand the Hyv\u00e4 theme\u2019s CSS file directory structure to customize the theme easily.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Tailwind CSS Works in Hyv\u00e4 Theme?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 handles CSS faster compared to other Magento 2 themes, as it uses TailwindCSS, known for its fast, consistent, and responsive UI development.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TailwindCSS is a utility-first CSS file, where you don\u2019t need to write custom CSS. You can create a design element using the predefined classes with the TailwindCSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Hyv\u00e4 default theme uses these TailwindCSS versions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TailwindCSS v3.x in Default Theme v1.2.x \/ v1.3.x<\/li>\n\n\n\n<li>TailwindCSS v2.x in Default Theme v1.0.x \/ v1.1.x<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Before working with the CSS, below is the tailwindCSS file directory structure in Hyv\u00e4 theme to under the root concept of the theme better.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Directory Structure of Theme File (\/tailwind)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You will find the source CSS file of the Hyv\u00e4 theme in the <strong>web\/tailwind<\/strong> with other directories that will be mentioned in the following way:&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/web\/tailwind\n\u251c\u2500\u2500 components\n\u2514\u2500\u2500 theme\n    \u2514\u2500\u2500 components\n        \u2514\u2500\u2500 style\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Components: <\/strong>All the reusable elements will be defined under this directory like slider, buttons, modals, etc.&nbsp;<\/li>\n\n\n\n<li><strong>Theme\/Component:<\/strong> This directory generally contains larger elements or pages like category page, footer, product page etc.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"1102\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components.png\" alt=\"Components Theme Component\" class=\"wp-image-15688\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components.png 492w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components-250x560.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components-403x903.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components-120x269.png 120w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">It is not necessary to add only mentioned components in the directories but it is a good practice to use like this for developer\u2019s convenience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure that all the required dependencies of the Tailwind CSS are installed within the Hyv\u00e4 theme. For that, you will need to navigate to the <strong>web\/tailwind<\/strong> directory and then run the below command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm ci<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Get Help with Hyv\u00e4 Customization<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Customizing the Hyv\u00e4 theme allows you to create a high-performing, manageable store. Our Hyv\u00e4 theme development expertise can help you add the necessary sections, elements, and more to your theme so it runs smoothly like butter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span> Hyv\u00e4 Development Service<\/span>\r\n<p>Get a fast-loading store in less than 7 weeks with Hyv\u00e4 theme<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\" target=\"_blank\" class=\"btn-primary\">Hire Us<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\" alt=\"Hyva Theme Development Service\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Hyv\u00e4 theme in Magento 2 has gained significant popularity due to its modern approach and performance benefits. Since it uses the TailwindCSS framework, it is essential to understand the Hyv\u00e4 theme\u2019s CSS file directory structure to customize the theme easily. How Tailwind CSS Works in Hyv\u00e4 Theme? Hyv\u00e4 handles CSS faster compared to other [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":15693,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5869,34],"tags":[],"class_list":["post-15684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hyva-themes","category-magento"],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/15684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=15684"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/15684\/revisions"}],"predecessor-version":[{"id":15697,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/15684\/revisions\/15697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/15693"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=15684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=15684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=15684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}