{"id":328347,"date":"2022-04-08T19:11:27","date_gmt":"2022-04-08T19:11:27","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=328347"},"modified":"2024-04-25T08:18:33","modified_gmt":"2024-04-25T08:18:33","slug":"working-with-tailwindcss-in-hyva-theme","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/","title":{"rendered":"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme"},"content":{"rendered":"\n

Hyv\u00e4\u00a0Theme<\/a> uses the TailwindCSS framework\u00a0that is very easy to customize, responsive, and fits on all devices. It creates a very small size of CSS stylesheets which reduces the amount of data your site visitor has to download.<\/p>\n\n\n\n

Tailwind is a utility-based CSS framework that you don’t typically write the CSS classes yourself, instead, you can use the classes that are present within Tailwind.<\/p>\n\n\n\n

Take a look at this example:<\/p>\n\n\n\n

<div class="m-4 mt-8 p-2 bg-primary border border-secondary w-full md:w-1\/2"><\/pre>\n\n\n\n
It translates to:<\/p>\n\n\n\n
div {\n    margin: 1rem;\n    margin-top: 2rem;\n    padding: 0.5rem;\n    background-color: #f1f1f1; \/* the color for `primary` is defined in our config *\/\n    border-width: 1px;\n    border-color: #c9c9c9; \/* the color `secondary` is defined in our config *\/\n    width: 100%;\n}\n@media (min-width: 768px) {\n    div {\n        width: 50%;\n    }\n}<\/pre>\n\n\n\n
Tailwind Purging settings<\/strong><\/h2>\n\n\n\n
A typical stylesheet for a Hyv\u00e4 Theme is about 35 kb (that\u2019s 7.5 kb after GZIP).<\/p>\n\n\n\n
This is because It removes all styles that aren’t used, leaving only the required styles.<\/p>\n\n\n\n
It’s important to understand how Hyv\u00e4 uses PurgeCSS to reduce the number of classes in the final output.  <\/p>\n\n\n\n
\n
“PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.”<\/em><\/p>\n<\/blockquote>\n\n\n\n
In hyv\u00e4 purging, the script looks up all the Tailwind classes we use in our theme and extract them from the original, complete Tailwind stylesheet. <\/p>\n\n\n\n
How Purging is done in Hyv\u00e4 theme?<\/h2>\n\n\n\n
Tailwind needs to know which classes are used, we need to point the build script to the directories where our .phtml<\/code> files are located. Typically, that would be  app\/design\/frontend\/Acme\/default\/templates\/<\/code><\/p>\n\n\n\n
If you have .phtml<\/code> files with TailwindCSS classes in app\/code<\/code> or vendor\/<\/code>, you\u2019ll have included these in your tailwind configuration, too.<\/p>\n\n\n\n
Hence add the directories into the tailwind configuration with the following steps mentioned below.<\/p>\n\n\n\n
    \n
  1. go to “tailwind.config.js” file of your theme.<\/li>\n\n\n\n
  2. Register the directories in to the script as shown below.<\/li>\n<\/ol>\n\n\n\n
    module.exports = {\n  ...\n  purge: {\n    content: [\n      \/\/ this theme's phtml files\n      '..\/..\/**\/*.phtml',\n      \/\/ parent theme in vendor\/\n      '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/**\/*.phtml',\n      \/\/ hyva theme-module templates\n      '..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-theme-module\/src\/view\/frontend\/templates\/**\/*.phtml',\n      \/\/ app\/code phtml files (if you need tailwind classes from app\/code modules)\n      \/\/'..\/..\/..\/..\/..\/..\/..\/app\/code\/**\/*.phtml',\n      \/\/ react app src files (if Hyv\u00e4 Checkout is installed in app\/code)\n      \/\/'..\/..\/..\/..\/..\/..\/..\/app\/code\/**\/src\/**\/*.jsx',\n      \/\/ react app src files in vendor (If Hyv\u00e4 Checkout is installed in vendor)\n      \/\/'..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-hyva-react-checkout\/src\/reactapp\/src\/**\/*.jsx',\n      \/\/'..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-hyva-react-checkout\/src\/view\/frontend\/templates\/react-container.phtml',\n      \/\/ widget block classes from app\/code\n      \/\/'..\/..\/..\/..\/..\/..\/..\/app\/code\/**\/Block\/Widget\/**\/*.php'\n    ]\n  }\n}<\/pre>\n\n\n\n
    Advanced Configuration<\/h2>\n\n\n\n
    This can be useful If you wish to inherit from the parent theme Hyva\/default theme but not to check for any templates in it that you have overridden in your own theme. So that when you upgrade the hyv\u00e4 theme then no unused Tailwind CSS<\/a> classes will be added.<\/p>\n\n\n\n
    To achieve this add the few lines of code in the “web\/tailwind\/tailwind.config.js”.<\/p>\n\n\n\n
    const { colors } = require('tailwindcss\/defaultTheme')\nconst path = require('path')\nconst fs = require('fs')\n\n\/**\n * Finds and lists all files in a directory with a specific extension\n * https:\/\/gist.github.com\/victorsollozzo\/4134793\n * @return Array\n *\/\nfunction recFindByExt(base,ext, files,result) {\n    files = files || fs.readdirSync(base)\n    result = result || []\n\n    files.forEach(\n        function (file) {\n            const newbase = path.join(base,file);\n            if (fs.statSync(newbase).isDirectory()) {\n                result = recFindByExt(newbase, ext, fs.readdirSync(newbase), result)\n            } else {\n                if (file.substr(-1*(ext.length+1)) == '.' + ext) {\n                    result.push(newbase)\n                }\n            }\n        }\n    )\n    return result\n}\n\n\/**\n * Returns an array of all files to be used in tailwind purge.content\n *\/\nconst purgeContent = () => {\n    \/\/ Add any sub-directories you wish to be excluded by Tailwind when checking \n    \/\/ the hyva-default theme.\n    \/\/ For example you may have removed Magento_Review from your store, and therefore\n    \/\/ do not wish for Tailwind to generate any CSS for it.\n    const EXCLUDE_FROM_PARENT = []; \/\/ e.g. ['Magento_Review']\n\n    \/\/ Declare array to stores all paths for hyvaDefault theme's phtml files\n    let hyvaDefault = recFindByExt('..\/..\/..\/..\/..\/..\/..\/vendor\/hyva-themes\/magento2-default-theme\/', 'phtml');\n\n    \/\/ Declare array to stores all paths for your current theme's phtml files\n    let currentTheme = recFindByExt('..\/..\/','phtml');\n\n    \/\/ Filter the array of templates from hyva-default to remove any templates overridden in your theme.\n    \/\/ A similar filter can be used on other parent theme's if you have a\n    \/\/ multi-store Magento install using a different theme structure.\n    hyvaDefault = hyvaDefault.filter(function(item) {\n        let isAllowed = true;\n\n        for(const key in this) {\n            if (item.includes(this[key].replace(\/..\/\/g, ''))) {\n                isAllowed = false;\n            }\n        }\n\n        return isAllowed;\n    }, currentTheme.concat(EXCLUDE_FROM_PARENT));\n\n    return currentTheme.concat(hyvaDefault);\n}\n\nmodule.exports = {\n    \/\/ ...omitted code\n    purge: {\n        content: purgeContent()\n    }\n}<\/pre>\n\n\n\n
    The above code is just an example. You can customize it according to your requirements for now in purgeContent() we have added only  the files from Magento’s app\/code directory<\/p>\n\n\n\n
    Generating CSS<\/strong><\/h2>\n\n\n\n
    First, you will need to install all required node packages.<\/p>\n\n\n\n
    cd \/path\/to\/project\/app\/design\/frontend\/Acme\/default\/web\/tailwind\/\nnpm install<\/pre>\n\n\n\n
    \n
    Please note the minimum required Node.js version for TailwindCSS is available.<\/p>\n\n\n\n
    At the time of writing the minimum version is node 12.13.0.<\/p>\n<\/blockquote>\n\n\n\n
    Generating CSS for production<\/strong><\/h2>\n\n\n\n
    You can generate the styles using the command<\/p>\n\n\n\n
    cd \/path\/to\/project\/app\/design\/frontend\/Acme\/default\/web\/tailwind\/\nnpm run build-prod<\/pre>\n\n\n\n
    Generating CSS during development<\/strong> run<\/strong><\/h2>\n\n\n\n
    cd \/path\/to\/project\/app\/design\/frontend\/Acme\/default\/web\/tailwind\/\nnpm run watch<\/pre>\n\n\n\n
    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<\/code> file immediately.<\/p>\n\n\n\n
    Read more about controlling file sizes with Tailwind and PurgeCSS<\/a><\/p>\n\n\n\n
    CSS file directory structure in Hyv\u00e4 Theme<\/strong><\/h2>\n\n\n\n
    The main source CSS files are located in “web\/tailwind\/components\"<\/code> and \"web\/tailwind\/theme\/components\"<\/code><\/p>\n\n\n\n
    The tailwind\/components<\/code> directory is for reusable elements such as buttons, sliders, inputs<\/p>\n\n\n\n
    The tailwind\/theme\/components<\/code> directory is intended for larger components or pages, such as the category page, account pages, the header etc, “tailwind\/components” also contains product-page.css<\/code> and category-page.css<\/code>.<\/p>\n\n\n\n
    Highly recommended to look into this Tailwind<\/a> before working on hyv\u00e4 themes.<\/p>\n\n\n\n
    Videos about TaliwindCSS:-  https:\/\/www.youtube.com\/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0<\/a><\/p>\n\n\n\n
    Previous Blog: – Working with AlpineJs in Hyv\u00e4 Themes<\/a><\/p>\n\n\n\n
    Next Blog : – How to create your own theme in Hyv\u00e4 Theme?<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
    Hyv\u00e4\u00a0Theme uses the TailwindCSS framework\u00a0that is very easy to customize, responsive, and fits on all devices. It creates a very small size of CSS stylesheets which reduces the amount of data your site visitor has to download. Tailwind is a utility-based CSS framework that you don’t typically write the CSS classes yourself, instead, you can […]<\/a><\/p>\n","protected":false},"author":422,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9121],"tags":[],"class_list":["post-328347","post","type-post","status-publish","format-standard","hentry","category-magento-2"],"yoast_head":"\nWorking with TailwindCSS in Hyv\u00e4\u00a0 Theme - Webkul Blog<\/title>\n<meta name=\"description\" content=\"TailwindCSS is utility- based framework used in Hyv\u00e4 theme to get the look of the page more beautiful in all the devices\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"TailwindCSS is utility- based framework used in Hyv\u00e4 theme to get the look of the page more beautiful in all the devices\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-08T19:11:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-25T08:18:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Shreyas Vispute\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Shreyas Vispute\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\"},\"author\":{\"name\":\"Shreyas Vispute\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\"},\"headline\":\"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme\",\"datePublished\":\"2022-04-08T19:11:27+00:00\",\"dateModified\":\"2024-04-25T08:18:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\"},\"wordCount\":584,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"articleSection\":[\"Magento 2\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\",\"url\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\",\"name\":\"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"datePublished\":\"2022-04-08T19:11:27+00:00\",\"dateModified\":\"2024-04-25T08:18:33+00:00\",\"description\":\"TailwindCSS is utility- based framework used in Hyv\u00e4 theme to get the look of the page more beautiful in all the devices\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033\",\"name\":\"Shreyas Vispute\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Shreyas Vispute\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme - Webkul Blog","description":"TailwindCSS is utility- based framework used in Hyv\u00e4 theme to get the look of the page more beautiful in all the devices","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/","og_locale":"en_US","og_type":"article","og_title":"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme - Webkul Blog","og_description":"TailwindCSS is utility- based framework used in Hyv\u00e4 theme to get the look of the page more beautiful in all the devices","og_url":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2022-04-08T19:11:27+00:00","article_modified_time":"2024-04-25T08:18:33+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-og.png","type":"image\/png"}],"author":"Shreyas Vispute","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Shreyas Vispute","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/"},"author":{"name":"Shreyas Vispute","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033"},"headline":"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme","datePublished":"2022-04-08T19:11:27+00:00","dateModified":"2024-04-25T08:18:33+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/"},"wordCount":584,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"articleSection":["Magento 2"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/","url":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/","name":"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"datePublished":"2022-04-08T19:11:27+00:00","dateModified":"2024-04-25T08:18:33+00:00","description":"TailwindCSS is utility- based framework used in Hyv\u00e4 theme to get the look of the page more beautiful in all the devices","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working with TailwindCSS in Hyv\u00e4\u00a0 Theme"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/d4ed4835e93c06b089c32370181b1033","name":"Shreyas Vispute","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c979339c2c52bba9ace844f53c8b0199863bb13db9c69398cf7e8f9ac338524b?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Shreyas Vispute"},"url":"https:\/\/webkul.com\/blog\/author\/shreyas-vilas522\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/328347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/422"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=328347"}],"version-history":[{"count":9,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/328347\/revisions"}],"predecessor-version":[{"id":436500,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/328347\/revisions\/436500"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=328347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=328347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=328347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}