{"id":12365876,"date":"2026-03-13T15:15:57","date_gmt":"2026-03-13T07:15:57","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e7%bb%88%e6%9e%81%e6%8c%87%e5%8d%97%ef%bc%9a%e4%bb%8e%e5%9f%ba%e7%a1%80%e5%88%b0%e9%ab%98%e7%ba%a7%e7%9a%84%e5%ae%9e%e7%94%a8%e5%85%a5%e9%97%a8%e6%95%99%e7%a8%8b\/"},"modified":"2026-03-13T15:25:01","modified_gmt":"2026-03-13T07:25:01","slug":"tailwind-css-ultimate-guide-beginner-to-advanced-tutorial","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/vi\/knowledge\/website-building\/tailwind-css-ultimate-guide-beginner-to-advanced-tutorial\/","title":{"rendered":"H\u01b0\u1edbng d\u1eabn to\u00e0n di\u1ec7n v\u1ec1 Tailwind CSS: T\u1eeb c\u01a1 b\u1ea3n \u0111\u1ebfn n\u00e2ng cao"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u4ec0\u4e48\u662f Tailwind CSS<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind CSS \u662f\u4e00\u6b3e\u529f\u80fd\u4f18\u5148\u7684 CSS \u6846\u67b6\u3002\u5b83\u4e0e\u4f20\u7edf UI \u6846\u67b6\uff08\u5982 Bootstrap\uff09\u6709\u7740\u6839\u672c\u7684\u4e0d\u540c\u3002\u4f20\u7edf\u6846\u67b6\u4e3a\u4f60\u63d0\u4f9b\u9884\u6784\u5efa\u7684\u7ec4\u4ef6\uff0c\u5982\u6309\u94ae\u3001\u5361\u7247\u548c\u5bfc\u822a\u680f\uff0c\u4f60\u53ea\u9700\u8981\u6dfb\u52a0\u5bf9\u5e94\u7684\u7c7b\u540d\u3002\u800c Tailwind CSS \u63d0\u4f9b\u7684\u662f\u7ec6\u7c92\u5ea6\u7684\u3001\u529f\u80fd\u6027\u7684 CSS \u5de5\u5177\u7c7b\uff0c\u8ba9\u4f60\u901a\u8fc7\u7ec4\u5408\u8fd9\u4e9b\u539f\u5b50\u7c7b\u6765\u76f4\u63a5\u6784\u5efa\u4efb\u4f55\u8bbe\u8ba1\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b83\u7684\u6838\u5fc3\u601d\u60f3\u662f\u901a\u8fc7\u4e00\u7cfb\u5217\u9884\u8bbe\u7684\u5de5\u5177\u7c7b\u6765\u5b9e\u73b0\u6837\u5f0f\uff0c\u907f\u514d\u4e86\u5728\u4f20\u7edf CSS \u6216 SCSS \u4e2d\u4e3a\u6bcf\u4e2a\u5143\u7d20\u7f16\u5199\u81ea\u5b9a\u4e49\u6837\u5f0f\u3002\u4f8b\u5982\uff0c\u8981\u521b\u5efa\u4e00\u4e2a\u6709\u5706\u89d2\u3001\u80cc\u666f\u8272\u548c\u5185\u8fb9\u8ddd\u7684\u6309\u94ae\uff0c\u4f60\u53ea\u9700\u8981\u5728 HTML \u5143\u7d20\u7684 <code>class<\/code> \u5c5e\u6027\u4e2d\u7ec4\u5408\u6dfb\u52a0 <code>rounded-lg<\/code>\u3001<code>bg-blue-500<\/code>\u3001<code>text-white<\/code> \u548c <code>p-4<\/code> \u8fd9\u4e9b\u7c7b\u3002\u8fd9\u79cd\u65b9\u6cd5\u7684\u4f18\u52bf\u5728\u4e8e\uff0c\u5b83\u6781\u5927\u5730\u52a0\u901f\u4e86\u5f00\u53d1\u6d41\u7a0b\uff0c\u4fc3\u4f7f\u8bbe\u8ba1\u4e0e\u4ee3\u7801\u4fdd\u6301\u4e00\u81f4\uff0c\u5e76\u751f\u6210\u9ad8\u5ea6\u4f18\u5316\u7684\u3001\u4ec5\u5305\u542b\u5b9e\u9645\u4f7f\u7528\u6837\u5f0f\u7684\u751f\u4ea7\u6587\u4ef6\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5982\u4f55\u5b89\u88c5\u4e0e\u914d\u7f6e<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6709\u591a\u79cd\u65b9\u6cd5\u53ef\u4ee5\u5c06 Tailwind CSS \u96c6\u6210\u5230\u4f60\u7684\u9879\u76ee\u4e2d\u3002\u6700\u63a8\u8350\u7684\u65b9\u5f0f\u662f\u5c06\u5176\u4f5c\u4e3a PostCSS \u63d2\u4ef6\uff0c\u8fd9\u53ef\u4ee5\u8ba9\u4f60\u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\u5904\u7406\u6240\u6709 Tailwind \u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u901a\u8fc7 NPM \u548c PostCSS \u8fdb\u884c\u5b89\u88c5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u9996\u5148\uff0c\u4f7f\u7528 npm \u6216 yarn \u5b89\u88c5 Tailwind \u53ca\u5176\u4f9d\u8d56\u3002\u63a5\u7740\uff0c\u4f60\u9700\u8981\u521d\u59cb\u5316 Tailwind \u914d\u7f6e\u6587\u4ef6\u5e76\u8bbe\u7f6e PostCSS \u914d\u7f6e\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-bash\">npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6267\u884c\u521d\u59cb\u5316\u547d\u4ee4\u4f1a\u751f\u6210\u4e00\u4e2a\u9ed8\u8ba4\u7684\u914d\u7f6e\u6587\u4ef6 <code>tailwind.config.js<\/code>\u3002\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u4e00\u4e2a\u5173\u952e\u7684\u914d\u7f6e\u9879\u662f <code>content<\/code>\u3002\u4f60\u9700\u8981\u901a\u8fc7\u5b83\u6765\u6307\u5b9a\u9879\u76ee\u4e2d\u54ea\u4e9b\u6587\u4ef6\u5305\u542b Tailwind \u7684\u7c7b\u540d\uff0c\u4ee5\u4fbf\u6846\u67b6\u53ef\u4ee5\u626b\u63cf\u5e76\u751f\u6210\u76f8\u5e94\u7684 CSS\u3002<\/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\/vi\/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=\"WordPress.com \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b\" 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\">WordPress.com \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b<\/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\">99.999% \u53ef\u7528\u6027+\u8de8\u533a\u5bb9\u707e\uff0c\u5168\u592924\u5c0f\u65f6\u652f\u6301\uff0c\u8d2d\u4e70\u535a\u5ba2\u5957\u9910\u514d\u8d39\u4f7f\u7528AI\u6784\u5efa\u7f51\u7ad9<\/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\">\u514d\u8d39\u57df\u540d\u4e00\u5e74<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.likacloud.com\/vi\/tolink\/wordpress-com-ai-website-builder\/\" class=\"flex justify-end font-bold !text-lg !text-blue-600 dark:!text-blue-500\">\u8bbf\u95eeWordPress.com \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b \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\/vi\/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=\"UltaHost \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b\" 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\">UltaHost \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b<\/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\">900+\u514d\u8d39\u3001\u53ef\u5b9a\u5236\u7684\u6a21\u677f\uff0c\u83b7\u5f97\u4f18\u5316\u7f51\u7ad9\u641c\u7d22\u66dd\u5149\u6240\u9700\u7684 SEO \u80fd\u529b<\/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\">\u4f18\u60e0 40%<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.likacloud.com\/vi\/tolink\/ultahost-website-builder\/\" class=\"flex justify-end font-bold !text-lg !text-blue-600 dark:!text-blue-500\">\u8bbf\u95eeUltaHost \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b \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<pre class=\"wp-block-code\"><code class=\"language-javascript\">\/\/ tailwind.config.js\nmodule.exports = {\n  content: [&quot;.\/src\/**\/*.{html,js}&quot;],\n  theme: {\n    extend: {}\n  },\n  plugins: []\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">\u521b\u5efa\u4f60\u7684\u6837\u5f0f\u8868<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u63a5\u4e0b\u6765\uff0c\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\u4e2d\u5f15\u5165 Tailwind \u7684\u6307\u4ee4\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">\/* src\/input.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u540e\uff0c\u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0cTailwind CLI \u4f1a\u5904\u7406\u8fd9\u4e2a\u8f93\u5165\u6587\u4ef6\uff0c\u626b\u63cf\u4f60\u914d\u7f6e\u7684\u6a21\u677f\u6587\u4ef6\u4e2d\u7684\u6240\u6709\u7c7b\u540d\uff0c\u5e76\u751f\u6210\u4e00\u4e2a\u53ea\u5305\u542b\u6240\u9700\u6837\u5f0f\u7684\u4f18\u5316\u540e\u7684 CSS \u6587\u4ef6\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u6765\u542f\u52a8\u6784\u5efa\u76d1\u542c\u8fc7\u7a0b\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-bash\">npx tailwindcss -i .\/src\/input.css -o .\/dist\/output.css --watch<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u6838\u5fc3\u6982\u5ff5\u4e0e\u5b9e\u7528\u7c7b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u8981\u9ad8\u6548\u4f7f\u7528 Tailwind CSS\uff0c\u5fc5\u987b\u7406\u89e3\u5176\u547d\u540d\u7ea6\u5b9a\u548c\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u7cfb\u7edf\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b9e\u7528\u7c7b\u7684\u547d\u540d\u7ea6\u5b9a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind \u7684\u7c7b\u540d\u901a\u5e38\u662f\u201c\u5c5e\u6027-\u503c\u201d\u7684\u7ed3\u6784\uff0c\u5e76\u4e14\u503c\u901a\u5e38\u5bf9\u5e94\u4e00\u4e2a\u8bbe\u8ba1\u7cfb\u7edf\u4e2d\u7684\u9884\u8bbe\u523b\u5ea6\u3002\u8fd9\u4f7f\u5f97\u7c7b\u540d\u975e\u5e38\u76f4\u89c2\u4e14\u5bb9\u6613\u8bb0\u5fc6\u3002<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>\u95f4\u8ddd\uff1a<code>p-4<\/code> (padding: 1rem), <code>m-2<\/code> (margin: 0.5rem)\u3002<\/li><li>\u6587\u5b57\uff1a<code>text-lg<\/code> (font-size: 1.125rem), <code>font-bold<\/code> (font-weight: 700)\u3002<\/li><li>\u989c\u8272\uff1a<code>bg-red-500<\/code> (background-color)\uff0c<code>text-blue-700<\/code> (color)\u3002<\/li><li>\u5e03\u5c40\uff1a<code>flex<\/code>, <code>justify-center<\/code>, <code>items-center<\/code>\u3002<\/li><li>\u5c3a\u5bf8\uff1a<code>w-full<\/code> (width: 100%), <code>h-64<\/code> (height: 16rem)\u3002<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind \u91c7\u7528\u4e86\u79fb\u52a8\u4f18\u5148\u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u6a21\u5f0f\u3002\u9ed8\u8ba4\u7684\u5b9e\u7528\u7c7b\u4f5c\u7528\u4e8e\u6240\u6709\u5c4f\u5e55\u5c3a\u5bf8\uff08\u5373\u79fb\u52a8\u7aef\uff09\u3002\u8981\u4e3a\u66f4\u5927\u7684\u5c4f\u5e55\uff08\u5982\u5e73\u677f\u3001\u684c\u9762\uff09\u6dfb\u52a0\u6837\u5f0f\uff0c\u9700\u8981\u4f7f\u7528\u54cd\u5e94\u5f0f\u524d\u7f00\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f8b\u5982\uff1a<br \/>\n*   <code>text-center<\/code>\uff1a\u5728\u79fb\u52a8\u7aef\u5c45\u4e2d\u3002<br \/>\n*   <code>md:text-left<\/code>\uff1a\u5728\u4e2d\u7b49\u5c4f\u5e55\uff08\u2265768px\uff09\u53ca\u4ee5\u4e0a\u5de6\u5bf9\u9f50\u3002<br \/>\n*   <code>lg:text-xl<\/code>\uff1a\u5728\u5927\u5c4f\u5e55\uff08\u22651024px\uff09\u53ca\u4ee5\u4e0a\u4f7f\u7528\u66f4\u5927\u7684\u5b57\u53f7\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u79cd\u8bbe\u8ba1\u8ba9\u4f60\u80fd\u591f\u901a\u8fc7\u6dfb\u52a0\u7b80\u5355\u7684\u524d\u7f00\uff0c\u5c31\u53ef\u5728\u4e0d\u540c\u65ad\u70b9\u4e0b\u8c03\u6574\u5e03\u5c40\u548c\u6837\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Hover\uff0c Focus \u7b49\u72b6\u6001\u53d8\u4f53<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind \u540c\u6837\u4e3a\u5404\u79cd\u5143\u7d20\u72b6\u6001\uff08\u5982\u60ac\u505c\u3001\u7126\u70b9\u3001\u6fc0\u6d3b\u3001\u7981\u7528\uff09\u63d0\u4f9b\u4e86\u53d8\u4f53\u524d\u7f00\u3002\u8fd9\u8ba9\u4f60\u53ef\u4ee5\u76f4\u63a5\u5728\u7c7b\u540d\u4e0a\u5b9a\u4e49\u4ea4\u4e92\u6837\u5f0f\uff0c\u65e0\u9700\u7f16\u5199\u989d\u5916\u7684 CSS \u4ee3\u7801\u3002<\/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\/vi\/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\">Bluehost\u5efa\u7ad9\u52a9\u624b<\/strong>\n        <div class=\"text-gray-600 dark:text-gray-300 word-word\">\u63d0\u4f9b AI \u7f51\u7ad9\u521b\u5efa\u5de5\u5177\uff0c24\/7 \u5728\u7ebf\u804a\u5929\u4e0e\u7535\u8bdd\u652f\u6301\uff0c\u4e00\u5e74\u514d\u8d39\u57df\u540d\uff0c\u514d\u8d39CDN\uff0c99.99% \u6b63\u5e38\u8fd0\u884c\u65f6\u95f4 SLA<\/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\/vi\/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=\"\u5efa\u7ad9\u52a9\u624b LOGO\" class=\"content-promotion-card-icon h-9 min-h-9\" title=\"\">\n                      <\/a>\n          \n        <a href=\"https:\/\/www.likacloud.com\/vi\/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          \u8bbf\u95eeBluehost        <\/a>\n      <\/div>\n    <\/div>\n\n    \n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-html\">&lt;button class=&quot;bg-blue-500 hover:bg-blue-700 focus:ring-2 focus:ring-blue-300 transition-colors&quot;&gt;\n  \u70b9\u51fb\u6211\n&lt;\/button&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u4e0a\u9762\u7684\u4f8b\u5b50\u4e2d\uff0c\u5f53\u6309\u94ae\u88ab\u60ac\u505c\u65f6\u80cc\u666f\u8272\u4f1a\u52a0\u6df1\uff0c\u83b7\u5f97\u7126\u70b9\u65f6\u4f1a\u6709\u4e00\u4e2a\u805a\u7126\u73af\uff0c\u5e76\u4e14\u989c\u8272\u53d8\u5316\u4f1a\u6709\u4e00\u4e2a\u5e73\u6ed1\u7684\u8fc7\u6e21\u6548\u679c\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u9ad8\u7ea7\u7279\u6027\u4e0e\u81ea\u5b9a\u4e49<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f53\u4f60\u638c\u63e1\u4e86\u57fa\u7840\uff0cTailwind \u5f3a\u5927\u7684\u5b9a\u5236\u80fd\u529b\u5c06\u8fdb\u4e00\u6b65\u63d0\u5347\u4f60\u7684\u5f00\u53d1\u6548\u7387\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u63d0\u53d6\u7ec4\u4ef6\u548c @apply \u6307\u4ee4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u867d\u7136\u76f4\u63a5\u5728 HTML \u4e2d\u4f7f\u7528\u539f\u5b50\u7c7b\u662f Tailwind \u7684\u6838\u5fc3\u54f2\u5b66\uff0c\u4f46\u5f53\u67d0\u4e9b\u7c7b\u7684\u7ec4\u5408\u5728\u4f60\u7684\u9879\u76ee\u4e2d\u53cd\u590d\u51fa\u73b0\u65f6\uff08\u6bd4\u5982\u4e00\u4e2a\u7279\u5b9a\u6837\u5f0f\u7684\u6309\u94ae\uff09\uff0c\u76f4\u63a5\u5728 HTML \u4e2d\u91cd\u590d\u4e66\u5199\u4f1a\u663e\u5f97\u5197\u957f\u3002\u6b64\u65f6\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 <code>@apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u5c06\u8fd9\u4e9b\u539f\u5b50\u7c7b\u63d0\u53d6\u6210\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684 CSS \u7c7b\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-css\">.btn-primary {\n  @apply py-2 px-4 bg-blue-500 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\">\u4e4b\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728 HTML \u4e2d\u4f7f\u7528 <code>class=\u201dbtn-primary\u201d<\/code> \u4e86\u3002\u8fd9\u662f\u5e73\u8861\u539f\u5b50\u7c7b\u548c\u7ec4\u4ef6\u53ef\u7ef4\u62a4\u6027\u7684\u6709\u6548\u624b\u6bb5\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6df1\u5ea6\u914d\u7f6e\u4e3b\u9898<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u901a\u8fc7\u4fee\u6539 <code>tailwind.config.js<\/code> \u6587\u4ef6\u4e2d\u7684 <code>theme<\/code> \u90e8\u5206\uff0c\u4f60\u53ef\u4ee5\u5b8c\u5168\u5b9a\u5236 Tailwind \u7684\u8bbe\u8ba1\u7cfb\u7edf\u3002\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49\u989c\u8272\u3001\u5b57\u4f53\u65cf\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u65ad\u70b9\u3001\u5706\u89d2\u7b49\u7b49\u3002\u8fd9\u786e\u4fdd\u4e86\u4f60\u7684\u9879\u76ee\u9075\u5faa\u7edf\u4e00\u7684\u8bbe\u8ba1\u89c4\u8303\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"language-javascript\">\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        &#039;brand-blue&#039;: &#039;#1d4ed8&#039;,\n      },\n      spacing: {\n        &#039;128&#039;: &#039;32rem&#039;,\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u914d\u7f6e\u4e4b\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u7acb\u5373\u4f7f\u7528\u81ea\u5b9a\u4e49\u7684\u7c7b\u540d\uff0c\u5982 <code>bg-brand-blue<\/code> \u6216 <code>w-128<\/code>\u3002<\/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\/vi\/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\">\u514d\u8d39SSL\u3001Cloudflare CDN\u3001WAF\uff0c40+\u5168\u7403\u673a\u623f\u53ef\u9009\uff0c\u5c31\u8fd1\u66f4\u4f4e\u5ef6\u8fdf\uff0c 24\/7\/365 \u670d\u52a1\u652f\u6301\uff0c\u73b0\u5728\u53ef\u4ee5\u7701\u4e0b\u9ad8\u8fbe 67%\u7684\u8d39\u7528\uff0c\u652f\u6301 AI \u6784\u5efa\u548c SEO \u4f18\u5316<\/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\/vi\/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\/vi\/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          \u8bbf\u95eehosting.com        <\/a>\n      <\/div>\n    <\/div>\n\n    \n<!-- AUTO_SYNCED_PATTERN_INSERT_END -->\n\n\n\n\n\n<h3 class=\"wp-block-heading\">\u4f7f\u7528\u7b2c\u4e09\u65b9\u63d2\u4ef6<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind \u7684\u63d2\u4ef6\u7cfb\u7edf\u5141\u8bb8\u4f60\u6269\u5c55\u5176\u529f\u80fd\u3002\u4f60\u53ef\u4ee5\u5b89\u88c5\u5b98\u65b9\u6216\u793e\u533a\u63d0\u4f9b\u7684\u63d2\u4ef6\uff0c\u6765\u6dfb\u52a0\u65b0\u7684\u5b9e\u7528\u7c7b\u6216\u7ec4\u4ef6\u3002\u4f8b\u5982\uff0c\u901a\u8fc7\u5b89\u88c5 <code>@tailwindcss\/forms<\/code> \u6216 <code>@tailwindcss\/typography<\/code> \u63d2\u4ef6\uff0c\u53ef\u4ee5\u4e3a\u8868\u5355\u5143\u7d20\u6216\u6587\u7ae0\u6392\u7248\u63d0\u4f9b\u66f4\u597d\u7684\u9ed8\u8ba4\u6837\u5f0f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u603b\u7ed3<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind CSS \u901a\u8fc7\u5176\u72ec\u7279\u7684\u201c\u529f\u80fd\u7c7b\u4f18\u5148\u201d\u7684\u65b9\u6cd5\u8bba\uff0c\u4e3a\u73b0\u4ee3 Web \u5f00\u53d1\u5e26\u6765\u4e86\u663e\u8457\u7684\u6548\u7387\u63d0\u5347\u548c\u7075\u6d3b\u6027\u3002\u5b83\u4e0d\u4ec5\u4ec5\u662f\u53e6\u4e00\u4e2a CSS \u6846\u67b6\uff0c\u800c\u662f\u4e00\u79cd\u65b0\u7684\u6837\u5f0f\u7f16\u5199\u8303\u5f0f\u548c\u8bbe\u8ba1\u7cfb\u7edf\u5de5\u5177\u3002\u4ece\u5feb\u901f\u539f\u578b\u6784\u5efa\u5230\u5927\u578b\u751f\u4ea7\u7ea7\u5e94\u7528\uff0cTailwind \u90fd\u80fd\u901a\u8fc7\u5176\u9ad8\u5ea6\u53ef\u5b9a\u5236\u6027\u548c\u201c\u6784\u5efa\u65f6\u4f18\u5316\u53ea\u751f\u6210\u4f7f\u7528\u8fc7\u7684 CSS\u201d\u7684\u7279\u6027\uff0c\u63d0\u4f9b\u51fa\u8272\u7684\u5f00\u53d1\u4f53\u9a8c\u548c\u6781\u81f4\u7684\u6027\u80fd\u8868\u73b0\u3002\u638c\u63e1\u4ece\u57fa\u7840\u5b9e\u7528\u7c7b\u5230\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0c\u518d\u5230\u7ec4\u4ef6\u63d0\u53d6\u548c\u6df1\u5ea6\u4e3b\u9898\u5b9a\u5236\uff0c\u4f60\u5c31\u80fd\u5145\u5206\u5229\u7528\u8fd9\u4e2a\u5f3a\u5927\u5de5\u5177\uff0c\u6784\u5efa\u51fa\u9ad8\u6548\u3001\u4e00\u81f4\u4e14\u6613\u4e8e\u7ef4\u62a4\u7684\u7528\u6237\u754c\u9762\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind CSS \u751f\u6210\u7684 CSS \u6587\u4ef6\u4f1a\u5f88\u5927\u5417<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0d\u4f1a\u3002Tailwind CSS \u5728\u751f\u4ea7\u6a21\u5f0f\u4e0b\u4f7f\u7528\u4e86\u7cbe\u5bc6\u7684 PurgeCSS \u529f\u80fd\uff08\u5728 V3 \u53ca\u4ee5\u540e\u7248\u672c\u4e2d\u96c6\u6210\u5728\u5de5\u5177\u5185\u90e8\uff09\u3002\u5b83\u4f1a\u81ea\u52a8\u626b\u63cf\u4f60\u7684\u6a21\u677f\u6587\u4ef6\uff0c\u5e76\u5254\u9664\u6240\u6709\u672a\u4f7f\u7528\u5230\u7684 CSS \u6837\u5f0f\u7c7b\uff0c\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u6781\u5c0f\uff08\u53ef\u4ee5\u538b\u7f29\u523010KB\u4ee5\u4e0b\uff09\uff0c\u53ea\u5305\u542b\u9879\u76ee\u5b9e\u9645\u7528\u5230\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5728 HTML \u4e2d\u5199\u8fd9\u4e48\u591a\u7c7b\u540d\uff0c\u4ee3\u7801\u4f1a\u4e0d\u4f1a\u5f88\u96be\u7ef4\u62a4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u662f\u4e00\u4e2a\u5e38\u89c1\u7684\u521d\u6b21\u63a5\u89e6\u8005\u7684\u987e\u8651\u3002\u5b9e\u8df5\u8868\u660e\uff0c\u8fd9\u79cd\u76f4\u63a5\u7684\u8868\u8fbe\u65b9\u5f0f\u53cd\u800c\u4f7f\u6837\u5f0f\u53d8\u5f97\u66f4\u53ef\u9884\u6d4b\u548c\u6613\u4e8e\u7ef4\u62a4\u3002\u4f60\u4e0d\u518d\u9700\u8981\u5728 HTML \u548c CSS \u6587\u4ef6\u4e4b\u95f4\u6765\u56de\u8df3\u8f6c\u6765\u5b9a\u4f4d\u6837\u5f0f\u89c4\u5219\u3002\u7ec4\u4ef6\u7684\u6837\u5f0f\u5c31\u5728\u7ec4\u4ef6\u65c1\u8fb9\uff0c\u4e00\u76ee\u4e86\u7136\u3002\u5bf9\u4e8e\u9ad8\u5ea6\u91cd\u590d\u7684\u6837\u5f0f\u7ec4\u5408\uff0c\u53ef\u4ee5\u4f7f\u7528 <code>@apply<\/code> \u6307\u4ee4\u63d0\u53d6\u4e3a\u7ec4\u4ef6\u7c7b\uff0c\u4fdd\u6301\u4ee3\u7801\u7684 DRY\uff08Don\u2019t Repeat Yourself\uff09\u539f\u5219\u3002\u8bb8\u591a\u5f00\u53d1\u8005\u53cd\u9988\uff0c\u8fd9\u6bd4\u7ba1\u7406\u4f20\u7edf\u7684 CSS \u66f4\u9ad8\u6548\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind CSS \u9002\u5408\u4e0e\u54ea\u4e9b\u524d\u7aef\u6846\u67b6\u4e00\u8d77\u4f7f\u7528<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind CSS \u662f\u8bbe\u8ba1\u4e3a\u65e0\u6846\u67b6\u4f9d\u8d56\u7684\uff0c\u56e0\u6b64\u5b83\u53ef\u4ee5\u5b8c\u7f8e\u5730\u4e0e\u4efb\u4f55\u524d\u7aef\u6846\u67b6\u6216\u9759\u6001\u7ad9\u70b9\u751f\u6210\u5668\u914d\u5408\u4f7f\u7528\u3002\u5b83\u7684\u7c7b\u540d\u53ea\u662f\u666e\u901a\u7684 HTML \u5c5e\u6027\uff0c\u6240\u4ee5\u4f60\u53ef\u4ee5\u8f7b\u677e\u5730\u5c06\u5176\u4e0e Vue.js\u3001React\u3001Angular\u3001Svelte\u3001Next.js\u3001Nuxt.js\u3001Gatsby\u3001Astro \u7b49\u6846\u67b6\u6216\u5e93\u4e00\u8d77\u4f7f\u7528\u3002\u53ea\u9700\u8981\u6b63\u786e\u914d\u7f6e\u6784\u5efa\u5de5\u5177\uff08\u5982 PostCSS\uff09\u4ee5\u5904\u7406\u6846\u67b6\u4e2d\u7684\u6a21\u677f\u6587\u4ef6\u5373\u53ef\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u5982\u4f55\u81ea\u5b9a\u4e49\u6216\u6269\u5c55\u9ed8\u8ba4\u7684\u6837\u5f0f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u81ea\u5b9a\u4e49\u662f Tailwind CSS \u7684\u4e00\u5927\u4eae\u70b9\u3002\u6240\u6709\u81ea\u5b9a\u4e49\u90fd\u53ef\u4ee5\u5728\u9879\u76ee\u6839\u76ee\u5f55\u7684 <code>tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\u4e2d\u5b8c\u6210\u3002\u4f60\u53ef\u4ee5\u5728 <code>theme.extend<\/code> \u5bf9\u8c61\u4e2d\u6dfb\u52a0\u65b0\u7684\u503c\uff08\u63a8\u8350\u65b9\u5f0f\uff0c\u4ee5\u907f\u514d\u8986\u76d6\u6574\u4e2a\u9ed8\u8ba4\u914d\u7f6e\uff09\uff0c\u4e5f\u53ef\u4ee5\u5728 <code>theme<\/code> \u5bf9\u8c61\u4e2d\u76f4\u63a5\u8986\u76d6\u9ed8\u8ba4\u503c\u3002\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49\u989c\u8272\u3001\u5b57\u4f53\u3001\u95f4\u8ddd\u3001\u65ad\u70b9\u3001\u5706\u89d2\u7b49\u51e0\u4e4e\u6240\u6709\u8bbe\u8ba1\u7cfb\u7edf\u7684\u53d8\u91cf\u3002\u5b98\u65b9\u6587\u6863\u63d0\u4f9b\u4e86\u8be6\u5c3d\u7684\u914d\u7f6e\u9009\u9879\u8bf4\u660e\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>B\u00e0i vi\u1ebft n\u00e0y gi\u1edbi thi\u1ec7u v\u1ec1 Tailwind CSS \u2013 m\u1ed9t framework CSS t\u1eadp trung v\u00e0o t\u00ednh linh ho\u1ea1t v\u00e0 kh\u1ea3 n\u0103ng t\u00f9y ch\u1ec9nh cao. B\u00e0i vi\u1ebft tr\u00ecnh b\u00e0y s\u1ef1 kh\u00e1c bi\u1ec7t gi\u1eefa Tailwind CSS v\u00e0 c\u00e1c framework UI truy\u1ec1n th\u1ed1ng, c\u0169ng nh\u01b0 nh\u1eefng \u01b0u \u0111i\u1ec3m n\u1ed5i b\u1eadt c\u1ee7a n\u00f3. C\u00e1c b\u01b0\u1edbc c\u00e0i \u0111\u1eb7t v\u00e0 thi\u1ebft l\u1eadp Tailwind CSS th\u00f4ng qua NPM v\u00e0 PostCSS \u0111\u01b0\u1ee3c gi\u1ea3i th\u00edch chi ti\u1ebft. Ngo\u00e0i ra, c\u00e1c quy \u01b0\u1edbc \u0111\u1eb7t t\u00ean l\u1edbp (classes) c\u01a1 b\u1ea3n, h\u1ec7 th\u1ed1ng thi\u1ebft k\u1ebf th\u00edch \u1ee9ng (responsive design), v\u00e0 c\u00e1c kh\u00e1i ni\u1ec7m quan tr\u1ecdng kh\u00e1c c\u0169ng \u0111\u01b0\u1ee3c \u0111\u1ec1 c\u1eadp, nh\u1eb1m gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n d\u1ec5 d\u00e0ng b\u1eaft \u0111\u1ea7u s\u1eed d\u1ee5ng v\u00e0 x\u00e2y d\u1ef1ng giao di\u1ec7n t\u00f9y ch\u1ec9nh m\u1ed9t c\u00e1ch hi\u1ec7u qu\u1ea3.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"knowledge_category":[281],"class_list":["post-12365876","knowledge_post","type-knowledge_post","status-publish","hentry","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS\u6559\u7a0b, CSS\u6846\u67b6, \u5b9e\u7528\u7c7b, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u5b89\u88c5\u914d\u7f6e, \u524d\u7aef\u5f00\u53d1\u5165\u95e8, \u4ece\u57fa\u7840\u5230\u9ad8\u7ea7\u6307\u5357"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/knowledge_posts\/12365876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/knowledge_posts\/12365876\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/media?parent=12365876"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/tags?post=12365876"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/vi\/wp-json\/wp\/v2\/knowledge_category?post=12365876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}