{"id":12376873,"date":"2026-03-19T00:10:29","date_gmt":"2026-03-18T16:10:29","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e6%8b%a5%e6%8a%b1-tailwind-css%ef%bc%9a%e6%8e%8c%e6%8f%a1%e5%ae%9e%e7%94%a8%e4%bc%98%e5%85%88%e7%9a%84%e7%8e%b0%e4%bb%a3-css-%e6%a1%86%e6%9e%b6%e5%bc%80%e5%8f%91%e4%b9%8b%e9%81%93\/"},"modified":"2026-03-19T00:28:56","modified_gmt":"2026-03-18T16:28:56","slug":"embrace-tailwind-css-master-modern-utility-first-css-framework-development","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/ar\/knowledge\/website-building\/embrace-tailwind-css-master-modern-utility-first-css-framework-development\/","title":{"rendered":"\u0627\u062d\u062a\u0636\u0646 \u0645\u0643\u062a\u0628\u0629 Tailwind CSS: \u0627\u0643\u062a\u0634\u0641 \u0637\u0631\u064a\u0642\u0629 \u062a\u0637\u0648\u064a\u0631 \u0625\u0637\u0627\u0631\u0627\u062a \u0639\u0645\u0644 CSS \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0627\u0644\u062a\u064a \u062a\u0631\u0643\u0632 \u0639\u0644\u0649 \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0639\u0645\u0644\u064a \u0648\u0627\u0644\u0633\u0647\u0648\u0644\u0629 \u0641\u064a \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645."},"content":{"rendered":"<h2 class=\"wp-block-heading\">\u0645\u0627 \u0647\u0648 Tailwind CSS\u061f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u0625\u0646\u0647 \u0625\u0637\u0627\u0631 \u0639\u0645\u0644 CSS \u064a\u0639\u0637\u064a \u0627\u0644\u0623\u0648\u0644\u0648\u064a\u0629 \u0644\u0644\u0648\u0638\u0627\u0626\u0641 (functionality)\u060c \u062d\u064a\u062b \u064a\u0648\u0641\u0631 \u0639\u062f\u062f\u064b\u0627 \u0643\u0628\u064a\u0631\u064b\u0627 \u0645\u0646 \u0627\u0644\u0641\u0626\u0627\u062a (classes) \u0627\u0644\u0635\u063a\u064a\u0631\u0629 \u0648\u0630\u0627\u062a \u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0627\u062a \u0627\u0644\u0645\u062d\u062f\u062f\u0629\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0628\u0628\u0646\u0627\u0621 \u0623\u064a \u062a\u0635\u0645\u064a\u0645 \u0628\u0633\u0631\u0639\u0629 \u0645\u0628\u0627\u0634\u0631\u0629 \u0641\u064a HTML. \u0639\u0644\u0649 \u0639\u0643\u0633 \u0627\u0644\u0625\u0637\u0627\u0631\u0627\u062a \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u0629 \u0645\u062b\u0644 Bootstrap \u0627\u0644\u062a\u064a \u062a\u0648\u0641\u0631 \u0645\u0643\u0648\u0646\u0627\u062a \u0645\u062d\u062f\u062f\u0629 \u0645\u0633\u0628\u0642\u064b\u0627\u060c \u0644\u0627 \u064a\u0642\u062f\u0645 Tailwind \u0623\u064a \u0645\u0643\u0648\u0646\u0627\u062a \u0634\u0627\u0645\u0644\u0629 \u0627\u0644\u0648\u0638\u0627\u0626\u0641\u060c \u0628\u0644 \u064a\u0648\u0641\u0631 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u0645\u0643\u0646 \u062f\u0645\u062c\u0647\u0627 \u0644\u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u062e\u0635\u0635\u0629 \u0628\u0627\u0644\u0643\u0627\u0645\u0644. \u0641\u0644\u0633\u0641\u062a\u0647 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0647\u064a \u201c\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u064a\u0629 \u0623\u0648\u0644\u0627\u064b\u201d (practicality first)\u060c \u0623\u064a \u0623\u0646\u0647 \u064a\u062a\u0645 \u062a\u062d\u0642\u064a\u0642 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u0639\u0642\u062f\u0629 \u0639\u0646 \u0637\u0631\u064a\u0642 \u062f\u0645\u062c \u0641\u0626\u0627\u062a \u0628\u0633\u064a\u0637\u0629 \u0630\u0627\u062a \u0645\u0647\u0627\u0645 \u0648\u0627\u062d\u062f\u0629 \u0641\u0642\u0637\u060c \u0645\u0645\u0627 \u064a\u062a\u062c\u0646\u0628 \u0627\u0644\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u0643\u062a\u0627\u0628\u0629 \u0643\u0645\u064a\u0627\u062a \u0643\u0628\u064a\u0631\u0629 \u0645\u0646 \u0627\u0644\u0643\u0648\u062f CSS \u0627\u0644\u0645\u062e\u0635\u0635 \u0648\u064a\u062d\u0633\u0646 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u062a\u0637\u0648\u064a\u0631.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0637\u0631\u064a\u0642\u0629 \u0639\u0645\u0644\u0647\u0627 \u0647\u064a \u062f\u0645\u062c \u0647\u0630\u0647 \u0627\u0644\u0641\u0626\u0627\u062a \u0627\u0644\u0623\u062f\u0648\u0627\u062a\u064a\u0629 \u0628\u0634\u0643\u0644 \u0648\u062b\u064a\u0642 \u0645\u0639 \u0647\u064a\u0643\u0644 HTML \u0627\u0644\u062e\u0627\u0635 \u0628\u0643. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u0625\u0630\u0627 \u0623\u0631\u062f\u062a \u0625\u0646\u0634\u0627\u0621 \u0632\u0631 \u064a\u062d\u062a\u0648\u064a \u0639\u0644\u0649 \u0647\u0627\u0645\u0634 \u062f\u0627\u062e\u0644\u064a\u060c \u062e\u0644\u0641\u064a\u0629 \u0632\u0631\u0642\u0627\u0621\u060c \u0648\u0646\u0635 \u0623\u0628\u064a\u0636\u060c \u0641\u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0643\u0648\u062f \u0641\u064a \u0645\u0644\u0641 CSS \u0645\u0646\u0641\u0635\u0644. <code data-no-auto-translation=\"\">.btn-primary<\/code> \u0628\u062f\u0644\u0627\u064b \u0645\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0641\u0626\u0627\u062a (classes)\u060c \u064a\u062a\u0645 \u0625\u0636\u0627\u0641\u0629 \u0627\u0644\u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0645\u0628\u0627\u0634\u0631\u0629\u064b \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 HTML. <code data-no-auto-translation=\"\">class=\"px-4 py-2 bg-blue-600 text-white rounded\"<\/code> \u0645\u064a\u0632\u0629 \u0647\u0630\u0647 \u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u062a\u0643\u0645\u0646 \u0641\u064a \u0623\u0646\u0647 \u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u0644\u062a\u0646\u0642\u0644 \u0630\u0647\u0627\u0628\u064b\u0627 \u0648\u0625\u064a\u0627\u0628\u064b\u0627 \u0628\u064a\u0646 \u0645\u0644\u0641\u0627\u062a HTML \u0648CSS\u060c \u062d\u064a\u062b \u062a\u0638\u0647\u0631 \u062c\u0645\u064a\u0639 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0628\u0634\u0643\u0644 \u0648\u0627\u0636\u062d \u062f\u0627\u062e\u0644 \u0627\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0641\u064a \u0627\u0644\u0643\u0648\u062f\u060c \u0645\u0645\u0627 \u064a\u0633\u0631\u0639 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u0645\u0646 \u0639\u0645\u0644\u064a\u0629 \u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0646\u0645\u0627\u0630\u062c \u0627\u0644\u0623\u0648\u0644\u064a\u0629 \u0648\u0627\u0644\u062a\u0643\u0631\u0627\u0631 (\u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u062a\u0643\u0631\u0631 \u0644\u0644\u0645\u0646\u062a<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u0645\u0632\u0627\u064a\u0627 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u0641\u0644\u0633\u0641\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u0634\u0639\u0628\u064a\u0629 \u0647\u0630\u0627 \u0627\u0644\u0645\u0646\u062a\u062c \u0644\u064a\u0633\u062a \u0639\u0631\u0636\u064a\u0629\u061b \u0641\u062e\u0644\u0641\u0647\u0627 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0645\u0641\u0627\u0647\u064a\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\u064a\u0629 \u0627\u0644\u0645\u062f\u0631\u0648\u0633\u0629 \u0628\u0639\u0646\u0627\u064a\u0629\u060c \u0648\u0627\u0644\u062a\u064a \u062a\u0645\u0643\u0646\u062a \u0645\u0646 \u062d\u0644 \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0645\u0634\u0643\u0644\u0627\u062a \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0641\u064a \u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0648\u064a\u0628 \u0627\u0644\u062d\u062f\u064a\u062b.<\/p>\n<!-- AUTO_INTERNAL_LINKS_START --><p>\u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0648\u0635\u0649 \u0628\u0647\u0627 <a href=\"https:\/\/www.likacloud.com\/ar\/ro\/knowledge\/website-building\/understanding-tailwind-css-utility-first-css-framework-core-concepts\/\">\u0641\u0647\u0645 \u0639\u0645\u064a\u0642 \u0644\u0644\u0623\u0641\u0643\u0627\u0631 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0644\u0625\u0637\u0627\u0631 \u0639\u0645\u0644 CSS \u0627\u0644\u062d\u062f\u064a\u062b Tailwind CSS\u060c \u0627\u0644\u0630\u064a \u064a\u0648\u0644\u064a \u0627\u0644\u0623\u0648\u0644\u0648\u064a\u0629 \u0644\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0639\u0645\u0644\u064a.<\/a>\u3002<\/p><!-- AUTO_INTERNAL_LINKS_END -->\n\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0645\u0628\u062f\u0623 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0647\u0648 \u0623\u0648\u0644\u0648\u064a\u0629 \u0627\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0639\u0645\u0644\u064a.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u201c\u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0623\u0648\u0644\u0627\u064b\u201d \u0647\u0648\u2026 <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u0627\u0644\u0641\u0644\u0633\u0641\u0629 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0647\u064a \u0623\u0646 \u0627\u0644\u0625\u0637\u0627\u0631 \u064a\u0648\u0641\u0631 \u0648\u062d\u062f\u0627\u062a \u0623\u0633\u0644\u0648\u0628\u064a\u0629 \u0623\u0633\u0627\u0633\u064a\u0629 \u0648\u063a\u064a\u0631 \u0642\u0627\u0628\u0644\u0629 \u0644\u0644\u062a\u0642\u0633\u064a\u0645 (\u0645\u0646 \u0627\u0644\u0646\u0648\u0639 \u0627\u0644\u0623\u062f\u0648\u0627\u062a\u064a)\u060c \u0648\u0644\u064a\u0633 \u0645\u0643\u0648\u0646\u0627\u062a \u0630\u0627\u062a \u0645\u0639\u0627\u0646\u064a \u0645\u062d\u062f\u062f\u0629. \u0647\u0630\u0627 \u064a\u0648\u0641\u0631 \u0645\u0631\u0648\u0646\u0629 \u0639\u0627\u0644\u064a\u0629 \u0644\u0644\u063a\u0627\u064a\u0629\u061b \u062d\u064a\u062b \u0644\u0645 \u064a\u0639\u062f \u0627\u0644\u0645\u0637\u0648\u0631\u0648\u0646 \u0645\u0642\u064a\u062f\u064a\u0646 \u0628\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0627\u0644\u0645\u062d\u062f\u062f\u0629 \u0645\u0633\u0628\u0642\u064b\u0627 \u0645\u0646 \u0642\u0628\u0644 \u0627\u0644\u0625\u0637\u0627\u0631 (\u0645\u062b\u0644 \u0628\u0637\u0627\u0642\u0627\u062a \u0623\u0648 \u0634\u0631\u0627\u0626\u0637 \u062a\u0646\u0642\u0644 \u0628\u0623\u0634\u0643\u0627\u0644 \u0645\u0639\u064a\u0646\u0629)\u060c \u0628\u0644 \u064a\u0645\u0643\u0646\u0647\u0645 \u062f\u0645\u062c \u0647\u0630\u0647 \u0627\u0644\u0648\u062d\u062f\u0627\u062a \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0629 \u0628\u062d\u0631\u064a\u0629 \u0644\u0625\u0646\u0634\u0627\u0621 \u062a\u0635\u0627\u0645\u064a\u0645 \u0641\u0631\u064a\u062f\u0629 \u0645\u0646 \u0646\u0648\u0639\u0647\u0627. \u0647\u0630\u0627 \u0645\u0646\u0627\u0633\u0628 \u0628\u0634\u0643\u0644 \u062e\u0627\u0635 \u0644\u0644\u0639\u0644\u0627\u0645\u0627\u062a \u0627\u0644\u062a\u062c\u0627\u0631\u064a\u0629 \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0648\u0627\u062c\u0647\u0627\u062a \u0645\u0633\u062a\u062e\u062f\u0645 \u0645\u062e\u0635\u0635\u0629 \u0628\u062f\u0631\u062c\u0629 \u0639\u0627\u0644\u064a\u0629\u060c \u0644\u0623\u0646\u0647 \u064a\u0639\u064a\u062f \u0643\u0627\u0645\u0644 \u0633\u0644\u0637\u0629 \u0627\u062a\u062e\u0627\u0630 \u0642\u0631\u0627\u0631\u0627\u062a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0625\u0644\u0649 \u0627\u0644\u0645\u0637\u0648\u0631\u064a\u0646.<\/p>\n<!-- AUTO_SYNCED_PATTERN_INSERT_START -->\n<div class=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mb-8 md:mb-10 mt-10\"> \r\n\t<!-- \u91cd\u590d\u5668\u5faa\u73af\u5f00\u59cb -->\r\n\t\t\r\n\t<!-- \u5546\u5bb6\u5361\u7247 -->\r\n\t<div class=\"bg-white dark:bg-gray-750 rounded-lg overflow-hidden shadow-md flex gap-1 flex-col     justify-between\" data-link=\"https:\/\/www.likacloud.com\/ar\/tolink\/wordpress-com-ai-website-builder\/\">\r\n\t\t<div class=\"flex items-start justify-between\"> \r\n\t\t\t<!-- \u5546\u5bb6logo -->\r\n\t\t\t<div class=\"w-16 h-16 bg-blue-200 dark:bg-blue-500\/30 flex items-center justify-center flex-shrink-0 p-3\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2026\/01\/20260107032104.svg\" alt=\"\u0645\u0633\u0627\u0639\u062f \u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 WordPress.com\" class=\"w-12 object-contain !dark-filter08\" title=\"\">\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<!-- \u5546\u5bb6\u4fe1\u606f -->\r\n\t\t\t<div class=\"px-4 pt-2 flex-grow\">\r\n\t\t\t\t<div class=\"flex justify-between items-start mb-2\">\r\n\t\t\t\t\t<strong class=\"text-xl font-bold\">\u0645\u0633\u0627\u0639\u062f \u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 WordPress.com<\/strong>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<span class=\"text-gray-500 dark:text-gray-300 !text-sm p-4 pb-0\">\u0625\u062a\u0627\u062d\u0629 99.999% 99.999% + \u0627\u0644\u062a\u0639\u0627\u0641\u064a \u0645\u0646 \u0627\u0644\u0643\u0648\u0627\u0631\u062b \u0639\u0628\u0631 \u0627\u0644\u0645\u0646\u0627\u0637\u0642\u060c \u062f\u0639\u0645 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0637\u0648\u0627\u0644 \u0623\u064a\u0627\u0645 \u0627\u0644\u0623\u0633\u0628\u0648\u0639\u060c \u0645\u0648\u0642\u0639 \u0645\u062c\u0627\u0646\u064a \u0644\u0628\u0646\u0627\u0621 \u0645\u0648\u0642\u0639 \u0630\u0643\u0627\u0621 \u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0645\u0639 \u0634\u0631\u0627\u0621 \u0628\u0627\u0642\u0629 \u0627\u0644\u0645\u062f\u0648\u0646\u0629<\/span>\r\n\t\t\t\t<div class=\"flex flex-col gap-4 md:gap-6 justify-between p-4\"> \r\n\t\t\t<!-- \u6807\u7b7e -->\r\n\t\t\t\t\t\t\r\n\t\t\t<!-- \u6d3b\u52a8\u548c\u94fe\u63a5 --> \r\n\t\t\t<div class=\"flex justify-between items-center gap-3 flex-col\">\r\n\t\t\t\t\t\t\t\t<div class=\"text-gray-500 dark:text-gray-300 !text-sm line-clamp-1\">\u0627\u0633\u0645 \u0646\u0637\u0627\u0642 \u0645\u062c\u0627\u0646\u064a \u0644\u0645\u062f\u0629 \u0639\u0627\u0645 \u0648\u0627\u062d\u062f<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.likacloud.com\/ar\/tolink\/wordpress-com-ai-website-builder\/\" class=\"flex justify-end font-bold !text-lg !text-blue-600 dark:!text-blue-500\">\u0642\u0645 \u0628\u0632\u064a\u0627\u0631\u0629 \u0645\u0633\u0627\u0639\u062f \u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0648\u0648\u0631\u062f\u0628\u0631\u064a\u0633.\u0643\u0648\u0645 \u2192<\/a>\r\n\t\t\t\t\t\t\t<\/div> \r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\t\r\n\t<!-- \u5546\u5bb6\u5361\u7247 -->\r\n\t<div class=\"bg-white dark:bg-gray-750 rounded-lg overflow-hidden shadow-md flex gap-1 flex-col     justify-between\" data-link=\"https:\/\/www.likacloud.com\/ar\/tolink\/ultahost-website-builder\/\">\r\n\t\t<div class=\"flex items-start justify-between\"> \r\n\t\t\t<!-- \u5546\u5bb6logo -->\r\n\t\t\t<div class=\"w-16 h-16 bg-blue-200 dark:bg-blue-500\/30 flex items-center justify-center flex-shrink-0 p-3\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251227023708.webp\" alt=\"\u0645\u0633\u0627\u0639\u062f \u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 UltaHost\" class=\"w-12 object-contain !dark-filter08\" title=\"\">\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t<!-- \u5546\u5bb6\u4fe1\u606f -->\r\n\t\t\t<div class=\"px-4 pt-2 flex-grow\">\r\n\t\t\t\t<div class=\"flex justify-between items-start mb-2\">\r\n\t\t\t\t\t<strong class=\"text-xl font-bold\">\u0645\u0633\u0627\u0639\u062f \u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 UltaHost<\/strong>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t<span class=\"text-gray-500 dark:text-gray-300 !text-sm p-4 pb-0\">\u0623\u0643\u062b\u0631 \u0645\u0646 900 \u0642\u0627\u0644\u0628 \u0645\u062c\u0627\u0646\u064a \u0648\u0642\u0627\u0628\u0644 \u0644\u0644\u062a\u062e\u0635\u064a\u0635 \u0644\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0642\u0648\u0629 \u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0627\u0644\u062a\u064a \u062a\u062d\u062a\u0627\u062c\u0647\u0627 \u0644\u062a\u062d\u0633\u064a\u0646 \u0645\u0648\u0642\u0639\u0643 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a \u0645\u0646 \u0623\u062c\u0644 \u0639\u0631\u0636 \u0627\u0644\u0628\u062d\u062b<\/span>\r\n\t\t\t\t<div class=\"flex flex-col gap-4 md:gap-6 justify-between p-4\"> \r\n\t\t\t<!-- \u6807\u7b7e -->\r\n\t\t\t\t\t\t\r\n\t\t\t<!-- \u6d3b\u52a8\u548c\u94fe\u63a5 --> \r\n\t\t\t<div class=\"flex justify-between items-center gap-3 flex-col\">\r\n\t\t\t\t\t\t\t\t<div class=\"text-gray-500 dark:text-gray-300 !text-sm line-clamp-1\">\u0627\u0644\u0639\u0631\u0636 40%<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.likacloud.com\/ar\/tolink\/ultahost-website-builder\/\" class=\"flex justify-end font-bold !text-lg !text-blue-600 dark:!text-blue-500\">\u0642\u0645 \u0628\u0632\u064a\u0627\u0631\u0629 \u0645\u0633\u0627\u0639\u062f \u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 UltaHost \u2192<\/a>\r\n\t\t\t\t\t\t\t<\/div> \r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\t<!-- \u91cd\u590d\u5668\u5faa\u73af\u7ed3\u675f -->\r\n<\/div>\r\n\r\n\r\n\n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u0642\u064a\u0648\u062f \u0648\u0627\u0644\u0627\u062a\u0633\u0627\u0642<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0639\u0644\u0649 \u0627\u0644\u0631\u063a\u0645 \u0645\u0646 \u062a\u0648\u0641\u064a\u0631 \u0627\u0644\u062d\u0631\u064a\u0629\u060c \u0625\u0644\u0627 \u0623\u0646\u2026 <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u064a\u062a\u0645 \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0627\u0644\u062a\u0646\u0627\u0633\u0642 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u0646\u0638\u0645\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\u064a\u0629 \u0627\u0644\u0645\u0635\u0645\u0645\u0629 \u0628\u0639\u0646\u0627\u064a\u0629 \u0648\u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0645\u0628\u0627\u062f\u0626 \u0645\u0639\u064a\u0646\u0629 (\u0645\u062b\u0644 \u0627\u0644\u0642\u064a\u0648\u062f \u0627\u0644\u062a\u0635\u0645\u064a\u0645\u064a\u0629). \u064a\u062d\u062f\u062f \u0627\u0644\u0625\u0637\u0627\u0631 \u0645\u0633\u0628\u0642\u064b\u0627 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u0644\u0648\u0627\u0646\u060c \u0648\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a\u060c \u0648\u0623\u062d\u062c\u0627\u0645 \u0627\u0644\u062e\u0637\u0648\u0637\u060c \u0648\u0646\u0633\u0628 \u0627\u0644\u062a\u0643\u0628\u064a\u0631\/\u0627\u0644 <code data-no-auto-translation=\"\">p-4<\/code> \u064a\u062a\u0648\u0627\u0641\u0642 \u0645\u0639 \u0642\u064a\u0645\u0629 \u0628\u0643\u0633\u0644 \u0645\u0639\u064a\u0646\u0629.<code data-no-auto-translation=\"\">text-lg<\/code> \u064a\u062a\u0648\u0627\u0641\u0642 \u0630\u0644\u0643 \u0645\u0639 \u062d\u062c\u0645 \u062e\u0637 \u0645\u0639\u064a\u0646. \u0647\u0630\u0627 \u064a\u062c\u0628\u0631 \u0627\u0644\u0641\u0631\u064a\u0642 \u0639\u0644\u0649 \u0627\u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0645\u0646 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062d\u062f\u0648\u062f\u0629 \u0648\u0645\u062a\u0646\u0627\u0633\u0642\u0629 \u0645\u0646 \u0627\u0644\u0642\u064a\u0645 \u0623\u062b\u0646\u0627\u0621 \u0627\u0644\u062a\u0635\u0645\u064a\u0645\u060c \u0645\u0645\u0627 \u064a\u062a\u062c\u0646\u0628 \u0645\u0634\u0627\u0643\u0644 \u0639\u062f\u0645 \u0627\u0644\u062a\u0646\u0627\u0633\u0642 \u0627\u0644\u0628\u0635\u0631\u064a \u0627\u0644\u0646\u0627\u062a\u062c\u0629 \u0639\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0642\u064a\u0645 \u0627\u0644\u0628\u0643\u0633\u0644\u0627\u062a \u0627\u0644\u0639\u0634\u0648\u0627\u0626\u064a\u0629\u060c \u0648\u0641\u064a \u0627\u0644\u0646\u0647\u0627\u064a\u0629 \u064a\u062a\u0645 \u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0629 \u0645\u062a\u0646\u0627\u063a\u0645\u0629 \u0648\u0645\u0648\u062d\u062f\u0629 \u0645\u0646 \u0627\u0644\u0646\u0627\u062d\u064a\u0629 \u0627\u0644\u0628\u0635\u0631\u064a\u0629.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0642\u0627\u0628\u0644\u064a\u0629 \u0627\u0644\u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0645\u0645\u062a\u0627\u0632\u0629<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0641\u064a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u0629 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0644\u063a\u0629 CSS\u060c \u0645\u0639 \u062a\u0648\u0633\u0639 \u062d\u062c\u0645 \u0627\u0644\u0645\u0634\u0631\u0648\u0639\u060c \u062a\u0635\u0628\u062d \u0645\u0644\u0641\u0627\u062a CSS \u0623\u0643\u062b\u0631 \u0636\u062e\u0627\u0645\u0629 \u0648\u0635\u0639\u0648\u0628\u0629 \u0641\u064a \u0627\u0644\u0635\u064a\u0627\u0646\u0629\u060c \u0648\u062a\u0638\u0647\u0631 \u0645\u0634\u0627\u0643\u0644 \u0645\u062a\u0639\u062f\u062f\u0629 \u0645\u062b\u0644 \u062a\u0639\u0627\u0631\u0636 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0641\u0626\u0627\u062a (classes)\u060c \u062a\u063a\u0637\u064a\u0629 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 (style overrides)\u060c \u0648\u0627\u0644\u0635\u0631\u0627\u0639\u0627\u062a \u0628\u064a\u0646 \u062e\u0635\u0627\u0626\u0635 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0645<code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0628\u0634\u0643\u0644 \u0645\u062d\u0644\u064a \u0644\u0643\u0644 \u0639\u0646\u0635\u0631 HTML\u060c \u062a\u0645 \u0627\u0644\u0642\u0636\u0627\u0621 \u062a\u0642\u0631\u064a\u0628\u064b\u0627 \u062a\u0645\u0627\u0645\u064b\u0627 \u0639\u0644\u0649 \u0627\u0644\u0622\u062b\u0627\u0631 \u0627\u0644\u062c\u0627\u0646\u0628\u064a\u0629 \u0627\u0644\u0646\u0627\u062c\u0645\u0629 \u0639\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 CSS \u0627\u0644\u0639\u0627\u0645. \u0644\u062a\u0639\u062f\u064a\u0644 \u0634\u0643\u0644 \u0632\u0631 \u0645\u0639\u064a\u0646\u060c \u0643\u0644 \u0645\u0627 \u0639\u0644\u064a\u0643 \u0641\u0639\u0644\u0647 \u0647\u0648 \u062a\u063a\u064a\u064a\u0631 \u0627\u0633\u0645 \u0627\u0644\u0641\u0626\u0629 (class) \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u060c \u062f\u0648\u0646 \u0627\u0644\u0642\u0644\u0642 \u0645\u0646 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0644\u0649 \u0623\u062c\u0632\u0627\u0621 \u0623\u062e\u0631\u0649 \u0645\u0646 \u0627\u0644\u0635\u0641\u062d\u0629 \u0628\u0634\u0643\u0644 \u063a\u064a\u0631 \u0645\u0642\u0635\u0648\u062f. \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0630\u0644\u0643\u060c \u0646\u0638\u0631\u064b\u0627 \u0644\u0623\u0646 \u0645\u0639\u0638\u0645 \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u064a\u062a\u0645 \u062a\u0646\u0641\u064a\u0630\u0647\u0627 \u0639\u0628\u0631 \u0641\u0626\u0627\u062a \u0645\u0633\u0627\u0639\u062f\u0629 (helper classes)\u060c \u064a\u0645\u0643\u0646 \u0641\u064a \u0627\u0644\u0646\u0647\u0627\u064a\u0629 \u0625\u0632\u0627\u0644\u0629 \u062c\u0645\u064a\u0639 \u0623\u062c\u0632\u0627\u0621 CSS \u063a\u064a\u0631 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0648\u0627\u062a \u0645\u062b\u0644 PurgeCSS\u060c \u0645\u0645\u0627 \u064a\u0646\u062a\u062c \u0645\u0644\u0641\u0627\u062a \u0623\u0646\u0645\u0627\u0637 \u0645\u062e\u0641\u0636\u0629 \u0627\u0644\u062d\u062c\u0645 \u0644\u0628\u064a\u0626\u0629 \u0627\u0644\u062a\u0637\u0648\u064a\u0631.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u0633\u0627\u0633\u064a \u0648\u0627\u0644\u062a\u0643\u0648\u064a\u0646<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0628\u062f\u0623 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 <code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u0645\u0631\u0646 \u0644\u0644\u063a\u0627\u064a\u0629\u061b \u064a\u0645\u0643\u0646\u0643 \u062f\u0645\u062c\u0647 \u0641\u064a \u0645\u0634\u0631\u0648\u0639\u0643 \u0628\u0639\u062f\u0629 \u0637\u0631\u0642 \u0645\u062e\u062a\u0644\u0641\u0629.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0642\u0645 \u0628\u0627\u0644\u062a\u062b\u0628\u064a\u062a \u0645\u0646 \u062e\u0644\u0627\u0644 \u0645\u062f\u064a\u0631 \u0627\u0644\u062d\u0632\u0645.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0627\u0644\u0637\u0631\u064a\u0642\u0629 \u0627\u0644\u0623\u0643\u062b\u0631 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u064b\u0627 \u0648\u0627\u0644\u0645\u0648\u0635\u0649 \u0628\u0647\u0627 \u0647\u064a \u0627\u0644\u062a\u062b\u0628\u064a\u062a \u0639\u0628\u0631 npm \u0623\u0648 yarn. \u0623\u0648\u0644\u0627\u064b\u060c \u0642\u0645 \u0628\u062a\u0647\u064a\u0626\u0629 \u0627\u0644\u0645\u062c\u0644\u062f \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0644\u0645\u0634\u0631\u0648\u0639 (\u0627\u0644\u062f\u064a\u0631\u064a\u0643\u062a\u0648\u0631\u064a \u0627\u0644\u0631\u0626\u064a\u0633\u064a) \u062b\u0645 \u0642\u0645 \u0628\u062a\u062b\u0628\u064a\u062a Tailwind:<\/p>\n<!-- AUTO_INTERNAL_LINKS_START --><p>\u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0648\u0635\u0649 \u0628\u0647\u0627 <a href=\"https:\/\/www.likacloud.com\/ar\/ro\/knowledge\/website-building\/tailwind-css-complete-beginners-guide-modern-responsive-web-design\/\">\u062f\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0644\u0645\u0628\u062a\u062f\u0626\u064a\u0646 \u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 Tailwind CSS \u0641\u064a \u0628\u0646\u0627\u0621 \u0635\u0641\u062d\u0627\u062a \u0648\u064a\u0628 \u062d\u062f\u064a\u062b\u0629 \u0648\u0645\u062a\u062c\u0627\u0648\u0628\u0629<\/a>\u3002<\/p><!-- AUTO_INTERNAL_LINKS_END -->\n\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-bash\" data-no-auto-translation=\"\">npm install -D tailwindcss\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0633\u064a\u062a\u0645 \u0625\u0646\u0634\u0627\u0621 \u0646\u0633\u062e\u0629 \u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0645\u0646\u0647. <code data-no-auto-translation=\"\">tailwind.config.js<\/code> \u0645\u0644\u0641 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a. \u0628\u0639\u062f \u0630\u0644\u0643\u060c \u0633\u062a\u062d\u062a\u0627\u062c \u0625\u0644\u0649 \u0625\u0646\u0634\u0627\u0621 \u0645\u0644\u0641 CSS (\u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u2026 <code data-no-auto-translation=\"\">src\/input.css<\/code>)\u060c \u0648\u0623\u0636\u0641 \u0623\u0648\u0627\u0645\u0631 Tailwind:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-css\" data-no-auto-translation=\"\">@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0623\u062e\u064a\u0631\u064b\u0627\u060c \u064a\u062a\u0645 \u0645\u0639\u0627\u0644\u062c\u0629 \u0645\u0644\u0641 CSS \u0647\u0630\u0627 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0627\u0629 \u0633\u0637\u0631 \u0627\u0644\u0623\u0648\u0627\u0645\u0631 \u0623\u0648 \u0639\u0646 \u0637\u0631\u064a\u0642 \u062a\u0643\u0648\u064a\u0646\u0647\u0627 \u0636\u0645\u0646 \u0639\u0645\u0644\u064a\u0629 \u0627\u0644\u0628\u0646\u0627\u0621 (\u0645\u062b\u0644 PostCSS) \u0644\u0625\u0646\u062a\u0627\u062c \u0627\u0644\u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u0644\u0641 \u0627\u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a.<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">tailwind.config.js<\/code> \u0647\u0630\u0627 \u0647\u0648 \u062c\u0648\u0647\u0631 \u0627\u0644\u0625\u0637\u0627\u0631 (\u0627\u0644\u0628\u0631\u0646\u0627\u0645\u062c). \u0647\u0646\u0627\u060c \u064a\u0645\u0643\u0646\u0643 \u062a\u062e\u0635\u064a\u0635 \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0634\u0643\u0644 \u0643\u0627\u0645\u0644 \u062d\u0633\u0628 \u0631\u063a\u0628\u062a\u0643. \u064a\u0645\u0643\u0646\u0643 \u062a\u0648\u0633\u064a\u0639 \u0623\u0648 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u062b\u064a\u0645\u0627\u062a \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629\u060c \u0628\u0645\u0627 \u0641\u064a \u0630\u0644\u0643 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u062e\u0637\u0648\u0637 \u0648\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631 \u0648\u0646\u0642\u0627\u0637 \u0627\u0644\u062a\u062d\u0648\u064a\u0644 (breakpoints) \u0641\u064a \u0627\u0644\u0639\u0631\u0636. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u064a\u0645\u0643\u0646\u0643 \u0625\u0636\u0627\u0641\u0629 \u0623\u0644\u0648<\/p>\n<!-- AUTO_SYNCED_PATTERN_INSERT_START -->\n\n  <div class=\"flex justify-between items-center flex-col lg:flex-row xl:flex-col 2xl:flex-row gap-6 sm:gap-8 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-8 lg:mb-10 sm:p-6 bg-white dark:bg-gray-750 shadow-md transition-colors duration-300\"\n         data-link=\"https:\/\/www.likacloud.com\/ar\/tolink\/bluehost-wordpress-hosting\/\">\n\n      <div class=\"flex flex-col gap-3 gap-4 sm:gap-6 w-full\">\n        <strong class=\"text-2xl font-semibold text-gray-900 dark:text-gray-200\">\u0645\u0646\u0634\u0626 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 Bluehost<\/strong>\n        <div class=\"text-gray-600 dark:text-gray-300 word-word\">\u062a\u0642\u062f\u0645 \u0623\u062f\u0627\u0629 \u0625\u0646\u0634\u0627\u0621 \u0645\u0648\u0627\u0642\u0639 \u0627\u0644\u0648\u064a\u0628 \u0628\u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a\u060c \u0648\u062f\u0639\u0645 \u0639\u0628\u0631 \u0627\u0644\u062f\u0631\u062f\u0634\u0629 \u0627\u0644\u0645\u0628\u0627\u0634\u0631\u0629 \u0648\u0627\u0644\u062f\u0639\u0645 \u0639\u0628\u0631 \u0627\u0644\u0647\u0627\u062a\u0641 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0637\u0648\u0627\u0644 \u0623\u064a\u0627\u0645 \u0627\u0644\u0623\u0633\u0628\u0648\u0639\u060c \u0648\u0627\u0633\u0645 \u0646\u0637\u0627\u0642 \u0645\u062c\u0627\u0646\u064a \u0644\u0645\u062f\u0629 \u0639\u0627\u0645 \u0648\u0627\u062d\u062f\u060c \u0648\u0634\u0628\u0643\u0629 CDN \u0645\u062c\u0627\u0646\u064a\u0629\u060c \u0648\u0627\u062a\u0641\u0627\u0642\u064a\u0629 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u062e\u062f\u0645\u0629 99.99%<\/div>\n      <\/div>\n\n      <div class=\"flex items-center flex-col md:flex-row lg:flex-col xl:flex-row 2xl:flex-col gap-6 shrink-0\">\n                  <a href=\"https:\/\/www.likacloud.com\/ar\/tolink\/bluehost-wordpress-hosting\/\">\n                          <!-- \u53ea\u6709\u4e00\u4e2a\u53ef\u7528 icon\uff08\u6216\u591c\u95f4\u56de\u9000\uff09\uff0c\u4e24\u79cd\u6a21\u5f0f\u5171\u7528 -->\n              <img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251231095441.svg\" alt=\"\u0634\u0639\u0627\u0631 \u0645\u0633\u0627\u0639\u062f \u0627\u0644\u0645\u0648\u0642\u0639 \u0627\u0644\u0625\u0644\u0643\u062a\u0631\u0648\u0646\u064a\" class=\"content-promotion-card-icon h-9 min-h-9\" title=\"\">\n                      <\/a>\n          \n        <a href=\"https:\/\/www.likacloud.com\/ar\/tolink\/bluehost-wordpress-hosting\/\"\n           class=\"bg-blue-500 w-full md:w-auto lg:w-full xl:w-auto 2xl:w-full text-center !text-white dark:!text-gray-200 !px-5 !py-1.5 rounded-full hover:bg-blue-600 transition-colors\">\n          \u0642\u0645 \u0628\u0632\u064a\u0627\u0631\u0629 Bluehost        <\/a>\n      <\/div>\n    <\/div>\n\n    \n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-javascript\" data-no-auto-translation=\"\">module.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u2018brand-blue\u2019: &#039;#1992d4&#039;,\n      },\n      screens: {\n        \u2018xs\u2019: \u2018475px\u2019,\n      },\n    },\n  },\n  \/\/ ... \u5176\u4ed6\u914d\u7f6e\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u064a\u0645\u0643\u0646\u0643 \u0623\u064a\u0636\u064b\u0627 \u0645\u0646 \u062e\u0644\u0627\u0644\u2026 <code data-no-auto-translation=\"\">content<\/code> \u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u062d\u0642\u0644 \u0644\u0640 PurgeCSS (\u0648\u0627\u0644\u062a\u064a \u062a\u064f\u0633\u0645\u0649 \u0641\u064a \u0625\u0635\u062f\u0627\u0631\u0627\u062a Tailwind v3 \u0648\u0645\u0627 \u0628\u0639\u062f\u0647\u0627 \u201c\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0627\u0644\u0645\u062d\u062a\u0648\u0649\u201d) \u062a\u062d\u062f\u062f \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u062a\u064a \u064a\u062c\u0628 \u0639\u0644\u0649 \u0627\u0644\u0625\u0637\u0627\u0631 \u0645\u0633\u062d\u0647\u0627 \u0644\u062a\u062d\u062f\u064a\u062f \u0623\u064a \u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u0628\u0631\u0645\u062c\u064a\u0629 \u064a\u062a\u0645 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647\u0627\u060c \u0648\u0647\u0630\u0627 \u0623\u0645\u0631 \u0628\u0627\u0644\u063a \u0627\u0644\u0623\u0647\u0645\u064a\u0629 \u0644\u062a\u0648\u0644\u064a\u062f \u0645\u0644\u0641 CSS \u0646\u0647\u0627\u0626\u064a \u0645\u0636\u063a\u0648\u0637 \u0648\u0645\u0635\u063a\u0631.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062a\u062c\u0627\u0648\u0628 \u0648\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u064a\u062a\u0645\u064a\u0632 \u0628\u0623\u062f\u0648\u0627\u062a \u062a\u0635\u0645\u064a\u0645 \u0627\u0633\u062a\u062c\u0627\u0628\u064a\u0629 \u0642\u0648\u064a\u0629 \u0645\u062f\u0645\u062c\u0629 \u0641\u064a\u0647. \u064a\u0645\u0643\u0646 \u0625\u0646\u0634\u0627\u0621 \u062a\u062e\u0637\u064a\u0637\u0627\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u064a\u0629 \u0628\u0633\u0647\u0648\u0644\u0629 \u0639\u0646 \u0637\u0631\u064a\u0642 \u0625\u0636\u0627\u0641\u0629 \u0628\u0627\u062f\u0626\u0629 \u0645\u0639\u064a\u0646\u0629 \u0625\u0644\u0649 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0623\u062f\u0648\u0627\u062a. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c<code data-no-auto-translation=\"\">md:flex<\/code> \u064a\u0634\u064a\u0631 \u0630\u0644\u0643 \u0625\u0644\u0649 \u0623\u0646 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u0634\u0627\u0634\u0627\u062a \u0645\u062a\u0648\u0633\u0637\u0629 \u0627\u0644\u062d\u062c\u0645 \u0648\u0623\u0643\u0628\u0631. <code data-no-auto-translation=\"\">display: flex<\/code>\u064a\u0648\u0641\u0631 \u0627\u0644\u0625\u0637\u0627\u0631 \u0628\u0634\u0643\u0644 \u0627\u0641\u062a\u0631\u0627\u0636\u064a \u062e\u0645\u0633 \u0646\u0642\u0627\u0637 \u062a\u0648\u0642\u0641 (sm\u060c md\u060c lg\u060c xl\u060c 2xl)\u060c \u0648\u064a\u0645\u0643\u0646 \u062a\u062e\u0635\u064a\u0635 \u062c\u0645\u064a\u0639\u0647\u0627 \u0641\u064a \u0645\u0644\u0641 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u0639\u0627\u0644\u062c\u0629 \u062d\u0627\u0644\u0627\u062a \u0627\u0644\u062a\u0641\u0627\u0639\u0644 \u0628\u0633\u064a\u0637\u0629 \u0623\u064a\u0636\u064b\u0627. \u064a\u0645\u0643\u0646 \u062a\u0637\u0628\u064a\u0642 \u0623\u0646\u0645\u0627\u0637 \u0645\u062e\u062a\u0644\u0641\u0629 (\u0645\u062b\u0644 \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062a\u0623\u062b\u064a\u0631 \u0639\u0646\u062f \u0627\u0644\u062a\u0645\u0631\u064a\u0631 \u0641\u0648\u0642 \u0627\u0644\u0639\u0646\u0635\u0631\u060c \u0623\u0648 \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062a\u0631\u0643\u064a\u0632\u060c \u0623\u0648 \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u062a\u0646\u0634\u064a\u0637) \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0628\u0627\u062f\u0626\u0627\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629. \u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c<code data-no-auto-translation=\"\">hover:bg-blue-700<\/code> \u0633\u064a\u062a\u063a\u064a\u0631 \u0644\u0648\u0646 \u0627\u0644\u062e\u0644\u0641\u064a\u0629 \u0639\u0646\u062f\u0645\u0627 \u064a\u062a\u0645 \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u0645\u0627\u0648\u0633 \u0641\u0648\u0642\u0647. \u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0623\u0643\u062b\u0631 \u062a\u0639\u0642\u064a\u062f\u064b\u0627\u060c \u0645\u062b\u0644 \u062a\u062d\u0631\u064a\u0643 \u0627\u0644\u0645\u0627\u0648\u0633 \u0641\u0648\u0642 \u0645\u062c\u0645\u0648\u0639\u0627\u062a \u0645\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u2026<code data-no-auto-translation=\"\">group-hover:<\/code>) \u0623\u0648 \u0623\u0646 \u0627\u0644\u0639\u0646\u0635\u0631 \u0627\u0644\u0645\u0631\u0627\u062f \u062a\u062d\u062f\u064a\u062f\u0647 \u0645\u0631\u0626\u064a (<code data-no-auto-translation=\"\">focus-visible:<\/code>\u0643\u0645\u0627 \u064a\u0648\u0641\u0631 \u0627\u0644\u0625\u0637\u0627\u0631 \u062f\u0639\u0645\u064b\u0627 \u0644\u0644\u0645\u062a\u063a\u064a\u0631\u0627\u062a \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0623\u064a\u0636\u064b\u0627.<\/p>\n<!-- AUTO_INTERNAL_LINKS_START --><p>\u0627\u0644\u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0645\u0648\u0635\u0649 \u0628\u0647\u0627 <a href=\"https:\/\/www.likacloud.com\/ar\/ro\/knowledge\/website-building\/master-tailwind-css-complete-guide-from-basics-to-practice\/\">\u0625\u062a\u0642\u0627\u0646 Tailwind CSS: \u062f\u0644\u064a\u0644 \u0634\u0627\u0645\u0644 \u0644\u0625\u0637\u0627\u0631 \u0639\u0645\u0644 CSS \u0627\u0644\u062d\u062f\u064a\u062b \u0644\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0623\u0645\u0627\u0645\u064a\u0629\u060c \u0645\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a \u0625\u0644\u0649 \u0627\u0644\u062a\u0637\u0628\u064a\u0642 \u0627\u0644\u0639\u0645\u0644\u064a<\/a>\u3002<\/p><!-- AUTO_INTERNAL_LINKS_END -->\n\n\n\n\n<h2 class=\"wp-block-heading\">\u062a\u0642\u0646\u064a\u0627\u062a \u0645\u062a\u0642\u062f\u0645\u0629 \u0648\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a.<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0639\u062f \u0625\u062a\u0642\u0627\u0646 \u0627\u0644\u0623\u0633\u0627\u0633\u064a\u0627\u062a\u060c \u064a\u0645\u0643\u0646 \u0644\u0628\u0639\u0636 \u0627\u0644\u062d\u064a\u0644 \u0627\u0644\u0645\u062a\u0642\u062f\u0645\u0629 \u0648\u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a \u0623\u0646 \u062a\u0633\u0627\u0639\u062f\u0643 \u0639\u0644\u0649 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u062f\u0627\u0629 \u0628\u0643\u0641\u0627\u0621\u0629 \u0623\u0639\u0644\u0649. <code data-no-auto-translation=\"\">Tailwind CSS<\/code>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0648\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0645\u0631 `@apply`<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0639\u0644\u0649 \u0627\u0644\u0631\u063a\u0645 \u0645\u0646 \u0627\u0644\u062a\u0634\u062c\u064a\u0639 \u0639\u0644\u0649 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u0623\u062f\u0648\u0627\u062a\u064a\u0629 \u0645\u0628\u0627\u0634\u0631\u0629\u064b \u062f\u0627\u062e\u0644 HTML\u060c \u0625\u0644\u0627 \u0623\u0646\u0647 \u0639\u0646\u062f\u0645\u0627 \u062a\u0638\u0647\u0631 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a \u0641\u064a \u0623\u0645\u0627\u0643\u0646 \u0645\u062a\u0639\u062f\u062f\u0629 (\u0645\u062b\u0644 \u0623\u0632\u0631\u0627\u0631 \u0628\u062a\u0635\u0645\u064a\u0645 \u0645\u0639\u064a\u0646)\u060c \u0641\u0645\u0646 \u0623\u062c\u0644 \u0627\u0644\u062d\u0641\u0627\u0638 \u0639\u0644\u0649 \u0645\u0628\u062f\u0623 DRY (Don\u2019t Repeat Yourself)\u060c \u064a\u0645\u0643\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0633\u0627\u0644\u064a\u0628 \u0645\u0639\u064a\u0646\u0629 \u0644\u062a\u062c\u0646\u0628 \u0627\u0644\u062a\u0643\u0631\u0627\u0631. <code data-no-auto-translation=\"\">@apply<\/code> \u0627\u0644\u062a\u0639\u0644\u064a\u0645\u0629 \u0641\u064a CSS \u062a\u0642\u0648\u0645 \u0628\u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0647\u0630\u0647 \u0627\u0644\u0641\u0626\u0627\u062a (classes) \u0648\u0646\u0642\u0644\u0647\u0627 \u0625\u0644\u0649 \u0641\u0626\u0629 \u062c\u062f\u064a\u062f\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0645\u0643\u0648\u0646 (component).<\/p>\n<!-- AUTO_SYNCED_PATTERN_INSERT_START -->\n\n  <div class=\"flex justify-between items-center flex-col lg:flex-row xl:flex-col 2xl:flex-row gap-6 sm:gap-8 rounded-lg border border-gray-200 dark:border-gray-700 p-4 mb-8 lg:mb-10 sm:p-6 bg-white dark:bg-gray-750 shadow-md transition-colors duration-300\"\n         data-link=\"https:\/\/www.likacloud.com\/ar\/tolink\/hosting-com-sitebuilder\/\">\n\n      <div class=\"flex flex-col gap-3 gap-4 sm:gap-6 w-full\">\n        <strong class=\"text-2xl font-semibold text-gray-900 dark:text-gray-200\">hosting.com<\/strong>\n        <div class=\"text-gray-600 dark:text-gray-300 word-word\">SSL \u0645\u062c\u0627\u0646\u064a\u060c Cloudflare CDN\u060c Cloudflare CDN\u060c WAF\u060c \u0623\u0643\u062b\u0631 \u0645\u0646 40 \u063a\u0631\u0641\u0629 \u062e\u0648\u0627\u062f\u0645 \u0639\u0627\u0644\u0645\u064a\u0629 \u0644\u0644\u0627\u062e\u062a\u064a\u0627\u0631 \u0645\u0646 \u0628\u064a\u0646\u0647\u0627\u060c \u0648\u0648\u0642\u062a \u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0623\u0642\u0644 \u0628\u0627\u0644\u0642\u0631\u0628 \u0645\u0646\u0643\u060c \u0648\u062f\u0639\u0645 \u0627\u0644\u062e\u062f\u0645\u0629 \u0639\u0644\u0649 \u0645\u062f\u0627\u0631 \u0627\u0644\u0633\u0627\u0639\u0629 \u0637\u0648\u0627\u0644 \u0623\u064a\u0627\u0645 \u0627\u0644\u0623\u0633\u0628\u0648\u0639\/365\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0622\u0646 \u062a\u0648\u0641\u064a\u0631 \u0645\u0627 \u064a\u0635\u0644 \u0625\u0644\u0649 671 \u062a\u064a\u0631\u0627\u0628\u0627\u064a\u062a\u060c \u0648\u062f\u0639\u0645 \u0625\u0646\u0634\u0627\u0621\u0627\u062a \u0627\u0644\u0630\u0643\u0627\u0621 \u0627\u0644\u0627\u0635\u0637\u0646\u0627\u0639\u064a \u0648\u062a\u062d\u0633\u064a\u0646 \u0645\u062d\u0631\u0643\u0627\u062a \u0627\u0644\u0628\u062d\u062b!<\/div>\n      <\/div>\n\n      <div class=\"flex items-center flex-col md:flex-row lg:flex-col xl:flex-row 2xl:flex-col gap-6 shrink-0\">\n                  <a href=\"https:\/\/www.likacloud.com\/ar\/tolink\/hosting-com-sitebuilder\/\">\n                          <!-- \u767d\u5929 -->\n              <img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/09\/20250901222940.svg\" alt=\" LOGO\" class=\"content-promotion-card-icon h-9 min-h-9 dark:hidden\" title=\"\">\n              <!-- \u591c\u95f4 -->\n              <img decoding=\"async\" src=\"https:\/\/www.likacloud.com\/wp-content\/uploads\/2025\/12\/20251228220957.webp\" alt=\" LOGO\" class=\"content-promotion-card-icon h-9 min-h-9 hidden dark:block\" title=\"\">\n                      <\/a>\n          \n        <a href=\"https:\/\/www.likacloud.com\/ar\/tolink\/hosting-com-sitebuilder\/\"\n           class=\"bg-blue-500 w-full md:w-auto lg:w-full xl:w-auto 2xl:w-full text-center !text-white dark:!text-gray-200 !px-5 !py-1.5 rounded-full hover:bg-blue-600 transition-colors\">\n          \u0642\u0645 \u0628\u0632\u064a\u0627\u0631\u0629 hosting.com        <\/a>\n      <\/div>\n    <\/div>\n\n    \n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-css\" data-no-auto-translation=\"\">.btn-primary {\n  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0639\u062f \u0630\u0644\u0643\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0630\u0644\u0643 \u0641\u064a HTML. <code data-no-auto-translation=\"\">class=\u201cbtn-primary\u201d<\/code>\u064a\u062c\u0628 \u0623\u0646 \u062a\u0636\u0639 \u0641\u064a \u0627\u0639\u062a\u0628\u0627\u0631\u0643 \u0623\u0646\u0651 \u0627\u0644\u0625\u0641\u0631\u0627\u0637 \u0641\u064a \u0627\u0633\u062a\u062e\u062f\u0627\u0645 <code data-no-auto-translation=\"\">@apply<\/code> \u0642\u062f \u064a\u062c\u0639\u0644\u0643 \u0630\u0644\u0643 \u062a\u0639\u0648\u062f \u0625\u0644\u0649 \u0637\u0631\u064a\u0642\u0629 \u0643\u062a\u0627\u0628\u0629 CSS \u0627\u0644\u062a\u0642\u0644\u064a\u062f\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u0624\u062f\u064a \u0625\u0644\u0649 \u0641\u0642\u062f\u0627\u0646 \u0628\u0639\u0636 \u0645\u0632\u0627\u064a\u0627 \u201c\u062a\u0631\u062a\u064a\u0628 \u0627\u0644\u062c\u0648\u062f\u0629 \u0641\u0648\u0642 \u0627\u0644\u0634\u0643\u0644\u201d (\u0623\u064a \u0623\u0646 \u0627\u0644\u0648\u0638\u064a\u0641\u0629 \u062a\u0623\u062a\u064a \u0623\u0648\u0644\u0627\u064b \u0642\u0628\u0644 \u0627\u0644\u0634\u0643\u0644). \u0644\u0630\u0644\u0643\u060c \u0646\u0646\u0635\u062d \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0628\u062d\u0630\u0631\u060c \u0648\u0627\u0642\u062a\u0635\u0627\u0631\u0627<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0645\u0639\u0627\u0644\u062c\u0629 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0641\u0626\u0627\u062a \u0627\u0644\u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a\u0629<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0641\u064a \u0625\u0637\u0627\u0631\u0627\u062a \u0627\u0644\u0648\u0627\u062c\u0647\u0629 \u0627\u0644\u0623\u0645\u0627\u0645\u064a\u0629 \u0627\u0644\u062d\u062f\u064a\u062b\u0629 \u0645\u062b\u0644 React \u0648Vue\u060c \u063a\u0627\u0644\u0628\u064b\u0627 \u0645\u0627 \u064a\u0643\u0648\u0646 \u0645\u0646 \u0627\u0644\u0636\u0631\u0648\u0631\u064a \u062f\u0645\u062c \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0641\u0626\u0627\u062a (classes) \u0628\u0634\u0643\u0644 \u062f\u064a\u0646\u0627\u0645\u064a\u0643\u064a \u0628\u0646\u0627\u0621\u064b \u0639\u0644\u0649 \u062d\u0627\u0644\u0629 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a (components). \u062f\u0645\u062c \u0627\u0644\u0633\u0644\u0627\u0633\u0644 \u0627\u0644\u0646\u0635\u064a\u0629 \u064a\u062f\u0648\u064a\u064b\u0627 \u0642\u062f \u064a\u0624\u062f\u064a \u0625\u0644\u0649 \u0623\u062e\u0637\u0627\u0621 \u0628\u0633\u0647\u0648\u0644\u0629 \u0648\u0644\u0627 \u064a\u0639\u062a\u0628\u0631 \u0637\u0631\u064a\u0642\u0629 \u0623\u0646\u064a\u0642\u0629 \u0644\u0644\u0642\u064a\u0627\u0645 \u0628\u0630\u0644\u0643. \u064a\u064f\u0646\u0635\u062d \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0628\u0639\u0636 \u0627\u0644\u0645\u0643\u062a\u0628\u0627\u062a \u0627\u0644\u0645\u0633\u0627\u0639\u062f\u0629 (helper libraries) \u0644\u0645\u0639\u0627\u0644\u062c\u0629 \u0627\u0644\u0623 <code data-no-auto-translation=\"\">clsx<\/code>(\u0623\u0648 \u0645\u064a\u0632\u0627\u062a \u0645\u0645\u0627\u062b\u0644\u0629) <code data-no-auto-translation=\"\">classnames<\/code>\uff09\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-javascript\" data-no-auto-translation=\"\">import clsx from \u2018clsx\u2019;\n\nfunction Button({ isActive, children }) {\n  const buttonClasses = clsx(\n    \u2018px-4 py-2 rounded\u2019,\n    {\n      \u2018bg-blue-600 text-white\u2019: isActive,\n      \u2018bg-gray-300 text-gray-800\u2019: !isActive,\n    }\n  );\n\nreturn &lt;button className={buttonClasses}&gt;{children}&lt;\/button&gt;;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u0627\u0644\u062a\u0643\u0627\u0645\u0644 \u0645\u0639 \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0644\u0641\u0631\u0642 \u0627\u0644\u0643\u0628\u064a\u0631\u0629\u060c<code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u0643\u0648\u0646 \u0647\u0630\u0627 \u0627\u0644\u0646\u0638\u0627\u0645 \u062c\u0633\u0631\u064b\u0627 \u064a\u0631\u0628\u0637 \u0628\u064a\u0646 \u0645\u0631\u062d\u0644\u062a\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0648\u0627\u0644\u062a\u0637\u0648\u064a\u0631. \u064a\u0645\u0643\u0646 \u0644\u0644\u0645\u0635\u0645\u0645\u064a\u0646 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0631\u0645\u0648\u0632 \u062a\u0635\u0645\u064a\u0645 Tailwind (\u0645\u062b\u0644 \u0627\u0644\u0623\u0644\u0648\u0627\u0646 \u0648\u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a)\u060c \u0645\u062b\u0644 Figma\u060c \u0644\u0625\u0646\u0634\u0627\u0621 \u0627\u0644\u062a\u0635\u0627\u0645\u064a\u0645 \u0627\u0644\u062e\u0627\u0635\u0629 \u0628\u0647\u0645\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0645\u0643\u0646 \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u0627\u0644\u0627\u0633\u062a\u0634\u0647\u0627\u062f \u0645\u0628\u0627\u0634\u0631\u0629 \u0628\u0642\u064a\u0645 \u0647\u0630\u0647 \u0627\u0644\u0631\u0645\u0648\u0632 \u0641\u064a \u0627\u0644\u0643\u0648\u062f. \u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0644\u062a\u0643\u0648\u064a\u0646 \u0627\u0644\u062f\u0642\u064a\u0642\u2026 <code data-no-auto-translation=\"\">tailwind.config.js<\/code>\u064a\u0645\u0643\u0646 \u0636\u0645\u0627\u0646 \u0623\u0646 \u0643\u0644 \u0644\u0648\u0646 \u0648\u0643\u0644 \u0642\u064a\u0645\u0629 \u0645\u0633\u0627\u0641\u0629 \u0641\u064a \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0645\u0642\u0627\u0628\u0644\u0647\u0627 \u0641\u0626\u0629 \u0623\u062f\u0648\u0627\u062a \u0645\u062e\u0635\u0635\u0629\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0628\u062a\u062d\u0642\u064a\u0642 \u062a\u062d\u0648\u064a\u0644 \u0633\u0644\u0633 \u0648\u0639\u0627\u0644\u064a \u0627\u0644\u062f\u0642\u0629 \u0645\u0646 \u0645\u0631\u062d\u0644\u0629 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0625\u0644\u0649 \u0645\u0631\u062d\u0644\u0629 \u0643\u062a\u0627\u0628\u0629 \u0627\u0644\u0643\u0648\u062f.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u0645\u0644\u062e\u0635\u0627\u062a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code data-no-auto-translation=\"\">Tailwind CSS<\/code> \u0644\u0642\u062f \u063a\u064a\u0631 Tailwind CSS \u0637\u0631\u064a\u0642\u0629 \u0639\u0645\u0644 \u0627\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u062a\u0645\u0627\u0645\u064b\u0627 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0645\u0641\u0647\u0648\u0645\u0647 \u0627\u0644\u0641\u0631\u064a\u062f \u0627\u0644\u0630\u064a \u064a\u0639\u0637\u064a \u0627\u0644\u0623\u0648\u0644\u0648\u064a\u0629 \u0644\u0644\u062c\u0627\u0646\u0628 \u0627\u0644\u0639\u0645\u0644\u064a. \u0641\u0647\u0648 \u064a\u0648\u0641\u0631 \u0645\u062c\u0645\u0648\u0639\u0629 \u0648\u0627\u0633\u0639\u0629 \u0645\u0646 \u0627\u0644\u0623\u062f\u0648\u0627\u062a \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0645\u0646\u062e\u0641\u0636\u060c \u0645\u0645\u0627 \u064a\u0645\u0646\u062d \u0627\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u062d\u0631\u064a\u0629 \u0648\u0633\u0631\u0639\u0629 \u063a\u064a\u0631 \u0645\u0633\u0628\u0648\u0642\u062a\u064a\u0646 \u0641\u064a \u0628\u0646\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0636\u0645\u0646 \u0646\u0638\u0627\u0645 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u0645\u062f\u0645\u062c \u062a\u0646\u0627\u0633\u0642\u064b\u0627 \u0628\u0635\u0631\u064a\u064b\u0627 \u0641\u064a \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629. \u064a\u062a\u0645\u064a\u0632 Tailwind CSS \u0628\u062d\u062c\u0645 \u062d\u0632\u0645\u0629 \u062a\u0637\u0648\u064a\u0631 \u0635\u063a\u064a\u0631 \u062c\u062f\u064b\u0627 \u0648\u0633\u0647\u0648\u0644\u0629 \u0641\u064a \u0627\u0644\u0635\u064a\u0627\u0646\u0629\u060c \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u062f\u0639\u0645\u0647 \u0627\u0644\u0631\u0627\u0626\u0639 \u0644\u0644\u062a\u0635\u0645\u064a\u0645 \u0627\u0644\u062a\u0641\u0627\u0639\u0644\u064a \u0648\u062a\u0643\u0627\u0645\u0644\u0647 \u0627\u0644\u0645\u062b\u0627\u0644\u064a \u0645\u0639 \u0623\u062d\u062f\u062b \u0623\u0637\u0631 \u0627\u0644\u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0623\u0645\u0627\u0645\u064a\u0629. \u0639\u0644\u0649 \u0627\u0644\u0631\u063a\u0645 \u0645\u0646 \u0623\u0646 \u0645\u0646\u062d\u0646\u0649 \u0627\u0644\u062a\u0639\u0644\u0645 \u0642\u062f \u064a\u0628\u062f\u0648 \u0635\u0639\u0628\u064b\u0627 \u0641\u064a \u0627\u0644\u0628\u062f\u0627\u064a\u0629 \u0628\u0633\u0628\u0628 \u0627\u0644\u062d\u0627\u062c\u0629 \u0625\u0644\u0649 \u062d\u0641\u0638 \u0639\u062f\u062f \u0643\u0628\u064a\u0631 \u0645\u0646 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a\u060c \u0625\u0644\u0627 \u0623\u0646 \u0625\u062a\u0642\u0627\u0646\u0647 \u064a\u0639\u0632\u0632 \u0628\u0634\u0643\u0644 \u0643\u0628\u064a\u0631 \u062a\u062c\u0631\u0628\u0629 \u0648\u0643\u0641\u0627\u0621\u0629 \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0623\u0645\u0627\u0645\u064a\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644\u0647 \u0623\u062f\u0627\u0629 \u0642\u0648\u064a\u0629 \u0644\u0628\u0646\u0627\u0621 \u062a\u0637\u0628\u064a\u0642\u0627\u062a \u0648\u064a\u0628 \u062d\u062f\u064a\u062b\u0629 \u0648\u0645\u062e\u0635\u0635\u0629.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0634\u0627\u0626\u0639\u0629 \u0627\u0644\u0623\u0633\u0626\u0644\u0629 \u0627\u0644\u0645\u062a\u062f\u0627\u0648\u0644\u0629<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u0647\u0644 \u0642\u062f \u064a\u0624\u062f\u064a \u0627\u0633\u062a\u062e\u062f\u0627\u0645 Tailwind CSS \u0625\u0644\u0649 \u062c\u0639\u0644 \u0645\u0644\u0641\u0627\u062a HTML \u062b\u0642\u064a\u0644\u0629 \u0648\u0645\u0639\u0642\u062f\u0629\u061f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0627\u0644\u0641\u0639\u0644\u060c \u0625\u0636\u0627\u0641\u0629 \u0639\u062f\u062f \u0643\u0628\u064a\u0631 \u0645\u0646 \u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0641\u0626\u0627\u062a (classes) \u0645\u0628\u0627\u0634\u0631\u0629\u064b \u0625\u0644\u0649 \u0639\u0646\u0627\u0635\u0631 HTML \u064a\u0645\u0643\u0646 \u0623\u0646 \u064a\u062c\u0639\u0644 \u0628\u0646\u064a\u0629 \u0627\u0644\u0643\u0648\u062f \u0623\u0643\u062b\u0631 \u062a\u0639\u0642\u064a\u062f\u064b\u0627 \u0648\u0637\u0648\u0644\u064b\u0627. \u0647\u0630\u0627 \u0647\u0648 \u0623\u062d\u062f \u0627\u0644\u0639\u064a\u0648\u0628 \u0627\u0644\u0623\u0643\u062b\u0631 \u0634\u064a\u0648\u0639\u064b\u0627 \u0627\u0644\u062a\u064a \u064a\u062a\u0645 \u0630\u0643\u0631\u0647\u0627 \u0641\u064a\u0645\u0627 \u064a\u062a\u0639\u0644\u0642 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0643\u062a\u0628\u0629 Tailwind CSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0648\u0645\u0639 \u0630\u0644\u0643\u060c \u0641\u0625\u0646 \u0647\u0630\u0627 \u0627\u0644\u0646\u0648\u0639 \u0645\u0646 \u201c\u0627\u0644\u062a\u0636\u062e\u0645\u201d \u0641\u064a \u062d\u062c\u0645 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u064a\u0645\u062b\u0644 \u062a\u0648\u0627\u0632\u0646\u064b\u0627 \u0628\u064a\u0646 \u0639\u0648\u0627\u0645\u0644 \u0645\u062e\u062a\u0644\u0641\u0629. \u0641\u0647\u0648 \u064a\u0646\u0642\u0644 \u062a\u0639\u0642\u064a\u062f\u0627\u062a \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0639\u0631\u0636 \u0645\u0646 \u0645\u0644\u0641\u0627\u062a CSS \u0625\u0644\u0649 \u0642\u0648\u0627\u0644\u0628 HTML\u060c \u0648\u0627\u0644\u062a\u064a \u0639\u0627\u062f\u0629 \u0645\u0627 \u062a\u0643\u0648\u0646 \u0645\u064f\u0646\u0638\u0645\u0629 \u062d\u0633\u0628 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a (components). \u0641\u064a \u0623\u0637\u0631 \u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u0645\u0628\u0646\u064a\u0629 \u0639\u0644\u0649 \u0627\u0644\u0645\u0643\u0648\u0646\u0627\u062a \u0645\u062b\u0644 React \u0648Vue\u060c \u064a\u062a\u0645 \u0627\u0644\u062d\u062f \u0645\u0646 \u0647\u0630\u0627 \u0627\u0644\u062a\u0636\u062e\u0645 \u0625\u0644\u0649 \u0645\u0644\u0641 \u0648\u0627\u062d\u062f \u0644\u0643\u0644 \u0645\u0643\u0648\u0646\u060c \u0645\u0645\u0627 \u064a\u062c\u0639\u0644 \u0645\u0646 \u0627\u0644\u0623\u0633\u0647\u0644 \u0625\u062f\u0627\u0631\u0629 \u062a\u0623\u062b\u064a\u0631\u0627\u062a \u0627\u0644\u062a\u063a\u064a\u064a\u0631\u0627\u062a \u0639\u0644\u0649 \u0623\u0646\u0645\u0627\u0637 \u0627\u0644\u0639\u0631\u0636 \u0645\u0642\u0627\u0631\u0646\u0629\u064b \u0628\u0645\u062a\u0627\u0628\u0639\u0629 \u0627\u0644\u062a\u063a\u064a\u064a\u0631\u0627\u062a \u0641\u064a \u0645\u0644\u0641\u0627\u062a CSS \u0627\u0644\u0639\u0627\u0645\u0629. \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0630\u0644\u0643\u060c \u0628\u0639\u062f \u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062a\u062d\u0633\u064a\u0646 \u0627\u0644\u062a\u064a \u062a\u062a\u0645 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0648\u0627\u062a \u0627\u0644\u0628\u0646\u0627\u0621 (build tools)\u060c \u064a\u0635\u0628\u062d \u062d\u062c\u0645 \u0645\u0644\u0641\u0627\u062a CSS \u0627\u0644\u0646\u0627\u062a\u062c\u0629 \u0623\u0635\u063a\u0631 \u0628\u0643\u062b\u064a\u0631 \u0645\u0646 \u0645\u0644\u0641\u0627\u062a CSS \u0627\u0644\u0645\u0643\u062a\u0648\u0628\u0629 \u064a\u062f\u0648\u064a\u064b\u0627\u060c \u0648\u0647\u0648 \u0645\u0627 \u064a\u0645\u062b\u0644 \u0645\u064a\u0632\u0629 \u0648\u0627\u0636\u062d\u0629 \u0645\u0646 \u0646\u0627\u062d\u064a\u0629 \u0627\u0644\u0623\u062f\u0627\u0621.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0643\u064a\u0641 \u064a\u0645\u0643\u0646 \u062a\u062e\u0635\u064a\u0635 \u0623\u0644\u0648\u0627\u0646 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0623\u0648 \u0627\u0644\u0645\u0633\u0627\u0641\u0627\u062a \u0628\u064a\u0646 \u0627\u0644\u0639\u0646\u0627\u0635\u0631\u061f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u064a\u062a\u0645 \u062a\u062e\u0635\u064a\u0635 \u0627\u0644\u0645\u0648\u0627\u0636\u064a\u0639 \u0628\u0634\u0643\u0644 \u0623\u0633\u0627\u0633\u064a \u0639\u0646 \u0637\u0631\u064a\u0642 \u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0645\u0648\u062c\u0648\u062f\u0629 \u0641\u064a \u0627\u0644\u0645\u062c\u0644\u062f \u0627\u0644\u0631\u0626\u064a\u0633\u064a \u0644\u0644\u0645\u0634\u0631\u0648\u0639. <code data-no-auto-translation=\"\">tailwind.config.js<\/code> \u064a\u0645\u0643\u0646 \u062a\u062d\u0642\u064a\u0642 \u0630\u0644\u0643 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a (configuration files). \u064a\u0645\u0643\u0646\u0643\u2026 <code data-no-auto-translation=\"\">theme.extend<\/code> \u064a\u0645\u0643\u0646 \u0625\u0636\u0627\u0641\u0629 \u0642\u064a\u0645 \u062c\u062f\u064a\u062f\u0629 \u0625\u0644\u0649 \u0627\u0644\u0643\u0627\u0626\u0646 \u0644\u062a\u0648\u0633\u064a\u0639 \u0627\u0644\u0645\u0648\u0636\u0648\u0639 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u060c \u0623\u0648\u2026 <code data-no-auto-translation=\"\">theme<\/code> \u064a\u062a\u0645 \u062a\u063a\u064a\u064a\u0631 \u0627\u0644\u0642\u064a\u0645 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629 \u0645\u0628\u0627\u0634\u0631\u0629 \u062f\u0627\u062e\u0644 \u0627\u0644\u0643\u0627\u0626\u0646.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0639\u0644\u0649 \u0633\u0628\u064a\u0644 \u0627\u0644\u0645\u062b\u0627\u0644\u060c \u0644\u0625\u0636\u0627\u0641\u0629 \u0644\u0648\u0646 \u0645\u062e\u0635\u0635 \u0648\u062a\u0639\u062f\u064a\u0644 \u0646\u0633\u0628\u0629 \u0627\u0644\u0645\u0633\u0627\u0641\u0629 \u0627\u0644\u0627\u0641\u062a\u0631\u0627\u0636\u064a\u0629\u060c \u064a\u0645\u0643\u0646 \u0636\u0628\u0637 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0643\u0627\u0644\u062a\u0627\u0644\u064a:<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-auto-translation=\"\"><code class=\"language-javascript\" data-no-auto-translation=\"\">module.exports = {\n  theme: {\n    extend: {\n      colors: {\n        \u2018primary\u2019: \u2018#ff6b6b\u2019,\n      },\n      spacing: {\n        \u2018128\u2019: \u201832rem\u2019,\n      }\n    },\n  },\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0639\u062f \u0627\u0644\u0627\u0646\u062a\u0647\u0627\u0621 \u0645\u0646 \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a\u060c \u064a\u0645\u0643\u0646\u0643 \u0627\u0633\u062a\u062e\u062f\u0627\u0645\u0647 \u0643\u0645\u0627 \u0644\u0648 \u0643\u0627\u0646 \u062c\u0627\u0647\u0632\u064b\u0627 \u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0628\u0627\u0634\u0631\u0629. <code data-no-auto-translation=\"\">bg-primary<\/code> \u0648 <code data-no-auto-translation=\"\">p-128<\/code> \u0647\u0643\u0630\u0627 \u0647\u064a \u0627\u0644\u0641\u0626\u0629.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0647\u0644 \u0647\u0648 \u0645\u0646\u0627\u0633\u0628 \u0644\u0644\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0641\u064a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0643\u0628\u064a\u0631\u0629\u061f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0645\u0646\u0627\u0633\u0628 \u062c\u062f\u064b\u0627 \u0628\u0627\u0644\u0641\u0639\u0644. \u0641\u064a \u0627\u0644\u0648\u0627\u0642\u0639\u060c \u0627\u0644\u0639\u062f\u064a\u062f \u0645\u0646 \u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0648\u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0645\u0639\u0642\u062f\u0629 (\u0645\u062b\u0644 GitHub\u060c Netflix\u060c Shopify\u060c \u0648\u063a\u064a\u0631\u0647\u0627) \u062a\u0633\u062a\u062e\u062f\u0645 Tailwind CSS. \u0645\u0632\u0627\u064a\u0627 Tailwind CSS \u0641\u064a \u0627\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0643\u0628\u064a\u0631\u0629 \u0623\u0643\u062b\u0631 \u0648\u0636\u0648\u062d\u064b\u0627: \u0641\u0647\u0648 \u064a\u0636\u0645\u0646 \u0627\u0644\u062a\u0646\u0627\u0633\u0642 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0646\u0638\u0627\u0645 \u062a\u0635\u0645\u064a\u0645 \u0645\u0648\u062d\u062f\u061b \u064a\u062a\u062c\u0646\u0628 \u062a\u0644\u0648\u062b \u0627\u0644\u0623\u0633\u0644\u0648\u0628 \u0639\u0644\u0649 \u0645\u0633\u062a\u0648\u0649 \u0627\u0644\u0646\u0638\u0627\u0645 \u0627\u0644\u0643\u0644\u064a \u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u062d\u0644\u064a\u0644 \u0648\u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0623\u0633\u0627\u0644\u064a\u0628 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\u0629 \u0645\u062d\u0644\u064a\u064b\u0627\u061b \u064a\u0642\u0644\u0644 \u062d\u062c\u0645 \u0645\u0644\u0641\u0627\u062a CSS \u0627\u0644\u0646\u0647\u0627\u0626\u064a\u0629 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u062f\u0627\u0629 PurgeCSS\u061b \u0648\u064a\u062d\u0633\u0646 \u0642\u0627\u0628\u0644\u064a\u0629 \u0642\u0631\u0627\u0621\u0629 \u0627\u0644\u0643\u0648\u062f \u0648\u0635\u064a\u0627\u0646\u062a\u0647 \u0645\u0646 \u062e\u0644\u0627\u0644 \u0642\u0648\u0627\u0639\u062f \u0648\u0627\u0636\u062d\u0629 \u0644\u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0641\u0626\u0627\u062a. \u0643\u0644 \u0645\u0627 \u0639\u0644\u0649 \u0627\u0644\u0641\u0631\u064a\u0642 \u0647\u0648 \u0627\u0644\u0627\u062a\u0641\u0627\u0642 \u0639\u0644\u0649 \u0627\u0644\u0645\u0639\u0627\u064a\u064a\u0631 \u0627\u0644\u0645\u0648\u062d\u062f\u0629 \u0648\u0627\u062a\u0628\u0627\u0639 \u0623\u0641\u0636\u0644 \u0627\u0644\u0645\u0645\u0627\u0631\u0633\u0627\u062a (\u0645\u062b\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0627\u0644\u0623\u0633\u0645\u0627\u0621 \u0627\u0644\u0645\u0646\u0627\u0633\u0628\u0629 \u0644\u0644\u0641\u0626\u0627\u062a \u0648\u062a\u0646\u0638\u064a\u0645 \u0627\u0644\u0643\u0648\u062f \u0628\u0634\u0643\u0644 \u0645\u0646\u0647\u062c\u064a). <code data-no-auto-translation=\"\">@apply<\/code>\u0645\u0646 \u062e\u0644\u0627\u0644 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0644\u0641\u0627\u062a \u0627\u0644\u0625\u0639\u062f\u0627\u062f\u0627\u062a \u0644\u0625\u062f\u0627\u0631\u0629 \u0631\u0645\u0648\u0632 \u0627\u0644\u062a\u0635\u0645\u064a\u0645 (design tokens)\u060c \u064a\u0645\u0643\u0646 \u0644\u0640 Tailwind \u0623\u0646 \u064a\u062f\u0639\u0645 \u0628\u0634\u0643\u0644 \u0641\u0639\u0627\u0644 \u0627\u0644\u062a\u0637\u0648\u0631 \u0637\u0648\u064a\u0644 \u0627\u0644\u0623\u0645\u062f \u0644\u0644\u0645\u0634\u0627\u0631\u064a\u0639 \u0627\u0644\u0643\u0628\u064a\u0631\u0629.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u0647\u0644 \u0645\u0646 \u0627\u0644\u0636\u0631\u0648\u0631\u064a \u062a\u0630\u0643\u0631 \u0623\u0633\u0645\u0627\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a (\u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a)\u061f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u0644\u0627 \u062d\u0627\u062c\u0629 \u0644\u0630\u0644\u0643\u060c \u0648\u0645\u0646 \u0627\u0644\u0645\u0633\u062a\u062d\u064a\u0644 \u062a\u0642\u0631\u064a\u0628\u064b\u0627 \u062a\u0630\u0643\u0631 \u0623\u0633\u0645\u0627\u0621 \u062c\u0645\u064a\u0639 \u0627\u0644\u0641\u0626\u0627\u062a (\u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a). \u0641\u064a \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0639\u0645\u0644\u064a\u060c \u064a\u0639\u062a\u0645\u062f \u0627\u0644\u0645\u0637\u0648\u0631\u0648\u0646 \u0628\u0634\u0643\u0644 \u0623\u0633\u0627\u0633\u064a \u0639\u0644\u0649 \u0627\u0644\u062a\u0644\u0645\u064a\u062d\u0627\u062a \u0627\u0644\u0630\u0643\u064a\u0629 \u0644\u0645\u062d\u0631\u0631\u0627\u062a \u0627\u0644\u0643\u0648\u062f (\u0645\u0646 \u062e\u0644\u0627\u0644 \u062a\u062b\u0628\u064a\u062a \u0625\u0636\u0627\u0641\u0627\u062a \u0645\u062a\u062e\u0635\u0635\u0629 \u0644\u0628\u064a\u0626\u0627\u062a \u0627\u0644\u062a\u0637\u0648\u064a\u0631 \u0627\u0644\u0645\u062a\u0643\u0627\u0645\u0644\u0629 \u2013 IDEs)\u060c \u0648\u0639\u0644\u0649 \u0627\u0644\u0627\u0637\u0644\u0627\u0639 \u0627\u0644\u0633\u0631\u064a\u0639 \u0639\u0644\u0649 \u0627\u0644\u0648\u062b\u0627\u0626\u0642 \u0627\u0644\u0631\u0633\u0645\u064a\u0629\u060c \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u0628\u0627\u0644\u0646\u0633\u0628\u0629 \u0644\u0644\u0641\u0626\u0627\u062a (classes) \u0627\u0644\u062a\u064a \u0644\u0627 \u062a\u064f\u0633\u062a\u062e\u062f\u0645 \u0628\u0634\u0643\u0644 \u0645\u062a\u0643\u0631\u0631\u060c \u0641\u0625\u0646 \u0627\u0644\u0631\u062c\u0648\u0639 \u0625\u0644\u0649 \u0627\u0644\u0648\u062b\u0627\u0626\u0642 \u0627\u0644\u0631\u0633\u0645\u064a\u0629 \u0641\u064a \u0623\u064a \u0648\u0642\u062a \u0647\u0648 \u0623\u0641\u0636\u0644 \u0645\u0645\u0627\u0631\u0633\u0629 \u0645\u0645\u0643\u0646\u0629. \u062a\u0634\u062a\u0647\u0631 \u0648\u062b\u0627\u0626\u0642 Tailwind \u0628\u062a\u0641\u0635\u064a\u0644\u0647\u0627 \u0627\u0644\u0643\u0628\u064a\u0631 \u0648\u0633\u0647\u0648\u0644\u0629 \u0627\u0644\u0628\u062d\u062b \u0641\u064a\u0647\u0627\u060c \u0645\u0645\u0627 \u064a\u0633\u0645\u062d \u0639\u0627\u062f\u0629\u064b \u0628\u0627\u0644\u0639\u062b\u0648\u0631 \u0628\u0633\u0631\u0639\u0629 \u0639\u0644\u0649 \u0627\u0644\u0641\u0626\u0627\u062a \u0627\u0644\u0645\u0637\u0644\u0648\u0628\u0629. \u0645\u0639 \u0645\u0631\u0648\u0631 \u0627\u0644\u0648\u0642\u062a\u060c \u0633\u062a\u062a\u0639\u0648\u062f \u062a\u0644\u0642\u0627\u0626\u064a\u064b\u0627 \u0639\u0644\u0649 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0623\u0643\u062b\u0631 \u0627\u0644\u0641\u0626\u0627\u062a \u0634\u064a\u0648\u0639\u064b\u0627\u060c \u0628\u064a\u0646\u0645\u0627 \u064a\u0645\u0643\u0646\u0643 \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0641\u0626\u0627\u062a \u0627\u0644\u0645\u0639\u0642\u062f\u0629 \u0623\u0648 \u0627\u0644\u0646\u0627\u062f\u0631\u0629 \u0627\u0644\u0627\u0633\u062a\u062e\u062f<\/p>","protected":false},"excerpt":{"rendered":"<p>Tailwind CSS \u0647\u0648 \u0625\u0637\u0627\u0631 \u0639\u0645\u0644 \u0644\u0644\u063a\u0629 CSS \u064a\u0639\u0637\u064a \u0627\u0644\u0623\u0648\u0644\u0648\u064a\u0629 \u0644\u0644\u0648\u0638\u0627\u0626\u0641 \u0648\u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a (functions\/classes)\u060c \u0648\u064a\u0648\u0641\u0631 \u0645\u062c\u0645\u0648\u0639\u0629 \u0648\u0627\u0633\u0639\u0629 \u0645\u0646 \u0627\u0644\u0643\u0644\u0627\u0633\u0627\u062a \u0627\u0644\u062f\u0642\u064a\u0642\u0629 \u0627\u0644\u062a\u064a \u064a\u0645\u0643\u0646 \u0644\u0644\u0645\u0637\u0648\u0631\u064a\u0646 \u062f\u0645\u062c\u0647\u0627 \u0645\u0628\u0627\u0634\u0631\u0629\u064b \u062f\u0627\u062e\u0644 \u0645\u0644\u0641\u0627\u062a HTML \u0644\u0628\u0646\u0627\u0621 \u062a\u0635\u0627\u0645\u064a\u0645 \u0645\u062e\u0635\u0635\u0629. \u0641\u0644\u0633\u0641\u062a\u0647 \u0627\u0644\u062a\u064a \u062a\u0631\u0643\u0632 \u0639\u0644\u0649 \u201c\u0627\u0644\u0639\u0645\u0644\u064a\u0629 \u0623\u0648\u0644\u0627\u064b\u201d (practicality first) \u062a\u0647\u062f\u0641 \u0625\u0644\u0649 \u0625\u0646\u0634\u0627\u0621 \u0648\u0627\u062c\u0647\u0627\u062a \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645 \u0628\u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0648\u062d\u062f\u0627\u062a \u0623\u0633\u0644\u0648\u0628\u064a\u0629 \u0623\u0633\u0627\u0633\u064a\u0629\u060c \u0645\u0645\u0627 \u064a\u0636\u0645\u0646 \u0645\u0631\u0648\u0646\u0629 \u0639\u0627\u0644\u064a\u0629 \u0648\u062a\u0646\u0627\u0633\u0642\u064b\u0627 \u0641\u064a \u0627\u0644\u062a\u0635\u0645\u064a\u0645 \u0628\u0627\u0644\u0625\u0636\u0627\u0641\u0629 \u0625\u0644\u0649 \u0633\u0647\u0648\u0644\u0629 \u0641\u064a \u0635\u064a\u0627\u0646\u0629 \u0627\u0644\u0643\u0648\u062f. \u0643\u0645\u0627 \u064a\u0645\u0643\u0646 \u062a\u0648\u0633\u064a\u0639 \u0625\u0645\u0643\u0627\u0646\u064a\u0627\u062a Tailwind CSS \u0628\u0633\u0647\u0648\u0644\u0629 \u0645\u0646 \u062e\u0644\u0627\u0644<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,1942,430,2271],"knowledge_category":[281],"class_list":["post-12376873","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-web","tag-frontend-development","tag-practical-first","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS,\u5b9e\u7528\u4f18\u5148CSS\u6846\u67b6,\u73b0\u4ee3Web\u5f00\u53d1,\u524d\u7aef\u6846\u67b6,CSS\u5de5\u5177\u7c7b,\u54cd\u5e94\u5f0f\u8bbe\u8ba1,\u81ea\u5b9a\u4e49UI\u5f00\u53d1,\u9ad8\u6548CSS\u5f00\u53d1\u6d41\u7a0b"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/knowledge_posts\/12376873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/knowledge_posts\/12376873\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/media?parent=12376873"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/tags?post=12376873"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/ar\/wp-json\/wp\/v2\/knowledge_category?post=12376873"}],"curies":[{"name":"\u062f\u0628\u0644\u064a\u0648 \u0628\u064a","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}