{"id":6805,"date":"2021-05-21T11:41:04","date_gmt":"2021-05-21T06:11:04","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6805"},"modified":"2023-01-20T18:55:02","modified_gmt":"2023-01-20T13:25:02","slug":"tailwind-css","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/","title":{"rendered":"Tailwind CSS"},"content":{"rendered":"<h2><b>Tailwind:<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">Tailwind is the CSS framework that is used for developing unique designs. Tailwind does not work like other CSS frameworks like Bootstrap and materializes it doesn&#8217;t come with predefined components. Tailwind provides you with a set of CSS helper classes with the help of these classes you can create custom designs.<\/span><\/p>\n<p><b>Why do we use Tailwind in our Projects?<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Tailwind is designed to be component-friendly. It is much easier to write and read and also easier to separate the site\u2019s elements into small components and not to use objects and classes in the components. It is easier to maintain and for testing purposes because we have to write the CSS on an inline basis. Custom styling can be provided to the components with the help of the Tailwind CSS framework. The framework is highly customizable because we have to use the file tailwind.config.js file in our project.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The Tailwind CSS is used for the default mobile-first approach. With the help of this framework, we can develop a complex responsive layout freely.<\/span><\/p>\n<h3><b>How to setup Tailwind with the project:<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Now we discuss how we integrate Tailwind with the project. First, we create a new project from scratch. Create a new project folder by using this command run this command in your terminal.<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ mkdir tailwind_demo<\/pre>\n<p><span style=\"font-weight: 400;\">Now go into the newly created project folder (tailwind_demo)<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ cd tailwind_demo<\/pre>\n<p><span style=\"font-weight: 400;\">Now we initialize the node module in our project and create package.json with help of this command<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ npm init -y<\/pre>\n<p><span style=\"font-weight: 400;\">This command enables the Node.js package manager to manage the dependency in our project. The first dependency which we use in our project is the <\/span><i><span style=\"font-weight: 400;\">tailwind <\/span><\/i><span style=\"font-weight: 400;\">package. We can install the tailwind package by the following command:<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ npm install tailwindcss<\/pre>\n<p><span style=\"font-weight: 400;\">From this command we make sure tailwind is downloaded and saved in the <\/span><i><span style=\"font-weight: 400;\">node_module <\/span><\/i><span style=\"font-weight: 400;\">folder and dependency is added into the <\/span><i><span style=\"font-weight: 400;\">package.Json<\/span><\/i><span style=\"font-weight: 400;\"> file.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now a step comes when we add the tailwind to the project\u2019s CSS. This is done by creating the new file css\/style.css and importing the @tailwind base, @tailwind components, @ tailwind utilities.<\/span><\/p>\n<pre class=\"lang:default decode:true \">@tailwind base;\r\n\r\n@tailwind components;\r\n\r\n@tailwind utilities;<\/pre>\n<p><b>Create the Tailwind config file:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">To complete the tailwind setup we have to create the new initial configuration file by following the command.<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ npx tailwindcss init<\/pre>\n<p><span style=\"font-weight: 400;\">This command creates the new file named tailwind.config.js with the following content inside.<\/span><\/p>\n<pre class=\"lang:default decode:true \">module.exports = {\r\n\r\n\u00a0\u00a0\u00a0theme: {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0extend: {},\r\n\r\n\u00a0\u00a0\u00a0},\r\n\r\n\u00a0\u00a0\u00a0variants: {},\r\n\r\n\u00a0\u00a0\u00a0plugins: [],\r\n\r\n\u00a0}<\/pre>\n<h3><b>How to process CSS with Tailwind:<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">For the processing of CSS file Tailwind require\u2019s the build process. To set up the build process there is one option which is PostCSS. PostCSS is the tool that transforms the CSS with javascript. Tailwind is also working with plugins and it is easy to perform the tailwindcss with the tailwind postcss plugin.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now we have to install PostCSS and autoprefixer by using the following command<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ npm install postcss-cli autoprefixer<\/pre>\n<p><span style=\"font-weight: 400;\">After successfully installing the plugin now we have to create the postcss config file in our project directory.<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ touch postcss.config.js<\/pre>\n<p><strong>Insert the following content in the newly created file.<\/strong><\/p>\n<pre class=\"lang:default decode:true \">module.exports = {\r\n\r\n\u00a0\u00a0\u00a0plugins: [\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0require('tailwindcss'),\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0require('autoprefixer'),\r\n\r\n\u00a0\u00a0\u00a0]\r\n\r\n}<\/pre>\n<p><span style=\"font-weight: 400;\">Now we have to specify that the postcss process should perform CSS processing with the tailwind and with the auto fixer.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Insert the following content in the package.json file.<\/span><\/p>\n<pre class=\"lang:default decode:true \">\"build\": \"postcss css\/styles.css -o build\/styles.css\"<\/pre>\n<p><span style=\"font-weight: 400;\">Here, we have to execute the script with the help of the following command.<\/span><\/p>\n<pre class=\"lang:default decode:true \">$ npm run build<\/pre>\n<p><b>Using with HTML file:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">First, we have to create the new file named Index.html and in the following HTML code.<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;!DOCTYPE html&gt;\r\n\r\n&lt;html lang=\"en\"&gt;\r\n\r\n&lt;head&gt;\r\n\r\n\u00a0\u00a0\u00a0&lt;meta charset=\"UTF-8\"&gt;\r\n\r\n\u00a0\u00a0\u00a0&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n\r\n\u00a0\u00a0\u00a0&lt;link rel=\"stylesheet\" href=\"styles.css\"&gt;\r\n\r\n\u00a0\u00a0\u00a0&lt;title&gt;Tailwind CSS Demo&lt;\/title&gt;\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body&gt;\r\n\r\n\u00a0\u00a0\u00a0&lt;div class=\"h-64\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-4 m-4 bg-green-600\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h1 class=\"text-2xl font-bold text-white\"&gt;Tailwind CSS Demo&lt;\/h1&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"p-4 m-4 bg-green-300 h-full\"&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;h2 class=\"text-green-900\"&gt;Have much fun using Tailwind CSS&lt;\/h2&gt;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\u00a0\r\n\r\n\u00a0\u00a0\u00a0&lt;\/div&gt;\r\n\r\n&lt;\/body&gt;<\/pre>\n<p><b>Example:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">How to style a button with the tailwind.<\/span><\/p>\n<pre class=\"lang:default decode:true \">&lt;button class=\"bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded\"&gt;My Tailwind Button&lt;\/button&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tailwind: Tailwind is the CSS framework that is used for developing unique designs. Tailwind does not work like other CSS frameworks like Bootstrap and materializes it doesn&#8217;t come with predefined components. Tailwind provides you with a set of CSS helper classes with the help of these classes you can create custom designs. Why do we [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6807,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[108],"tags":[636,632,634,635,633],"class_list":["post-6805","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css-js","tag-advantage-of-tailwind-css","tag-tailwind-css","tag-tailwind-css-components","tag-tailwind-css-installation-process","tag-tailwind-css-intellisense"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Tailwind Tutorial - Learn How to setup Tailwind CSS<\/title>\n<meta name=\"description\" content=\"Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs and component-friendly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/tailwind-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind Tutorial - Learn How to setup Tailwind CSS\" \/>\n<meta property=\"og:description\" content=\"Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs and component-friendly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/tailwind-css\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2021-05-21T06:11:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-01-20T13:25:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/Tailwind-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Tailwind CSS\",\"datePublished\":\"2021-05-21T06:11:04+00:00\",\"dateModified\":\"2023-01-20T13:25:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/\"},\"wordCount\":556,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Tailwind-CSS.png\",\"keywords\":[\"advantage of Tailwind CSS\",\"Tailwind CSS\",\"Tailwind CSS Components\",\"Tailwind CSS installation process\",\"Tailwind CSS IntelliSense\"],\"articleSection\":[\"HTML5 \\\/ CSS \\\/ JS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/\",\"name\":\"Tailwind Tutorial - Learn How to setup Tailwind CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Tailwind-CSS.png\",\"datePublished\":\"2021-05-21T06:11:04+00:00\",\"dateModified\":\"2023-01-20T13:25:02+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"description\":\"Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs and component-friendly.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Tailwind-CSS.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2021\\\/05\\\/Tailwind-CSS.png\",\"width\":960,\"height\":540,\"caption\":\"Tailwind CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/tailwind-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tailwind Tutorial - Learn How to setup Tailwind CSS","description":"Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs and component-friendly.","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:\/\/www.innovationm.com\/blog\/tailwind-css\/","og_locale":"en_US","og_type":"article","og_title":"Tailwind Tutorial - Learn How to setup Tailwind CSS","og_description":"Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs and component-friendly.","og_url":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/","og_site_name":"InnovationM - Blog","article_published_time":"2021-05-21T06:11:04+00:00","article_modified_time":"2023-01-20T13:25:02+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/Tailwind-CSS.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Tailwind CSS","datePublished":"2021-05-21T06:11:04+00:00","dateModified":"2023-01-20T13:25:02+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/"},"wordCount":556,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/Tailwind-CSS.png","keywords":["advantage of Tailwind CSS","Tailwind CSS","Tailwind CSS Components","Tailwind CSS installation process","Tailwind CSS IntelliSense"],"articleSection":["HTML5 \/ CSS \/ JS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/tailwind-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/","url":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/","name":"Tailwind Tutorial - Learn How to setup Tailwind CSS","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/Tailwind-CSS.png","datePublished":"2021-05-21T06:11:04+00:00","dateModified":"2023-01-20T13:25:02+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"description":"Tailwind CSS is the utility-first CSS framework for those looking to rapidly build custom designs and component-friendly.","breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/tailwind-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/Tailwind-CSS.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2021\/05\/Tailwind-CSS.png","width":960,"height":540,"caption":"Tailwind CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/tailwind-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6805","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6805"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6805\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6807"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6805"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6805"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6805"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}