{"id":74219,"date":"2026-02-06T21:00:42","date_gmt":"2026-02-06T13:00:42","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=74219"},"modified":"2026-02-02T19:27:33","modified_gmt":"2026-02-02T11:27:33","slug":"tailwind-css-productivity-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/","title":{"rendered":"5 Tailwind CSS Essential Tools to Boost Your Productivity"},"content":{"rendered":"

Tailwind CSS<\/a><\/strong> has changed how we build websites by using utility classes like text-center<\/code> or bg-blue-500<\/code> directly in HTML.<\/p>\n

But as projects get bigger, the huge number of utilities can become overwhelming, leading to long class lists, slower development, and a constant need to look up class names. So how do we keep the speed and flexibility without getting buried under the class chaos?<\/p>\n

In this article, we\u2019ll explore five essential tools that can help you stay productive while working with Tailwind CSS. These tools will help you manage your classes better, speed up your workflow, and keep your code clean and maintainable.<\/p>\n

Let\u2019s check them out!<\/p>\n

1. VSCode Extensions<\/h2>\n

If you\u2019re using a code editor like VSCode<\/a>, you should install the Tailwind CSS Intellisense<\/a>. This extension provides intelligent suggestions as you type, helping you quickly find the right utility classes without having to remember them all. <\/p>\n

\n \"Tailwind\n <\/figure>\n

On top of that, the extension also offers features like linting for your Tailwind CSS code. This can significantly speed up your development process and reduce errors.<\/p>\n

Another extension that I would suggest is Tailwind Fold<\/a><\/strong>. It is another useful extension that helps you manage long class lists by allowing you to collapse and expand them. This keeps your code clean and makes it easier to navigate through your HTML files.<\/p>\n

\n \"Tailwind\n <\/figure>\n

2. Code Linting Tools<\/h2>\n

Linting and proper formatting are essential parts of maintaining code quality, and there\u2019s one tool that I would recommend if you\u2019re working with Tailwind CSS: the prettier-plugin-tailwindcss<\/a>.<\/p>\n

This Prettier Plugin<\/a> is an official plugin from the Tailwind CSS team that automatically sorts your classes in a consistent order whenever you format your code.<\/p>\n

On top of that it also removes duplicated classes, unnecessary whitespace, and ensures that your Tailwind CSS code is clean.<\/p>\n

To install it, run:<\/p>\n

\r\nnpm install -D prettier prettier-plugin-tailwindcss\r\n<\/pre>\n
Then, update the Prettier config in your project to include prettier-plugin-tailwindcss<\/code>.<\/p>\n
\r\n{\r\n  \"plugins\": [\"prettier-plugin-tailwindcss\"]\r\n}\r\n<\/pre>\n
After you\u2019ve configured it, I\u2019d recommend installing the Prettier \u2013 Code formatter<\/a> extension, if you\u2019re using VSCode. This extension will allow you to format your code directly from VSCode using Prettier, as well as reporting any formatting issues.<\/p>\n
\n    \"Prettier\n  <\/figure>\n
3. Tailwind Merge<\/h2>\n
When creating reusable components with Tailwind CSS, like a Button that would expect custom classes, you\u2019ll likely run into class conflicts. For example, what happens if a component has a default p-2<\/code> but someone passes p-5<\/code> through className<\/code>?<\/p>\n
Since Tailwind utilities are atomic, both classes end up in the final output. This is exactly the messy problem that the tailwind-merge<\/a><\/strong> package solves beautifully.<\/p>\n
It is a smart little utility that cleans up conflicting classes automatically. It looks at all the styles you pass in, groups anything that conflicts, like that p-2<\/code> vs p-5<\/code>, and returns only the correct one\u2014based on a simple rule: the last class wins<\/strong>. For example:<\/p>\n
\r\nimport { twMerge } from 'tailwind-merge';\r\n\r\nconst classes = twMerge('p-2', 'p-5');\r\nconsole.log(classes); \/\/ Output: 'p-5'\r\n<\/pre>\n
This makes component libraries in React, Vue, or Svelte much easier to manage, allowing you and the users to freely override styles without worrying about unexpected results.<\/p>\n
4. Tailwind Variants<\/h2>\n
Another thing that can get messy is when you start adding different styles based on props in your reusable component. For example, a button might need multiple versions such as different sizes, colors, or states like disabled or loading.<\/p>\n
tailwind-variants<\/code> helps solve this problem by giving you an easy and organized way to define those style variations without all the clutter. Let\u2019s take a look at an example below:<\/p>\n
\r\nimport { tv } from 'tailwind-variants';\r\n\r\nconst button = tv({\r\n  \/\/ Base classes that apply regardless of variants\r\n  base: 'font-semibold rounded-lg shadow-md transition ease-in-out duration-150',\r\n  \r\n  \/\/ Define the available variants\r\n  variants: {\r\n    \/\/ 1. Variant for color\/intent\r\n    intent: {\r\n      primary: 'bg-blue-500 hover:bg-blue-600 text-white',\r\n      secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',\r\n    },\r\n    \/\/ 2. Variant for size\r\n    size: {\r\n      sm: 'py-1 px-2 text-sm',\r\n      lg: 'py-3 px-6 text-lg',\r\n    },\r\n    \/\/ 3. Boolean variant for full width\r\n    fullWidth: {\r\n      true: 'w-full',\r\n    },\r\n  },\r\n  \r\n  \/\/ Define default values if no prop is provided\r\n  defaultVariants: {\r\n    intent: 'primary',\r\n    size: 'lg',\r\n  },\r\n});\r\n<\/pre>\n
In this example, we set the base styles for the button, then defined variants for intent (color), size, and a boolean for full width. We also set default variants to ensure the button has a consistent look when no specific props are provided.<\/p>\n
Inside your component, you call the button function with the desired props, and it automatically generates the correct class string:<\/p>\n
\r\n\/\/ Example 1: Use defaults\r\nconst classes1 = button();\r\n\/\/ Result: \"font-semibold rounded-lg shadow-md ... bg-blue-500 hover:bg-blue-600 text-white py-3 px-6 text-lg\"\r\n\r\n\/\/ Example 2: Override defaults\r\nconst classes2 = button({ intent: 'secondary', size: 'sm' });\r\n\/\/ Result: \"font-semibold rounded-lg shadow-md ... bg-gray-200 hover:bg-gray-300 text-gray-800 py-1 px-2 text-sm\"\r\n\r\n\/\/ Example 3: Use the boolean variant\r\nconst classes3 = button({ fullWidth: true });\r\n\/\/ Result: \"font-semibold rounded-lg shadow-md ... (primary\/lg styles) w-full\"\r\n<\/pre>\n
5. Tailwind Config Viewer<\/h2>\n
As your Tailwind project grows, your config file can become large and difficult to navigate. With custom colors, spacing, utilities, and breakpoints, it\u2019s easy for developers and designers to forget what\u2019s available or where to find it. Searching through the file for a class name or color code wastes time and often leads to mistakes or hard-coded values.<\/p>\n
This is where tailwind-config-viewer<\/a><\/code> comes in. It\u2019s a helpful NPM package that creates a visual style guide from your project\u2019s tailwind.config.js<\/code> file.<\/p>\n
Instead of digging through the config file manually, you get a clean, searchable web interface that shows all your custom settings including the colors, spacing, typography, and breakpoints, right in your browser.<\/p>\n
To get started, you can run the following to install it:<\/p>\n
\r\nnpm i tailwind-config-viewer -D\r\n<\/pre>\n
Then, add a custom script in your package.json<\/code> file.<\/p>\n
\r\n\"scripts\": {\r\n  \"tailwind-config-viewer\": \"tailwind-config-viewer -o\"\r\n}\r\n<\/pre>\n
Now, you can run npm run tailwind-config-viewer<\/code>, and it will launch a local server displaying your Tailwind CSS configuration in a user-friendly format, as seen below:<\/p>\n
\n    \"Tailwind\n  <\/figure>\n
Wrapping Up<\/h2>\n
Tailwind CSS is a powerful framework, but managing its utility-first approach can get overwhelming as projects grow. The tools we\u2019ve explored in this article can significantly boost your productivity by simplifying class management, improving code quality, and enhancing your workflow.<\/p>\n
We hope that these tools help you work more efficiently with Tailwind CSS and make your development process smoother and more enjoyable.<\/p>","protected":false},"excerpt":{"rendered":"
Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the huge number of utilities can become overwhelming, leading to long class lists, slower development, and a constant need to look up class names. So how do we keep the speed…<\/p>\n","protected":false},"author":113,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\n5 Tailwind CSS Essential Tools to Boost Your Productivity - Hongkiat<\/title>\n<meta name=\"description\" content=\"Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the\" \/>\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.hongkiat.com\/blog\/tailwind-css-productivity-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 Tailwind CSS Essential Tools to Boost Your Productivity\" \/>\n<meta property=\"og:description\" content=\"Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2026-02-06T13:00:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/tailwind-css-productivity-tools\/tailwindcss-intellisense.jpg\" \/>\n<meta name=\"author\" content=\"Thoriq Firdaus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@tfirdaus\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thoriq Firdaus\" \/>\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:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/\"},\"author\":{\"name\":\"Thoriq Firdaus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\"},\"headline\":\"5 Tailwind CSS Essential Tools to Boost Your Productivity\",\"datePublished\":\"2026-02-06T13:00:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/\"},\"wordCount\":852,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwind-css-productivity-tools\\\/tailwindcss-intellisense.jpg\",\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/\",\"name\":\"5 Tailwind CSS Essential Tools to Boost Your Productivity - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwind-css-productivity-tools\\\/tailwindcss-intellisense.jpg\",\"datePublished\":\"2026-02-06T13:00:42+00:00\",\"description\":\"Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwind-css-productivity-tools\\\/tailwindcss-intellisense.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/tailwind-css-productivity-tools\\\/tailwindcss-intellisense.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/tailwind-css-productivity-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 Tailwind CSS Essential Tools to Boost Your Productivity\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/e7948c7a175d211496331e4b6ce55807\",\"name\":\"Thoriq Firdaus\",\"description\":\"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.\",\"sameAs\":[\"https:\\\/\\\/thoriq.com\",\"https:\\\/\\\/x.com\\\/tfirdaus\"],\"jobTitle\":\"Web Developer\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/thoriq\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"5 Tailwind CSS Essential Tools to Boost Your Productivity - Hongkiat","description":"Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the","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.hongkiat.com\/blog\/tailwind-css-productivity-tools\/","og_locale":"en_US","og_type":"article","og_title":"5 Tailwind CSS Essential Tools to Boost Your Productivity","og_description":"Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the","og_url":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2026-02-06T13:00:42+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/tailwind-css-productivity-tools\/tailwindcss-intellisense.jpg","type":"","width":"","height":""}],"author":"Thoriq Firdaus","twitter_card":"summary_large_image","twitter_creator":"@tfirdaus","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Thoriq Firdaus","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/"},"author":{"name":"Thoriq Firdaus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807"},"headline":"5 Tailwind CSS Essential Tools to Boost Your Productivity","datePublished":"2026-02-06T13:00:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/"},"wordCount":852,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tailwind-css-productivity-tools\/tailwindcss-intellisense.jpg","articleSection":["Coding"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/","name":"5 Tailwind CSS Essential Tools to Boost Your Productivity - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/tailwind-css-productivity-tools\/tailwindcss-intellisense.jpg","datePublished":"2026-02-06T13:00:42+00:00","description":"Tailwind CSS has changed how we build websites by using utility classes like text-center or bg-blue-500 directly in HTML. But as projects get bigger, the","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/tailwind-css-productivity-tools\/tailwindcss-intellisense.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/tailwind-css-productivity-tools\/tailwindcss-intellisense.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/tailwind-css-productivity-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"5 Tailwind CSS Essential Tools to Boost Your Productivity"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/e7948c7a175d211496331e4b6ce55807","name":"Thoriq Firdaus","description":"Thoriq is a writer for Hongkiat.com with a passion for web design and development. He is the author of Responsive Web Design by Examples, where he covered his best approaches in developing responsive websites quickly with a framework.","sameAs":["https:\/\/thoriq.com","https:\/\/x.com\/tfirdaus"],"jobTitle":"Web Developer","url":"https:\/\/www.hongkiat.com\/blog\/author\/thoriq\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-jj5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74219","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/113"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=74219"}],"version-history":[{"count":1,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74219\/revisions"}],"predecessor-version":[{"id":74220,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/74219\/revisions\/74220"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=74219"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=74219"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=74219"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=74219"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}