{"id":12371206,"date":"2026-03-15T21:38:05","date_gmt":"2026-03-15T13:38:05","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e6%95%99%e7%a8%8b%ef%bc%9a%e7%bb%88%e6%9e%81%e5%ae%9e%e7%94%a8%e6%8c%87%e5%8d%97%ef%bc%8c%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a\/"},"modified":"2026-03-15T21:42:04","modified_gmt":"2026-03-15T13:42:04","slug":"tailwind-css-tutorial-ultimate-practical-guide","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/id\/knowledge\/website-building\/tailwind-css-tutorial-ultimate-practical-guide\/","title":{"rendered":"Panduan Tailwind CSS: Panduan Praktis yang Lengkap, Dari Pemula Hingga Ahli"},"content":{"rendered":"\n

\u4ec0\u4e48\u662f Tailwind CSS\uff1f<\/h2>\n\n\n\n

Tailwind CSS \u662f\u4e00\u4e2a\u5b9e\u7528\u4f18\u5148\uff08Utility-First\uff09\u7684 CSS \u6846\u67b6\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u4f4e\u7ea7\u522b\u7684\u3001\u5355\u4e00\u7528\u9014\u7684 CSS \u7c7b\uff0c\u53ef\u4ee5\u76f4\u63a5\u5728 HTML\uff08\u6216 JSX\u3001Vue \u6a21\u677f\u7b49\uff09\u4e2d\u7ec4\u5408\u4f7f\u7528\uff0c\u4ece\u800c\u5feb\u901f\u6784\u5efa\u81ea\u5b9a\u4e49\u7684\u7528\u6237\u754c\u9762\u3002\u5b83\u4e0e Bootstrap \u7b49\u63d0\u4f9b\u9884\u7f6e\u7ec4\u4ef6\uff08\u5982\u6309\u94ae\u3001\u5361\u7247\uff09\u7684\u6846\u67b6\u4e0d\u540c\uff0cTailwind CSS \u4e0d\u63d0\u4f9b\u4efb\u4f55\u5f00\u7bb1\u5373\u7528\u7684\u7ec4\u4ef6\uff0c\u800c\u662f\u63d0\u4f9b\u4e86\u4e00\u5957\u6784\u5efa\u4efb\u4f55\u8bbe\u8ba1\u6240\u9700\u7684\u57fa\u672c\u5de5\u5177\u3002<\/p>\n\n\n\n

\u8fd9\u79cd\u5b9e\u7528\u4f18\u5148\u7684\u65b9\u6cd5\u610f\u5473\u7740\u5f00\u53d1\u8005\u4e0d\u518d\u9700\u8981\u4e3a\u7ec4\u4ef6\u7f16\u5199\u81ea\u5b9a\u4e49\u7684 CSS\uff0c\u4e5f\u65e0\u9700\u5728 HTML \u548c CSS \u6587\u4ef6\u4e4b\u95f4\u9891\u7e41\u5207\u6362\u3002\u901a\u8fc7\u5728 HTML \u4e2d\u76f4\u63a5\u5e94\u7528\u4e00\u7cfb\u5217\u8bf8\u5982 text-blue-600<\/code>\u3001p-4<\/code>\u3001bg-gray-100<\/code> \u7684\u7c7b\uff0c\u5373\u53ef\u5b9e\u73b0\u6587\u672c\u989c\u8272\u3001\u5185\u8fb9\u8ddd\u548c\u80cc\u666f\u8272\u7684\u8bbe\u5b9a\u3002\u8fd9\u6781\u5927\u5730\u63d0\u9ad8\u4e86\u5f00\u53d1\u6548\u7387\uff0c\u5e76\u4f7f\u5f97\u6837\u5f0f\u4e0e\u7ed3\u6784\u7d27\u5bc6\u8026\u5408\uff0c\u51cf\u5c11\u4e86 CSS \u6587\u4ef6\u7684\u5927\u5c0f\u548c\u590d\u6742\u5ea6\u3002<\/p>\n\n\n\n

Tailwind CSS \u7684\u6838\u5fc3\u8bbe\u8ba1\u54f2\u5b66\u662f\u201c\u7ea6\u675f\u521b\u9020\u81ea\u7531\u201d\u3002\u5b83\u901a\u8fc7\u4e00\u5957\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u3001\u9075\u5faa\u8bbe\u8ba1\u7cfb\u7edf\u7684\u95f4\u8ddd\u3001\u989c\u8272\u3001\u5b57\u4f53\u5927\u5c0f\u7b49\u89c4\u6a21\uff0c\u786e\u4fdd\u4e86\u9879\u76ee\u8bbe\u8ba1\u7684\u4e00\u81f4\u6027\uff0c\u540c\u65f6\u53c8\u4e0d\u5931\u7075\u6d3b\u6027\u3002\u5f00\u53d1\u8005\u53ef\u4ee5\u5b8c\u5168\u57fa\u4e8e\u8fd9\u4e9b\u9884\u5b9a\u4e49\u7684\u7ea6\u675f\u6765\u521b\u9020\u72ec\u7279\u7684\u8bbe\u8ba1\uff0c\u800c\u65e0\u9700\u62c5\u5fc3\u6837\u5f0f\u7684\u4e0d\u53ef\u63a7\u6269\u6563\u3002<\/p>\n\n\n\n

\u5982\u4f55\u5f00\u59cb\u4f7f\u7528 Tailwind CSS<\/h2>\n\n\n\n

\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\u5b89\u88c5\uff0c\u8fd9\u53ef\u4ee5\u6700\u5927\u7a0b\u5ea6\u5730\u5229\u7528 Tailwind \u7684\u4f18\u5316\u529f\u80fd\u3002<\/p>\n\n\n\n

\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5<\/h3>\n\n\n\n

\u9996\u5148\uff0c\u901a\u8fc7\u5305\u7ba1\u7406\u5668\u521d\u59cb\u5316\u9879\u76ee\u5e76\u5b89\u88c5 Tailwind CSS \u53ca\u5176\u4f9d\u8d56\u3002\u6838\u5fc3\u7684\u547d\u4ee4\u662f\u5b89\u88c5 tailwindcss<\/code>\u3001postcss<\/code> \u548c autoprefixer<\/code>\u3002<\/p>\n\n

\r\n\t\r\n\t\t\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"WordPress.com\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\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\tWordPress.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\t99.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
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t
\u514d\u8d39\u57df\u540d\u4e00\u5e74<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\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\r\n\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"UltaHost\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\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\tUltaHost \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\t900+\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
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t
\u4f18\u60e0 40%<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\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\r\n<\/div>\r\n\r\n\r\n\n\n\n\n\n\n\n
npm install -D tailwindcss postcss autoprefixer<\/code><\/pre>\n\n\n\n
\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u751f\u6210 Tailwind CSS \u548c PostCSS \u7684\u914d\u7f6e\u6587\u4ef6\u3002\u6267\u884c npx tailwindcss init -p<\/code> \u4f1a\u540c\u65f6\u521b\u5efa tailwind.config.js<\/code> \u548c postcss.config.js<\/code> \u6587\u4ef6\u3002<\/p>\n\n\n\n
npx tailwindcss init -p<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u6a21\u677f\u8def\u5f84<\/h3>\n\n\n\n
\u5728\u751f\u6210\u7684 tailwind.config.js<\/code> \u6587\u4ef6\u4e2d\uff0c\u4f60\u9700\u8981\u914d\u7f6e content<\/code> \u5b57\u6bb5\uff0c\u4ee5\u544a\u77e5 Tailwind \u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4e2d\u7684\u7c7b\u540d\u3002\u8fd9\u901a\u5e38\u5305\u62ec\u4f60\u7684 HTML\u3001JavaScript\u3001JSX \u6216 Vue \u6587\u4ef6\u3002\u8fd9\u81f3\u5173\u91cd\u8981\uff0c\u56e0\u4e3a Tailwind \u4f7f\u7528\u4e00\u4e2a\u79f0\u4e3a\u201cPurgeCSS\u201d\uff08\u5728\u751f\u4ea7\u7248\u672c\u4e2d\uff09\u7684\u673a\u5236\u6765\u5220\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684 CSS\uff0c\u4ece\u800c\u751f\u6210\u6700\u5c0f\u7684\u6837\u5f0f\u6587\u4ef6\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,jsx,ts,tsx,vue}"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u5bfc\u5165\u6837\u5f0f\u6307\u4ee4<\/h3>\n\n\n\n
\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\uff08\u4f8b\u5982 src\/styles.css<\/code> \u6216 src\/index.css<\/code>\uff09\u4e2d\uff0c\u4f7f\u7528 @tailwind<\/code> \u6307\u4ee4\u6765\u6ce8\u5165 Tailwind \u7684\u6838\u5fc3\u6837\u5f0f\u3002<\/p>\n\n\n\n
\/* src\/styles.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u5728\u4f60\u7684\u9879\u76ee\u5165\u53e3\u6587\u4ef6\u4e2d\u5f15\u5165\u8fd9\u4e2a CSS \u6587\u4ef6\u3002\u5b8c\u6210\u4ee5\u4e0a\u6b65\u9aa4\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728 HTML \u4e2d\u5f00\u59cb\u4f7f\u7528 Tailwind \u7684\u5b9e\u7528\u7c7b\u4e86\u3002<\/p>\n\n\n\n
\u6838\u5fc3\u5b9e\u7528\u7c7b\u4e0e\u5e38\u7528\u6a21\u5f0f<\/h2>\n\n\n\n
Tailwind CSS \u7684\u7c7b\u540d\u662f\u9ad8\u5ea6\u8bed\u4e49\u5316\u548c\u53ef\u9884\u6d4b\u7684\uff0c\u9075\u5faa\u4e00\u4e2a\u7b80\u5355\u7684\u547d\u540d\u6a21\u5f0f\uff1a\u5c5e\u6027-\u53d6\u503c\uff08\u6216\u5c5e\u6027-\u65ad\u70b9-\u53d6\u503c\uff09\u3002<\/p>\n\n\n\n
\u5e03\u5c40\u4e0e\u95f4\u8ddd<\/h3>\n\n\n\n
\u8fd9\u662f\u6700\u5e38\u7528\u7684\u4e00\u7ec4\u7c7b\u3002\u4f8b\u5982\uff0cflex<\/code> \u7528\u4e8e\u8bbe\u7f6e\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\uff0cp-4<\/code> \u8868\u793a padding: 1rem<\/code>\u3002\u8fb9\u8ddd\u4f7f\u7528 m-*<\/code>\uff0c\u5185\u8fb9\u8ddd\u4f7f\u7528 p-*<\/code>\u3002\u6570\u5b57\u901a\u5e38\u5bf9\u5e94\u4e00\u4e2a\u6309\u6bd4\u4f8b\u7f29\u653e\u7684\u95f4\u8ddd\u7cfb\u7edf\uff08\u5982 0\uff0c 1\uff0c 2\uff0c 4\uff0c 6\uff09\u3002<\/p>\n\n\n\n
<div class="flex justify-between items-center p-4">\n  <div class="ml-2">\u5de6\u8fb9<\/div>\n  <div class="mr-2">\u53f3\u8fb9<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u989c\u8272\u4e0e\u80cc\u666f<\/h3>\n\n\n\n
\u4f60\u53ef\u4ee5\u8f7b\u677e\u5730\u8bbe\u7f6e\u6587\u672c\u989c\u8272\u3001\u80cc\u666f\u8272\u548c\u8fb9\u6846\u989c\u8272\u3002\u989c\u8272\u7cfb\u7edf\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u8c03\u8272\u677f\uff0c\u5982 text-blue-500<\/code>\u3001bg-gray-100<\/code>\u3001border-red-300<\/code>\u3002\u6570\u5b57\u8d8a\u5927\uff0c\u989c\u8272\u901a\u5e38\u8d8a\u6df1\uff08\u4f8b\u5982\uff0cblue-100<\/code> \u5f88\u6d45\uff0cblue-900<\/code> \u5f88\u6df1\uff09\u3002<\/p>\n\n\n\n
\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h3>\n\n\n\n
Tailwind \u91c7\u7528\u79fb\u52a8\u4f18\u5148\u7684\u7b56\u7565\u3002\u6240\u6709\u5b9e\u7528\u7c7b\u9ed8\u8ba4\u90fd\u9488\u5bf9\u79fb\u52a8\u8bbe\u5907\u3002\u8981\u4e3a\u66f4\u5927\u7684\u5c4f\u5e55\u6dfb\u52a0\u6837\u5f0f\uff0c\u9700\u8981\u5728\u7c7b\u540d\u524d\u52a0\u4e0a\u65ad\u70b9\u524d\u7f00\uff0c\u5982 md:<\/code>\u3001lg:<\/code>\u3002\u8fd9\u4f7f\u5f97\u6784\u5efa\u54cd\u5e94\u5f0f\u754c\u9762\u53d8\u5f97\u5f02\u5e38\u7b80\u5355\u3002<\/p>\n\n\n  
\n\n      
\n        Bluehost\u5efa\u7ad9\u52a9\u624b<\/strong>\n        
\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      
\n                  \n                          \n              \"\u5efa\u7ad9\u52a9\u624b\n                      <\/a>\n          \n        \n          \u8bbf\u95eeBluehost        <\/a>\n      <\/div>\n    <\/div>\n\n    \n\n\n\n\n\n\n
<div class="text-base md:text-lg lg:text-xl">\n  \u8fd9\u6bb5\u6587\u5b57\u5728\u624b\u673a\u4e0a\u4f7f\u7528\u57fa\u7840\u5927\u5c0f\uff0c\u5728\u5e73\u677f\u4e0a\u53d8\u5927\uff0c\u5728\u684c\u9762\u4e0a\u53d8\u5f97\u66f4\u5927\u3002\n<\/div><\/code><\/pre>\n\n\n\n
\u60ac\u505c\u3001\u7126\u70b9\u7b49\u72b6\u6001<\/h3>\n\n\n\n
\u901a\u8fc7\u6dfb\u52a0\u72b6\u6001\u524d\u7f00\uff0c\u53ef\u4ee5\u4e3a\u5143\u7d20\u7684\u4e0d\u540c\u72b6\u6001\u8bbe\u7f6e\u6837\u5f0f\u3002\u4f8b\u5982\uff0chover:bg-blue-600<\/code> \u4f1a\u5728\u9f20\u6807\u60ac\u505c\u65f6\u6539\u53d8\u80cc\u666f\u8272\uff0cfocus:ring-2<\/code> \u4f1a\u5728\u5143\u7d20\u83b7\u5f97\u7126\u70b9\u65f6\u6dfb\u52a0\u4e00\u4e2a\u73af\u72b6\u8fb9\u6846\u3002<\/p>\n\n\n\n
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">\n  \u60ac\u505c\u6709\u6548\u679c\u7684\u6309\u94ae\n<\/button><\/code><\/pre>\n\n\n\n
\u9ad8\u7ea7\u6280\u5de7\u4e0e\u81ea\u5b9a\u4e49\u914d\u7f6e<\/h2>\n\n\n\n
\u5f53\u638c\u63e1\u4e86\u57fa\u7840\u540e\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e9b\u9ad8\u7ea7\u6280\u5de7\u548c\u81ea\u5b9a\u4e49\u914d\u7f6e\u6765\u5145\u5206\u53d1\u6325 Tailwind \u7684\u6f5c\u529b\u3002<\/p>\n\n\n\n
\u63d0\u53d6\u7ec4\u4ef6\u7c7b<\/h3>\n\n\n\n
\u867d\u7136\u5b9e\u7528\u4f18\u5148\u662f\u6838\u5fc3\u7406\u5ff5\uff0c\u4f46\u4e3a\u4e86\u907f\u514d\u5728 HTML \u4e2d\u91cd\u590d\u5f88\u957f\u7684\u7c7b\u5217\u8868\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u63d0\u53d6\u548c\u590d\u7528\u5e38\u7528\u7684\u6837\u5f0f\u7ec4\u5408\uff0c\u521b\u5efa\u4f60\u81ea\u5df1\u7684\u201c\u7ec4\u4ef6\u7c7b\u201d\u3002<\/p>\n\n\n\n
\/* \u5728\u4f60\u7684 CSS \u6587\u4ef6\u4e2d *\/\n.btn-primary {\n  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u5728 HTML \u4e2d\u53ea\u9700\u4f7f\u7528 class=\"btn-primary\"<\/code> \u5373\u53ef\u3002<\/p>\n\n\n\n
\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf<\/h3>\n\n\n\n
Tailwind \u7684\u6240\u6709\u9ed8\u8ba4\u503c\u90fd\u662f\u53ef\u914d\u7f6e\u7684\u3002\u901a\u8fc7\u4fee\u6539 tailwind.config.js<\/code> \u6587\u4ef6\uff0c\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49\u989c\u8272\u3001\u5b57\u4f53\u3001\u95f4\u8ddd\u89c4\u6a21\u3001\u65ad\u70b9\u7b49\uff0c\u4f7f\u5176\u5b8c\u5168\u7b26\u5408\u4f60\u7684\u54c1\u724c\u6216\u8bbe\u8ba1\u89c4\u8303\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand-blue': '#1992d4',\n      },\n      spacing: {\n        '72': '18rem',\n        '84': '21rem',\n      }\n    },\n  },\n}<\/code><\/pre>\n\n\n\n
\u5b9a\u4e49\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u4f7f\u7528 text-brand-blue<\/code> \u6216 p-84<\/code> \u8fd9\u6837\u7684\u81ea\u5b9a\u4e49\u7c7b\u4e86\u3002<\/p>\n\n\n  
\n\n      
\n        hosting.com<\/strong>\n        
\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      
\n                  \n                          \n              \"\n              \n              \n                      <\/a>\n          \n        \n          \u8bbf\u95eehosting.com        <\/a>\n      <\/div>\n    <\/div>\n\n    \n\n\n\n\n\n\n
\u4f7f\u7528 JIT \u6a21\u5f0f<\/h3>\n\n\n\n
\u4ece Tailwind CSS v2.1+ \u5f00\u59cb\uff0c\u5f15\u5165\u4e86\u5373\u65f6\uff08Just-in-Time\uff0c JIT\uff09\u5f15\u64ce\u3002\u5b83\u4f1a\u5728\u4f60\u7f16\u5199\u6a21\u677f\u65f6\u52a8\u6001\u751f\u6210\u6240\u9700\u7684 CSS\uff0c\u800c\u4e0d\u662f\u9884\u5148\u751f\u6210\u4e00\u4e2a\u5305\u542b\u6240\u6709\u53ef\u80fd\u7c7b\u7684\u5de8\u5927 CSS \u6587\u4ef6\u3002\u8fd9\u5e26\u6765\u4e86\u5de8\u5927\u7684\u6027\u80fd\u63d0\u5347\uff0c\u5e76\u652f\u6301\u4e00\u4e9b\u5728\u4f20\u7edf\u6a21\u5f0f\u4e0b\u65e0\u6cd5\u5b9e\u73b0\u7684\u529f\u80fd\uff0c\u5982\u4efb\u610f\u503c\u53d8\u4f53\u3002<\/p>\n\n\n\n
\u8981\u542f\u7528 JIT \u6a21\u5f0f\uff0c\u53ea\u9700\u5728 tailwind.config.js<\/code> \u4e2d\u8bbe\u7f6e mode: 'jit'<\/code>\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  mode: 'jit',\n  \/\/ ... \u5176\u4ed6\u914d\u7f6e\n}<\/code><\/pre>\n\n\n\n
\u542f\u7528\u540e\uff0c\u4f60\u751a\u81f3\u53ef\u4ee5\u4f7f\u7528\u5982 w-[200px]<\/code> \u6216 top-[-10px]<\/code> \u8fd9\u6837\u7684\u4efb\u610f\u503c\u7c7b\uff0c\u4e3a\u5f00\u53d1\u63d0\u4f9b\u4e86\u6781\u5927\u7684\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS \u901a\u8fc7\u5176\u72ec\u7279\u7684\u5b9e\u7528\u4f18\u5148\u65b9\u6cd5\u8bba\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u524d\u7aef\u5f00\u53d1\u8005\u7f16\u5199\u6837\u5f0f\u7684\u65b9\u5f0f\u3002\u5b83\u5c06\u6837\u5f0f\u51b3\u7b56\u4ece CSS \u6587\u4ef6\u79fb\u5230\u4e86 HTML \u6807\u8bb0\u4e2d\uff0c\u901a\u8fc7\u7ec4\u5408\u5927\u91cf\u5355\u4e00\u804c\u8d23\u7684\u539f\u5b50\u7c7b\uff0c\u5b9e\u73b0\u4e86\u9ad8\u6548\u3001\u4e00\u81f4\u4e14\u9ad8\u5ea6\u53ef\u5b9a\u5236\u7684\u754c\u9762\u5f00\u53d1\u3002\u4ece\u7b80\u5355\u7684\u5b89\u88c5\u914d\u7f6e\uff0c\u5230\u6838\u5fc3\u7684\u5e03\u5c40\u3001\u989c\u8272\u3001\u54cd\u5e94\u5f0f\u548c\u72b6\u6001\u7c7b\uff0c\u518d\u5230\u9ad8\u7ea7\u7684\u81ea\u5b9a\u4e49\u914d\u7f6e\u3001\u7ec4\u4ef6\u63d0\u53d6\u548c JIT \u6a21\u5f0f\uff0cTailwind \u63d0\u4f9b\u4e86\u4e00\u6574\u5957\u5f3a\u5927\u800c\u7075\u6d3b\u7684\u5de5\u5177\u3002\u5b83\u9f13\u52b1\u5728\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u7ea6\u675f\u5185\u8fdb\u884c\u521b\u4f5c\uff0c\u65e2\u4fdd\u8bc1\u4e86\u8bbe\u8ba1\u7684\u4e00\u81f4\u6027\uff0c\u53c8\u8d4b\u4e88\u4e86\u5f00\u53d1\u8005\u5145\u5206\u7684\u81ea\u7531\uff0c\u662f\u73b0\u4ee3 Web \u9879\u76ee\u5feb\u901f\u539f\u578b\u8bbe\u8ba1\u548c\u4ea7\u54c1\u5f00\u53d1\u7684\u5f3a\u5927\u52a9\u529b\u3002<\/p>\n\n\n\n
FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n
Tailwind CSS \u4f1a\u5bfc\u81f4 HTML \u53d8\u5f97\u81c3\u80bf\u5417\uff1f<\/h3>\n\n\n\n
\u786e\u5b9e\uff0c\u4f7f\u7528 Tailwind CSS \u4f1a\u5728 HTML \u5143\u7d20\u4e0a\u6dfb\u52a0\u5927\u91cf\u7c7b\u540d\uff0c\u8fd9\u53ef\u80fd\u4f1a\u8ba9 HTML \u770b\u8d77\u6765\u6709\u4e9b\u5197\u957f\u3002<\/p>\n\n\n\n
\u7136\u800c\uff0c\u8fd9\u79cd\u201c\u81c3\u80bf\u201d\u662f\u7ed3\u6784\u5316\u7684\u548c\u53ef\u9884\u6d4b\u7684\uff0c\u5b83\u5b9e\u9645\u4e0a\u5c06\u6837\u5f0f\u7684\u590d\u6742\u6027\u4ece CSS \u8f6c\u79fb\u5230\u4e86\u66f4\u5bb9\u6613\u7ba1\u7406\u7684 HTML \u4e2d\u3002\u66f4\u91cd\u8981\u7684\u662f\uff0c\u901a\u8fc7\u914d\u7f6e content<\/code> \u8def\u5f84\uff0c\u751f\u4ea7\u6784\u5efa\u5de5\u5177\u4f1a\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684 CSS \u7c7b\uff0c\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u6bd4\u4f20\u7edf\u624b\u5199\u6216\u4f7f\u7528\u7ec4\u4ef6\u5e93\u7684 CSS \u8981\u5c0f\u5f97\u591a\u3002\u56e0\u6b64\uff0c\u6027\u80fd\u4e0a\u53cd\u800c\u66f4\u6709\u4f18\u52bf\u3002<\/p>\n\n\n\n
\u5982\u4f55\u8986\u76d6\u6216\u4fee\u6539 Tailwind \u7684\u9ed8\u8ba4\u6837\u5f0f\uff1f<\/h3>\n\n\n\n
\u4f60\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u8986\u76d6\u9ed8\u8ba4\u6837\u5f0f\u3002\u6700\u63a8\u8350\u7684\u65b9\u5f0f\u662f\u5728 tailwind.config.js<\/code> \u6587\u4ef6\u7684 theme.extend<\/code> \u90e8\u5206\u8fdb\u884c\u6269\u5c55\uff0c\u8fd9\u6837\u53ef\u4ee5\u6dfb\u52a0\u65b0\u7684\u503c\u800c\u4e0d\u5f71\u54cd\u539f\u6709\u7cfb\u7edf\u3002\u5982\u679c\u4f60\u60f3\u5b8c\u5168\u66ff\u6362\u67d0\u4e2a\u4e3b\u9898\u952e\uff08\u5982\u989c\u8272\uff09\uff0c\u5219\u76f4\u63a5\u5728 theme<\/code> \u4e0b\u91cd\u65b0\u5b9a\u4e49\u5b83\u3002\u6b64\u5916\uff0c\u5728\u5b9e\u7528\u7c7b\u524d\u4f7f\u7528 !important<\/code> \u4fee\u9970\u7b26\uff08\u5982 !text-red-500<\/code>\uff09\u6216\u8005\u4f7f\u7528 CSS \u7684\u66f4\u9ad8\u7279\u5f02\u6027\u9009\u62e9\u5668\uff0c\u4e5f\u53ef\u4ee5\u5b9e\u73b0\u6837\u5f0f\u7684\u8986\u76d6\u3002<\/p>\n\n\n\n
Tailwind CSS \u9002\u5408\u4e0e\u54ea\u4e9b\u524d\u7aef\u6846\u67b6\u4e00\u8d77\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
Tailwind CSS \u4e0e\u51e0\u4e4e\u6240\u6709\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u90fd\u80fd\u5b8c\u7f8e\u96c6\u6210\u3002\u5b83\u539f\u751f\u652f\u6301 React\u3001Vue\u3001Angular\u3001Svelte \u7b49\u3002\u4f60\u53ea\u9700\u8981\u786e\u4fdd\u5728\u6846\u67b6\u7684\u6a21\u677f\u6216 JSX \u4e2d\u6b63\u786e\u4f7f\u7528\u7c7b\u540d\uff0c\u5e76\u5728\u6784\u5efa\u6d41\u7a0b\u4e2d\u914d\u7f6e\u597d PostCSS \u548c Tailwind \u5373\u53ef\u3002\u8bb8\u591a\u6846\u67b6\uff08\u5982 Next.js\u3001Vite\uff09\u751a\u81f3\u63d0\u4f9b\u4e86\u5b98\u65b9\u7684 Tailwind CSS \u96c6\u6210\u793a\u4f8b\u6216\u63d2\u4ef6\uff0c\u4f7f\u5f97\u96c6\u6210\u8fc7\u7a0b\u66f4\u52a0\u987a\u7545\u3002<\/p>\n\n\n\n
\u4f7f\u7528 Tailwind CSS \u9700\u8981\u653e\u5f03\u624b\u5199 CSS \u5417\uff1f<\/h3>\n\n\n\n
\u5b8c\u5168\u4e0d\u9700\u8981\u3002Tailwind CSS \u5e76\u4e0d\u6392\u65a5\u624b\u5199 CSS\uff0c\u800c\u662f\u4e0e\u4e4b\u4e92\u8865\u3002\u4f60\u4ecd\u7136\u53ef\u4ee5\u5728\u9879\u76ee\u4e2d\u7f16\u5199\u81ea\u5b9a\u4e49\u7684 CSS \u6587\u4ef6\u3002Tailwind \u7684 @apply<\/code> \u6307\u4ee4\u5141\u8bb8\u4f60\u5728\u81ea\u5b9a\u4e49 CSS \u4e2d\u590d\u7528\u5176\u5de5\u5177\u7c7b\u3002\u5bf9\u4e8e\u6781\u5176\u7279\u6b8a\u3001\u65e0\u6cd5\u7528\u5b9e\u7528\u7c7b\u7ec4\u5408\u5b9e\u73b0\u7684\u6837\u5f0f\uff0c\u6216\u8005\u9700\u8981\u590d\u6742 CSS \u7279\u6027\uff08\u5982\u5173\u952e\u5e27\u52a8\u753b\uff09\u7684\u573a\u666f\uff0c\u624b\u5199 CSS \u4ecd\u7136\u662f\u5fc5\u8981\u7684\u3002Tailwind \u53ea\u662f\u63d0\u4f9b\u4e86\u4e00\u79cd\u66f4\u9ad8\u6548\u7684\u65b9\u5f0f\u6765\u5904\u7406\u9879\u76ee\u4e2d 90% \u4ee5\u4e0a\u7684\u5e38\u89c1\u6837\u5f0f\u9700\u6c42\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel ini merupakan panduan lengkap tentang Tailwind CSS. Di awal, dijelaskan konsep-konsep utama dan filosofi desain Tailwind CSS sebagai kerangka kerja CSS yang mengutamakan kepraktisan. Selanjutnya, dijelaskan secara rinci cara menginstal Tailwind CSS melalui npm, mengonfigurasi path untuk template, serta cara mengimpor gaya (styles) agar dapat digunakan. Di akhir, diuraikan pola penamaan kelas-kelas utama Tailwind CSS (seperti untuk penataan tata letak, warna, dan latar belakang) beserta kombinasi-kombinasi yang sering digunakan, sehingga membantu para pengembang dapat memulai penggunaannya dengan cepat dan membangun antarmuka pengguna (user interface) yang khusus dengan efisien.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"knowledge_category":[281],"class_list":["post-12371206","knowledge_post","type-knowledge_post","status-publish","hentry","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS\u6559\u7a0b,Tailwind CSS\u5165\u95e8,Tailwind CSS\u5b9e\u7528\u6307\u5357,CSS\u6846\u67b6,\u5b9e\u7528\u4f18\u5148,\u524d\u7aef\u5f00\u53d1,\u4ece\u5165\u95e8\u5230\u7cbe\u901a"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12371206","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12371206\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/media?parent=12371206"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/tags?post=12371206"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_category?post=12371206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}