{"id":12379958,"date":"2026-03-20T19:46:51","date_gmt":"2026-03-20T11:46:51","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e5%bd%bb%e5%ba%95%e6%8e%8c%e6%8f%a1-tailwind-css%ef%bc%9a%e4%bb%8e%e5%9f%ba%e7%a1%80%e5%85%a5%e9%97%a8%e5%88%b0%e5%ae%9e%e6%88%98%e9%a1%b9%e7%9b%ae%e5%bc%80%e5%8f%91%e6%8c%87%e5%8d%97\/"},"modified":"2026-03-20T19:50:31","modified_gmt":"2026-03-20T11:50:31","slug":"master-tailwind-css-from-basics-to-real-world-projects","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/id\/knowledge\/website-building\/master-tailwind-css-from-basics-to-real-world-projects\/","title":{"rendered":"Menguasai sepenuhnya Tailwind CSS: Panduan Dari Dasar Hingga Pengembangan Proyek Praktis"},"content":{"rendered":"\n

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

Tailwind CSS \u662f\u4e00\u4e2a\u529f\u80fd\u4f18\u5148\u7684\u5b9e\u7528\u5de5\u5177\u7c7b CSS \u6846\u67b6\u3002\u4e0e Bootstrap \u6216 Bulma \u7b49\u63d0\u4f9b\u9884\u5b9a\u4e49\u7ec4\u4ef6\u7684\u6846\u67b6\u4e0d\u540c\uff0cTailwind \u63d0\u4f9b\u7684\u662f\u4f4e\u7ea7\u522b\u7684\u3001\u539f\u5b50\u5316\u7684 CSS \u7c7b\uff0c\u5141\u8bb8\u5f00\u53d1\u8005\u901a\u8fc7\u76f4\u63a5\u5728 HTML \u4e2d\u7ec4\u5408\u8fd9\u4e9b\u7c7b\u6765\u6784\u5efa\u4efb\u4f55\u8bbe\u8ba1\u3002\u5176\u6838\u5fc3\u54f2\u5b66\u662f\u201c\u5b9e\u7528\u4f18\u5148\u201d\uff0c\u65e8\u5728\u901a\u8fc7\u63d0\u4f9b\u5355\u4e00\u7528\u9014\u7684\u7c7b\u6765\u52a0\u901f\u5f00\u53d1\uff0c\u540c\u65f6\u4fdd\u6301\u6837\u5f0f\u8868\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n

\u5b83\u7684\u5de5\u4f5c\u65b9\u5f0f\u662f\u901a\u8fc7\u4e00\u4e2a\u914d\u7f6e\u6587\u4ef6\u6765\u751f\u6210\u4e00\u5957\u5b9e\u7528\u5de5\u5177\u7c7b\u3002\u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\u5141\u8bb8\u4f60\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u5982\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u5927\u5c0f\u3001\u65ad\u70b9\u7b49\u3002\u7136\u540e\uff0cTailwind \u4f1a\u57fa\u4e8e\u8fd9\u4e9b\u914d\u7f6e\u751f\u6210\u6210\u5343\u4e0a\u4e07\u4e2a\u5bf9\u5e94\u7684 CSS \u7c7b\uff0c\u4f8b\u5982 text-blue-500<\/code>\u3001p-4<\/code>\u3001flex<\/code>\u3001justify-center<\/code> \u7b49\u3002\u5f00\u53d1\u8005\u901a\u8fc7\u7ec4\u5408\u8fd9\u4e9b\u7c7b\u6765\u6784\u5efa\u754c\u9762\uff0c\u800c\u65e0\u9700\u7f16\u5199\u81ea\u5b9a\u4e49\u7684 CSS\u3002<\/p>\n\n\n\n

\u6838\u5fc3\u8bbe\u8ba1\u54f2\u5b66<\/h3>\n\n\n\n

Tailwind CSS \u7684\u8bbe\u8ba1\u54f2\u5b66\u56f4\u7ed5\u201c\u7ea6\u675f\u6027\u81ea\u7531\u201d\u5c55\u5f00\u3002\u5b83\u901a\u8fc7\u63d0\u4f9b\u4e00\u5957\u8bbe\u8ba1\u4ee4\u724c\uff08\u5982\u989c\u8272\u3001\u95f4\u8ddd\u6bd4\u4f8b\uff09\u6765\u7ea6\u675f\u4f60\u7684\u9009\u62e9\uff0c\u786e\u4fdd\u8bbe\u8ba1\u7684\u4e00\u81f4\u6027\u3002\u540c\u65f6\uff0c\u5b83\u53c8\u8d4b\u4e88\u5f00\u53d1\u8005\u6781\u5927\u7684\u81ea\u7531\uff0c\u56e0\u4e3a\u4f60\u53ef\u4ee5\u4f7f\u7528\u4efb\u4f55\u5de5\u5177\u7c7b\u7684\u7ec4\u5408\u6765\u5b9e\u73b0\u89c6\u89c9\u8bbe\u8ba1\uff0c\u800c\u4e0d\u4f1a\u88ab\u9884\u5b9a\u4e49\u7684\u7ec4\u4ef6\u6837\u5f0f\u6240\u9650\u5236\u3002\u8fd9\u6d88\u9664\u4e86\u5728\u8986\u76d6\u9ed8\u8ba4\u6837\u5f0f\u65f6\u5e38\u89c1\u7684\u7279\u5f02\u6027\u6218\u4e89\uff0c\u4f7f\u5f97\u4ee3\u7801\u66f4\u52a0\u53ef\u9884\u6d4b\u548c\u6613\u4e8e\u7ef4\u62a4\u3002<\/p>\n\n\n\n

\u73af\u5883\u642d\u5efa\u4e0e\u57fa\u7840\u914d\u7f6e<\/h2>\n\n\n\n

\u8981\u5f00\u59cb\u4f7f\u7528 Tailwind CSS\uff0c\u9996\u5148\u9700\u8981\u5c06\u5176\u96c6\u6210\u5230\u4f60\u7684\u9879\u76ee\u4e2d\u3002\u6700\u5e38\u7528\u7684\u65b9\u5f0f\u662f\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5\uff0c\u5e76\u914d\u5408 PostCSS \u8fdb\u884c\u5904\u7406\u3002<\/p>\n\n\n\n

\u9996\u5148\uff0c\u901a\u8fc7 npm \u521d\u59cb\u5316\u9879\u76ee\u5e76\u5b89\u88c5 Tailwind \u53ca\u5176\u4f9d\u8d56\uff1a<\/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\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u8fd9\u5c06\u521b\u5efa\u4e24\u4e2a\u5173\u952e\u6587\u4ef6\uff1atailwind.config.js<\/code> \u548c postcss.config.js<\/code>\u3002<\/p>\n\n\n\n
\u914d\u7f6e\u6587\u4ef6\u8be6\u89e3<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u662f Tailwind \u7684\u6838\u5fc3\u914d\u7f6e\u6587\u4ef6\u3002\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u4f60\u53ef\u4ee5\u6269\u5c55\u6216\u8986\u76d6\u9ed8\u8ba4\u7684\u4e3b\u9898\u3001\u6dfb\u52a0\u81ea\u5b9a\u4e49\u7684\u5b9e\u7528\u5de5\u5177\u7c7b\u3001\u914d\u7f6e\u53d8\u4f53\uff08\u5982\u60ac\u505c\u3001\u7126\u70b9\u72b6\u6001\uff09\u4ee5\u53ca\u6307\u5b9a\u9700\u8981\u626b\u63cf\u7684 HTML \u6587\u4ef6\u8def\u5f84\uff0c\u4ee5\u5b9e\u73b0\u751f\u4ea7\u73af\u5883\u4e0b\u7684 CSS \u6811\u6447\uff08Tree Shaking\uff09\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js \u793a\u4f8b\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,jsx,ts,tsx,vue}"],\n  theme: {\n    extend: {\n      colors: {\n        'brand-blue': '#1992d4',\n      },\n      spacing: {\n        '128': '32rem',\n      }\n    },\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u5728\u8fd9\u4e2a\u914d\u7f6e\u4e2d\uff0ccontent<\/code> \u5b57\u6bb5\u544a\u8bc9 Tailwind \u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4ee5\u67e5\u627e\u4f7f\u7528\u7684\u7c7b\u540d\uff0c\u672a\u4f7f\u7528\u7684\u7c7b\u5c06\u5728\u6784\u5efa\u65f6\u88ab\u5254\u9664\u3002theme.extend<\/code> \u90e8\u5206\u5141\u8bb8\u4f60\u5728\u4e0d\u8986\u76d6\u6574\u4e2a\u9ed8\u8ba4\u4e3b\u9898\u7684\u60c5\u51b5\u4e0b\u6dfb\u52a0\u65b0\u7684\u8bbe\u8ba1\u4ee4\u724c\u3002<\/p>\n\n\n\n
\u5f15\u5165\u57fa\u7840\u6837\u5f0f<\/h3>\n\n\n\n
\u63a5\u4e0b\u6765\uff0c\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\uff08\u4f8b\u5982 src\/styles.css<\/code> \u6216 app.css<\/code>\uff09\u4e2d\uff0c\u4f7f\u7528 @tailwind<\/code> \u6307\u4ee4\u6765\u5305\u542b Tailwind \u7684\u5404\u4e2a\u5c42\u3002<\/p>\n\n\n\n
\/* src\/styles.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
@tailwind base<\/code> \u6ce8\u5165 Tailwind \u7684\u57fa\u7840\u6837\u5f0f\uff0c\u5305\u62ec\u4e00\u4e9b\u91cd\u7f6e\u6837\u5f0f\u548c\u9ed8\u8ba4\u7684 HTML \u5143\u7d20\u6837\u5f0f\u3002@tailwind components<\/code> \u7528\u4e8e\u6ce8\u5165\u4f60\u53ef\u80fd\u901a\u8fc7 @apply<\/code> \u6307\u4ee4\u6216\u63d2\u4ef6\u6ce8\u518c\u7684\u4efb\u4f55\u7ec4\u4ef6\u7c7b\u3002@tailwind utilities<\/code> \u5219\u6ce8\u5165\u6240\u6709\u751f\u6210\u7684\u5b9e\u7528\u5de5\u5177\u7c7b\u3002<\/p>\n\n\n\n
\u6838\u5fc3\u5b9e\u7528\u5de5\u5177\u7c7b\u8be6\u89e3<\/h2>\n\n\n\n
Tailwind CSS \u7684\u5b9e\u7528\u5de5\u5177\u7c7b\u8986\u76d6\u4e86\u51e0\u4e4e\u6240\u6709\u5e38\u89c1\u7684 CSS \u5c5e\u6027\uff0c\u5e76\u9075\u5faa\u4e00\u5957\u4e00\u81f4\u7684\u547d\u540d\u89c4\u5219\u3002<\/p>\n\n\n\n
\u5e03\u5c40\u4e0e\u95f4\u8ddd<\/h3>\n\n\n\n
\u5e03\u5c40\u7c7b\u63a7\u5236\u5143\u7d20\u7684\u663e\u793a\u65b9\u5f0f\u3001\u5b9a\u4f4d\u548c\u76d2\u6a21\u578b\u3002\u4f8b\u5982\uff0cflex<\/code>\u3001grid<\/code>\u3001block<\/code>\u3001hidden<\/code> \u7528\u4e8e\u63a7\u5236\u663e\u793a\u7c7b\u578b\u3002\u95f4\u8ddd\u7cfb\u7edf\u57fa\u4e8e\u4e00\u4e2a\u53ef\u914d\u7f6e\u7684\u6bd4\u4f8b\uff08\u9ed8\u8ba4\u4e3a 0.25rem \u7684\u500d\u6570\uff09\uff0c\u7c7b\u540d\u5982 m-4<\/code>\uff08\u5916\u8fb9\u8ddd 1rem\uff09\u3001p-2<\/code>\uff08\u5185\u8fb9\u8ddd 0.5rem\uff09\u3001mt-8<\/code>\uff08\u4e0a\u5916\u8fb9\u8ddd 2rem\uff09\u7b49\u3002\u8fd9\u79cd\u7cfb\u7edf\u5316\u7684\u95f4\u8ddd\u786e\u4fdd\u4e86\u89c6\u89c9\u4e0a\u7684\u548c\u8c10\u7edf\u4e00\u3002<\/p>\n\n\n\n
<div class="flex justify-between items-center p-6">\n  <div class="w-1\/2 p-4">\u5de6\u4fa7\u5185\u5bb9<\/div>\n  <div class="w-1\/2 p-4">\u53f3\u4fa7\u5185\u5bb9<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u6837\u5f0f\u4e0e\u6548\u679c<\/h3>\n\n\n\n
\u989c\u8272\u3001\u80cc\u666f\u3001\u8fb9\u6846\u3001\u5706\u89d2\u3001\u9634\u5f71\u7b49\u6837\u5f0f\u7c7b\u975e\u5e38\u4e30\u5bcc\u3002\u989c\u8272\u7c7b\u901a\u5e38\u9075\u5faa {\u5c5e\u6027}-{\u989c\u8272}-{\u6df1\u6d45}<\/code> \u7684\u683c\u5f0f\uff0c\u4f8b\u5982 text-gray-800<\/code>\u3001bg-blue-500<\/code>\u3001border-red-300<\/code>\u3002\u5706\u89d2\u7c7b\u5982 rounded<\/code>\u3001rounded-lg<\/code>\u3001rounded-full<\/code>\u3002\u9634\u5f71\u7c7b\u5982 shadow<\/code>\u3001shadow-md<\/code>\u3001shadow-xl<\/code>\u3002\u8fd9\u4e9b\u7c7b\u4f7f\u5f97\u6dfb\u52a0\u89c6\u89c9\u6837\u5f0f\u53d8\u5f97\u6781\u5176\u5feb\u901f\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
\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u901a\u8fc7\u6dfb\u52a0\u524d\u7f00\u5b9e\u73b0\uff0c\u4f8b\u5982 md:text-center<\/code>\u3001lg:flex<\/code>\u3002\u60ac\u505c\u3001\u7126\u70b9\u7b49\u72b6\u6001\u5219\u901a\u8fc7 hover:<\/code>\u3001focus:<\/code> \u7b49\u53d8\u4f53\u524d\u7f00\u63a7\u5236\uff0c\u4f8b\u5982 hover:bg-gray-100<\/code>\u3001focus:ring-2 focus:ring-blue-500<\/code>\u3002<\/p>\n\n\n\n
\u4ece\u7ec4\u4ef6\u6784\u5efa\u5230\u5b9e\u6218\u9879\u76ee<\/h2>\n\n\n\n
\u638c\u63e1\u4e86\u57fa\u7840\u7c7b\u4e4b\u540e\uff0c\u4e0b\u4e00\u6b65\u662f\u5b66\u4e60\u5982\u4f55\u9ad8\u6548\u5730\u7ec4\u5408\u5b83\u4eec\u6765\u6784\u5efa\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\u548c\u5b8c\u6574\u7684\u9875\u9762\u3002<\/p>\n\n\n\n
\u63d0\u53d6\u7ec4\u4ef6\u4e0e\u4f7f\u7528 @apply<\/h3>\n\n\n\n
\u867d\u7136\u9f13\u52b1\u5728 HTML \u4e2d\u76f4\u63a5\u7ec4\u5408\u7c7b\uff0c\u4f46\u5f53\u4e00\u7ec4\u7c7b\u5728\u9879\u76ee\u4e2d\u91cd\u590d\u51fa\u73b0\u65f6\uff0c\u4e3a\u4e86\u4fdd\u6301 DRY\uff08\u4e0d\u8981\u91cd\u590d\u81ea\u5df1\uff09\u539f\u5219\uff0c\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u63d0\u53d6\u7ec4\u4ef6\u7c7b\u3002<\/p>\n\n\n\n
\/* \u5728\u4f60\u7684 CSS \u6587\u4ef6\u4e2d *\/\n.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
\u7136\u540e\uff0c\u5728 HTML \u4e2d\u53ea\u9700\u4f7f\u7528 class=\"btn-primary\"<\/code> \u5373\u53ef\u3002\u8bf7\u6ce8\u610f\uff0c\u8fc7\u5ea6\u4f7f\u7528 @apply<\/code> \u53ef\u80fd\u4f1a\u9000\u5316\u4e3a\u7f16\u5199\u4f20\u7edf CSS\uff0c\u56e0\u6b64\u5efa\u8bae\u8c28\u614e\u4f7f\u7528\uff0c\u4ec5\u7528\u4e8e\u771f\u6b63\u9ad8\u5ea6\u91cd\u590d\u7684\u6837\u5f0f\u6a21\u5f0f\u3002<\/p>\n\n\n\n
\u6784\u5efa\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f<\/h3>\n\n\n\n
\u8ba9\u6211\u4eec\u6784\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\u4f5c\u4e3a\u5b9e\u6218\u793a\u4f8b\u3002\u8fd9\u4e2a\u5bfc\u822a\u680f\u5728\u5927\u5c4f\u5e55\u4e0a\u6c34\u5e73\u663e\u793a\uff0c\u5728\u5c0f\u5c4f\u5e55\u4e0a\u6298\u53e0\u6210\u4e00\u4e2a\u6c49\u5821\u83dc\u5355\uff08\u8fd9\u91cc\u4ec5\u5c55\u793a\u5927\u5c4f\u5e03\u5c40\u903b\u8f91\uff09\u3002<\/p>\n\n\n\n
<nav class="bg-gray-800 shadow-lg">\n  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">\n    <div class="flex items-center justify-between h-16">\n      <div class="flex items-center">\n        <span class="text-white font-bold text-xl">\u6211\u7684\u54c1\u724c<\/span>\n      <\/div>\n      <div class="hidden md:block">\n        <div class="ml-10 flex items-baseline space-x-4">\n          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">\u9996\u9875<\/a>\n          <a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">\u5173\u4e8e\u6211\u4eec<\/a>\n          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">\u670d\u52a1<\/a>\n          <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">\u8054\u7cfb<\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/nav><\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u4f8b\u5b50\u4f7f\u7528\u4e86\u80cc\u666f\u8272\u3001\u6700\u5927\u5bbd\u5ea6\u5bb9\u5668\u3001Flexbox \u5e03\u5c40\u3001\u54cd\u5e94\u5f0f\u663e\u793a\u63a7\u5236\uff08hidden md:block<\/code>\uff09\u3001\u95f4\u8ddd\u548c\u60ac\u505c\u72b6\u6001\u7b49\u591a\u79cd\u5b9e\u7528\u5de5\u5177\u7c7b\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
\u4e0e\u524d\u7aef\u6846\u67b6\u96c6\u6210<\/h3>\n\n\n\n
Tailwind CSS \u4e0e React\u3001Vue\u3001Angular \u7b49\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u65e0\u7f1d\u96c6\u6210\u3002\u5728 React \u4e2d\uff0c\u4f60\u53ef\u4ee5\u76f4\u63a5\u5c06\u7c7b\u540d\u5199\u5728 JSX \u7684 className<\/code> \u5c5e\u6027\u4e2d\u3002\u4e3a\u4e86\u5904\u7406\u7c7b\u540d\u7684\u6761\u4ef6\u8fde\u63a5\uff0c\u53ef\u4ee5\u4f7f\u7528\u50cf clsx<\/code> \u6216 classnames<\/code> \u8fd9\u6837\u7684\u5de5\u5177\u5e93\u3002<\/p>\n\n\n\n
\/\/ React \u7ec4\u4ef6\u793a\u4f8b\nfunction Button({ children, primary }) {\n  const className = clsx(\n    'py-2 px-4 font-semibold rounded-lg shadow-md focus:outline-none focus:ring-2',\n    primary\n      ? 'bg-blue-500 text-white hover:bg-blue-700 focus:ring-blue-400'\n      : 'bg-gray-200 text-gray-800 hover:bg-gray-300 focus:ring-gray-400'\n  );\n  return <button className={className}>{children}<\/button>;\n}<\/code><\/pre>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS \u901a\u8fc7\u5176\u529f\u80fd\u4f18\u5148\u3001\u539f\u5b50\u5316\u7c7b\u7684\u8303\u5f0f\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u5f00\u53d1\u8005\u7f16\u5199 CSS \u7684\u65b9\u5f0f\u3002\u5b83\u901a\u8fc7\u63d0\u4f9b\u4e00\u5957\u9ad8\u5ea6\u53ef\u5b9a\u5236\u3001\u8bbe\u8ba1\u7cfb\u7edf\u9a71\u52a8\u7684\u5b9e\u7528\u5de5\u5177\u7c7b\uff0c\u6781\u5927\u5730\u63d0\u5347\u4e86 UI \u5f00\u53d1\u7684\u6548\u7387\u548c\u4e00\u81f4\u6027\u3002\u4ece\u73af\u5883\u914d\u7f6e\u3001\u6838\u5fc3\u7c7b\u7684\u5b66\u4e60\uff0c\u5230\u7ec4\u4ef6\u63d0\u53d6\u548c\u4e0e\u6846\u67b6\u7684\u96c6\u6210\uff0c\u638c\u63e1 Tailwind \u610f\u5473\u7740\u4f60\u62e5\u6709\u4e86\u4e00\u4e2a\u5f3a\u5927\u800c\u7075\u6d3b\u7684\u5de5\u5177\uff0c\u80fd\u591f\u5feb\u901f\u5b9e\u73b0\u4ece\u8bbe\u8ba1\u7a3f\u5230\u751f\u4ea7\u4ee3\u7801\u7684\u8f6c\u6362\u3002\u5176\u5021\u5bfc\u7684\u201c\u7ea6\u675f\u6027\u81ea\u7531\u201d\u786e\u4fdd\u4e86\u9879\u76ee\u5728\u5feb\u901f\u8fed\u4ee3\u4e2d\u4f9d\u7136\u80fd\u4fdd\u6301\u4ee3\u7801\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u8bbe\u8ba1\u7684\u7edf\u4e00\u6027\u3002\u968f\u7740\u793e\u533a\u7684\u4e0d\u65ad\u58ee\u5927\u548c\u63d2\u4ef6\u7684\u4e30\u5bcc\uff0cTailwind CSS \u5df2\u6210\u4e3a\u73b0\u4ee3 Web \u5f00\u53d1\u4e2d\u4e0d\u53ef\u6216\u7f3a\u7684\u6280\u672f\u6808\u4e4b\u4e00\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
\u662f\u7684\uff0c\u76f4\u63a5\u5728 HTML \u4e2d\u7f16\u5199\u5927\u91cf\u7c7b\u540d\u786e\u5b9e\u4f1a\u4f7f HTML \u6807\u7b7e\u770b\u8d77\u6765\u66f4\u201c\u81c3\u80bf\u201d\u3002\u7136\u800c\uff0c\u8fd9\u662f\u4e00\u79cd\u6743\u8861\u3002\u5b83\u5c06\u6837\u5f0f\u903b\u8f91\u4ece CSS \u6587\u4ef6\u8f6c\u79fb\u5230\u4e86\u6807\u8bb0\u4e2d\uff0c\u4f7f\u5f97\u5728\u67e5\u770b HTML \u65f6\u5c31\u80fd\u6e05\u6670\u5730\u77e5\u9053\u5143\u7d20\u7684\u6837\u5f0f\uff0c\u800c\u65e0\u9700\u5728\u591a\u4e2a\u6587\u4ef6\u95f4\u8df3\u8f6c\u3002\u5bf9\u4e8e\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\uff0c\u7531\u4e8e\u4f7f\u7528\u4e86 PurgeCSS\uff08\u73b0\u4e3a JIT \u5f15\u64ce\u5185\u7f6e\u7684\u6811\u6447\u529f\u80fd\uff09\uff0c\u53ea\u6709\u5b9e\u9645\u4f7f\u7528\u5230\u7684\u7c7b\u4f1a\u88ab\u5305\u542b\uff0c\u56e0\u6b64\u6700\u7ec8\u7684 CSS \u4f53\u79ef\u901a\u5e38\u6bd4\u624b\u5199\u6216\u4f7f\u7528\u5927\u578b\u7ec4\u4ef6\u5e93\u7684 CSS \u8981\u5c0f\u5f97\u591a\u3002<\/p>\n\n\n\n
\u5982\u4f55\u8986\u76d6\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u7684 Tailwind \u6837\u5f0f\uff1f<\/h3>\n\n\n\n
\u5f53\u4f7f\u7528\u5e94\u7528\u4e86 Tailwind \u7c7b\u7684\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\u65f6\uff0c\u5982\u679c\u9700\u8981\u8986\u76d6\u5176\u6837\u5f0f\uff0c\u6709\u51e0\u79cd\u7b56\u7565\u3002\u9996\u5148\uff0c\u5c1d\u8bd5\u4f7f\u7528\u66f4\u5177\u4f53\u7684 Tailwind \u7c7b\u6216\u901a\u8fc7\u7ec4\u4ef6\u7684 props\/API \u8fdb\u884c\u5b9a\u5236\u3002\u5982\u679c\u4e0d\u884c\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u589e\u52a0 CSS \u7279\u5f02\u6027\u7684\u65b9\u5f0f\u6765\u8986\u76d6\uff0c\u4f8b\u5982\u5728\u81ea\u5b9a\u4e49 CSS \u4e2d\u4f7f\u7528 @apply<\/code> \u5e76\u5305\u88c5\u5728\u66f4\u5177\u4f53\u7684\u9009\u62e9\u5668\u4e2d\uff0c\u6216\u8005\u76f4\u63a5\u7f16\u5199\u81ea\u5b9a\u4e49 CSS \u89c4\u5219\u3002\u5728 Tailwind \u914d\u7f6e\u4e2d\u63d0\u9ad8\u67d0\u4e9b\u5b9e\u7528\u5de5\u5177\u7684\u53d8\u4f53\u987a\u5e8f\uff08\u5982\u901a\u8fc7 safelist<\/code> \u6216\u4fee\u6539\u63d2\u4ef6\u987a\u5e8f\uff09\u4e5f\u662f\u4e00\u79cd\u65b9\u6cd5\uff0c\u4f46\u4e0d\u63a8\u8350\u9891\u7e41\u4f7f\u7528\u3002<\/p>\n\n\n\n
Tailwind \u7684 JIT \u6a21\u5f0f\u662f\u4ec0\u4e48\uff1f<\/h3>\n\n\n\n
JIT\uff08Just-In-Time\uff09\u6a21\u5f0f\u662f Tailwind CSS \u5728 2026 \u5e74\u4e4b\u524d\u7248\u672c\u4e2d\u5f15\u5165\u7684\u4e00\u4e2a\u9769\u547d\u6027\u7279\u6027\uff0c\u73b0\u5728\u5df2\u6210\u4e3a\u9ed8\u8ba4\u5f15\u64ce\u3002\u5728\u4f20\u7edf\u7684 Tailwind \u4e2d\uff0c\u4f1a\u9996\u5148\u751f\u6210\u6240\u6709\u53ef\u80fd\u7684\u7c7b\uff0c\u7136\u540e\u901a\u8fc7 PurgeCSS \u5254\u9664\u672a\u4f7f\u7528\u7684\u3002\u800c JIT \u6a21\u5f0f\u4f1a\u5728\u4f60\u7f16\u5199\u4ee3\u7801\u65f6\uff0c\u6309\u9700\u52a8\u6001\u751f\u6210\u4f60\u7528\u5230\u7684 CSS\u3002\u8fd9\u610f\u5473\u7740\u5f00\u53d1\u4f53\u9a8c\u6781\u5feb\uff0c\u652f\u6301\u4efb\u610f\u53d8\u4f53\u7ec4\u5408\uff08\u5982 md:dark:hover:bg-blue-500<\/code>\uff09\uff0c\u5e76\u4e14\u53ef\u4ee5\u8f7b\u677e\u751f\u6210\u4efb\u610f\u503c\uff08\u5982 p-[13px]<\/code>\u3001bg-[#1da1f2]<\/code>\uff09\uff0c\u6781\u5927\u5730\u589e\u5f3a\u4e86\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n
\u5728\u56e2\u961f\u9879\u76ee\u4e2d\u5982\u4f55\u4fdd\u8bc1 Tailwind \u4f7f\u7528\u7684\u4e00\u81f4\u6027\uff1f<\/h3>\n\n\n\n
\u4e3a\u4e86\u4fdd\u8bc1\u4e00\u81f4\u6027\uff0c\u9996\u5148\u5e94\u5145\u5206\u5229\u7528 tailwind.config.js<\/code> \u6587\u4ef6\u6765\u5b9a\u4e49\u9879\u76ee\u4e13\u5c5e\u7684\u8bbe\u8ba1\u4ee4\u724c\uff08\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u7b49\uff09\uff0c\u6240\u6709\u5f00\u53d1\u8005\u90fd\u5e94\u57fa\u4e8e\u6b64\u914d\u7f6e\u8fdb\u884c\u5f00\u53d1\u3002\u5176\u6b21\uff0c\u53ef\u4ee5\u4f7f\u7528 ESLint \u63d2\u4ef6\uff0c\u5982 eslint-plugin-tailwindcss<\/code>\uff0c\u6765\u5f3a\u5236\u6267\u884c\u7c7b\u540d\u7684\u6700\u4f73\u5b9e\u8df5\u548c\u6392\u5e8f\u89c4\u5219\u3002\u6b64\u5916\uff0c\u5efa\u7acb\u56e2\u961f\u5185\u7684\u4ee3\u7801\u5ba1\u67e5\u6d41\u7a0b\uff0c\u5173\u6ce8\u6837\u5f0f\u7684\u5b9e\u73b0\u65b9\u5f0f\uff0c\u5e76\u9f13\u52b1\u63d0\u53d6\u9ad8\u5ea6\u91cd\u590d\u7684\u6837\u5f0f\u6a21\u5f0f\u4e3a\u7ec4\u4ef6\u6216\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\uff0c\u90fd\u6709\u52a9\u4e8e\u7ef4\u62a4\u4ee3\u7801\u5e93\u7684\u4e00\u81f4\u6027\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel ini secara sistematis memperkenalkan Tailwind CSS, sebuah kerangka kerja CSS berbasis kelas (toolkit) yang praktis dan mengutamakan fungsionalitas. Isinya mencakup filosofi desain inti Tailwind CSS, cara membangun lingkungan pengembangan (development environment) dan melakukan konfigurasi dasar, serta penggunaan kelas-kelas praktis yang tersedia di dalamnya. Tujuannya adalah untuk membantu para pengembang memulai dari dasar hingga menguasai keterampilan dalam pengembangan proyek nyata.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"knowledge_category":[281],"class_list":["post-12379958","knowledge_post","type-knowledge_post","status-publish","hentry","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, CSS\u6846\u67b6, \u5b9e\u7528\u5de5\u5177\u7c7b, \u524d\u7aef\u5f00\u53d1, \u9879\u76ee\u5b9e\u6218, \u4ece\u5165\u95e8\u5230\u7cbe\u901a, \u73af\u5883\u914d\u7f6e\u6307\u5357"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12379958","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\/12379958\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/media?parent=12379958"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/tags?post=12379958"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_category?post=12379958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}