{"id":12376516,"date":"2026-03-18T19:04:47","date_gmt":"2026-03-18T11:04:47","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e5%85%a5%e9%97%a8%e6%8c%87%e5%8d%97%ef%bc%9a%e4%bb%8e%e9%9b%b6%e5%bc%80%e5%a7%8b%e6%9e%84%e5%bb%ba%e7%8e%b0%e4%bb%a3%e5%8c%96%e5%93%8d%e5%ba%94%e5%bc%8f-ui\/"},"modified":"2026-03-18T19:10:23","modified_gmt":"2026-03-18T11:10:23","slug":"tailwind-css-beginner-guide-build-modern-responsive-ui","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/id\/knowledge\/website-building\/tailwind-css-beginner-guide-build-modern-responsive-ui\/","title":{"rendered":"Panduan Pengenalan Tailwind CSS: Membangun Antarmuka Pengguna (UI) yang Modern dan Responsif dari Nol"},"content":{"rendered":"\n

\u5728\u5f53\u4eca\u5feb\u901f\u8fed\u4ee3\u7684\u524d\u7aef\u5f00\u53d1\u9886\u57df\uff0c\u8ffd\u6c42\u9ad8\u6548\u3001\u4e00\u81f4\u4e14\u6613\u4e8e\u7ef4\u62a4\u7684\u6837\u5f0f\u65b9\u6848\u662f\u6bcf\u4f4d\u5f00\u53d1\u8005\u7684\u76ee\u6807\u3002\u4f20\u7edf\u7684 CSS \u7f16\u5199\u65b9\u5f0f\u5f80\u5f80\u4f34\u968f\u7740\u547d\u540d\u51b2\u7a81\u3001\u6837\u5f0f\u81c3\u80bf\u548c\u4e0a\u4e0b\u6587\u5207\u6362\u7684\u70e6\u607c\u3002\u800c\u5b9e\u7528\u4f18\u5148\u7684 CSS \u6846\u67b6 Tailwind CSS<\/code> \u6b63\u662f\u4e3a\u89e3\u51b3\u8fd9\u4e9b\u95ee\u9898\u800c\u751f\u3002\u5b83\u4e0d\u63d0\u4f9b\u9884\u5148\u8bbe\u8ba1\u597d\u7684 UI \u7ec4\u4ef6\uff08\u5982\u6309\u94ae\u3001\u5361\u7247\uff09\uff0c\u800c\u662f\u63d0\u4f9b\u4e86\u4e00\u6574\u5957\u4f4e\u7ea7\u522b\u7684\u5b9e\u7528\u7c7b\uff08Utility Classes\uff09\uff0c\u8ba9\u4f60\u80fd\u591f\u901a\u8fc7\u76f4\u63a5\u5728 HTML \u4e2d\u7ec4\u5408\u8fd9\u4e9b\u7c7b\u6765\u5feb\u901f\u6784\u5efa\u4efb\u4f55\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u3002<\/p>\n\n\n\n

\u5176\u6838\u5fc3\u7406\u5ff5\u662f\u201c\u7ea6\u675f\u5373\u81ea\u7531\u201d\u3002\u901a\u8fc7\u4e00\u5957\u7cbe\u5fc3\u8bbe\u8ba1\u7684\u8bbe\u8ba1\u7cfb\u7edf\uff08\u5982\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u5927\u5c0f\u3001\u65ad\u70b9\uff09\uff0cTailwind CSS<\/code> \u786e\u4fdd\u4e86\u9879\u76ee\u6837\u5f0f\u7684\u89c6\u89c9\u4e00\u81f4\u6027\uff0c\u540c\u65f6\u8d4b\u4e88\u4e86\u5f00\u53d1\u8005\u51e0\u4e4e\u65e0\u9650\u7684\u5b9a\u5236\u80fd\u529b\u3002\u4f60\u4e0d\u518d\u9700\u8981\u4e3a\u60f3\u4e00\u4e2a\u7c7b\u540d\u800c\u7ede\u5c3d\u8111\u6c41\uff0c\u4e5f\u4e0d\u518d\u9700\u8981\u5728 CSS \u6587\u4ef6\u548c HTML \u6587\u4ef6\u4e4b\u95f4\u9891\u7e41\u5207\u6362\u3002\u8fd9\u79cd\u5f00\u53d1\u6a21\u5f0f\u6781\u5927\u5730\u63d0\u5347\u4e86\u539f\u578b\u8bbe\u8ba1\u548c\u6784\u5efa\u590d\u6742\u54cd\u5e94\u5f0f\u754c\u9762\u7684\u901f\u5ea6\u3002<\/p>\n\n\n\n

Tailwind CSS \u7684\u6838\u5fc3\u6982\u5ff5<\/h2>\n\n\n\n

\u8981\u9ad8\u6548\u4f7f\u7528 Tailwind CSS<\/code>\uff0c\u9996\u5148\u9700\u8981\u7406\u89e3\u5176\u51e0\u4e2a\u6838\u5fc3\u7684\u6784\u5efa\u6a21\u5757\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb Tailwind CSS \u5b8c\u6574\u5165\u95e8\u6307\u5357\uff1a\u4ece\u57fa\u7840\u6982\u5ff5\u5230\u5b9e\u6218\u9879\u76ee\u5f00\u53d1<\/a>\u3002<\/p>\n\n\n\n\n

\u5b9e\u7528\u7c7b\u9a71\u52a8\u7684\u6837\u5f0f<\/h3>\n\n\n\n

Tailwind CSS<\/code> \u7684\u6240\u6709\u529f\u80fd\u90fd\u901a\u8fc7\u5b9e\u7528\u7c7b\u5b9e\u73b0\u3002\u6bcf\u4e00\u4e2a\u7c7b\u90fd\u5bf9\u5e94\u4e00\u4e2a\u5355\u4e00\u7684 CSS \u5c5e\u6027\u3002\u4f8b\u5982\uff0c.text-center<\/code> \u5bf9\u5e94 text-align: center;<\/code>\uff0c.bg-blue-500<\/code> \u5bf9\u5e94 background-color: #3b82f6;<\/code>\uff0c.mt-4<\/code> \u5bf9\u5e94 margin-top: 1rem;<\/code>\u3002\u901a\u8fc7\u5c06\u8fd9\u4e9b\u539f\u5b50\u5316\u7684\u7c7b\u7ec4\u5408\u5728\u4e00\u8d77\uff0c\u4f60\u5c31\u80fd\u6784\u5efa\u51fa\u590d\u6742\u7684\u7ec4\u4ef6\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
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">\n  \u70b9\u51fb\u6211\n<\/button><\/code><\/pre>\n\n\n\n
\u8fd9\u6bb5\u4ee3\u7801\u76f4\u63a5\u5b9a\u4e49\u4e86\u4e00\u4e2a\u5177\u6709\u84dd\u8272\u80cc\u666f\u3001\u767d\u8272\u6587\u5b57\u3001\u5185\u8fb9\u8ddd\u3001\u5706\u89d2\uff0c\u5e76\u4e14\u9f20\u6807\u60ac\u505c\u65f6\u80cc\u666f\u8272\u4f1a\u52a0\u6df1\u7684\u6309\u94ae\u3002\u6240\u6709\u6837\u5f0f\u90fd\u6e05\u6670\u5730\u5448\u73b0\u5728 HTML \u4e2d\u3002<\/p>\n\n\n\n
\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h3>\n\n\n\n
\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u662f Tailwind CSS<\/code> \u7684\u5185\u7f6e\u4e00\u7b49\u516c\u6c11\u3002\u5b83\u4f7f\u7528\u79fb\u52a8\u4f18\u5148\u7684\u65ad\u70b9\u7cfb\u7edf\u3002\u9ed8\u8ba4\u7684\u65ad\u70b9\u524d\u7f00\u5982 sm:<\/code>\u3001md:<\/code>\u3001lg:<\/code>\u3001xl:<\/code>\u30012xl:<\/code> \u5141\u8bb8\u4f60\u8f7b\u677e\u5730\u4e3a\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u5e94\u7528\u6837\u5f0f\u3002<\/p>\n\n\n\n
<div class="text-base md:text-lg xl:text-xl">\n  \u8fd9\u6bb5\u6587\u5b57\u5728\u624b\u673a\u4e0a\u4f7f\u7528\u57fa\u7840\u5927\u5c0f\uff0c\u5728\u4e2d\u7b49\u5c4f\u5e55\u4e0a\u53d8\u5927\uff0c\u5728\u5927\u5c4f\u5e55\u4e0a\u53d8\u5f97\u66f4\u5927\u3002\n<\/div><\/code><\/pre>\n\n\n\n
\u72b6\u6001\u53d8\u4f53<\/h3>\n\n\n\n
\u9664\u4e86\u54cd\u5e94\u5f0f\uff0cTailwind CSS<\/code> \u8fd8\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u72b6\u6001\u53d8\u4f53\u524d\u7f00\uff0c\u7528\u4e8e\u5904\u7406\u4ea4\u4e92\u72b6\u6001\u3002\u4f8b\u5982\uff0chover:<\/code>\u3001focus:<\/code>\u3001active:<\/code>\u3001disabled:<\/code> \u7b49\uff0c\u8ba9\u4f60\u80fd\u591f\u8f7b\u677e\u5730\u5b9a\u4e49\u5143\u7d20\u5728\u4e0d\u540c\u72b6\u6001\u4e0b\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
<button class="bg-gray-300 hover:bg-gray-400 focus:ring-2 focus:ring-blue-500">\n  \u4ea4\u4e92\u6309\u94ae\n<\/button><\/code><\/pre>\n\n\n\n
\u5982\u4f55\u5f00\u59cb\u4e00\u4e2a Tailwind CSS \u9879\u76ee<\/h2>\n\n\n\n
\u5f00\u59cb\u4f7f\u7528 Tailwind CSS<\/code> \u6709\u591a\u79cd\u65b9\u5f0f\uff0c\u6700\u63a8\u8350\u7684\u662f\u901a\u8fc7\u5176\u547d\u4ee4\u884c\u5de5\u5177 (CLI) \u6216\u4e0e\u6784\u5efa\u5de5\u5177\u96c6\u6210\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u638c\u63e1 Tailwind CSS \u6846\u67b6\uff1a\u4ece\u57fa\u7840\u5165\u95e8\u5230\u6838\u5fc3\u5de5\u5177\u51fd\u6570\u5b9e\u6218\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
\u4f7f\u7528 PostCSS \u8fdb\u884c\u96c6\u6210\uff08\u63a8\u8350\uff09<\/h3>\n\n\n\n
\u5bf9\u4e8e\u5927\u591a\u6570\u73b0\u4ee3\u524d\u7aef\u9879\u76ee\uff08\u5982\u4f7f\u7528 Vite\u3001Next.js\u3001Vue CLI \u6216 Create React App \u521b\u5efa\u7684\u9879\u76ee\uff09\uff0c\u901a\u8fc7 PostCSS \u96c6\u6210\u662f\u6700\u4f73\u5b9e\u8df5\u3002\u9996\u5148\uff0c\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5\u5fc5\u8981\u7684\u5305\u3002<\/p>\n\n\n\n
npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p<\/code><\/pre>\n\n\n\n
\u8fd9\u5c06\u521b\u5efa\u4e24\u4e2a\u914d\u7f6e\u6587\u4ef6\uff1atailwind.config.js<\/code> \u548c postcss.config.js<\/code>\u3002\u63a5\u4e0b\u6765\uff0c\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\uff08\u4f8b\u5982 src\/styles.css<\/code> \u6216 src\/index.css<\/code>\uff09\u4e2d\u5f15\u5165 Tailwind CSS<\/code> \u7684\u6307\u4ee4\u3002<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u73b0\u5728\uff0c\u4f60\u7684\u6784\u5efa\u5de5\u5177\uff08\u5982 Vite\uff09\u4f1a\u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\u5904\u7406\u8fd9\u4e9b\u6307\u4ee4\uff0c\u751f\u6210\u6700\u7ec8\u7684\u3001\u53ea\u5305\u542b\u4f60\u5b9e\u9645\u4f7f\u7528\u5230\u7684\u7c7b\u7684 CSS \u6587\u4ef6\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u79f0\u4e3a\u201c\u6447\u6811\u4f18\u5316\u201d\uff08Tree Shaking\uff09\uff0c\u80fd\u663e\u8457\u51cf\u5c0f\u4ea7\u7269\u4f53\u79ef\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
\u914d\u7f6e\u6587\u4ef6\u8be6\u89e3<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u662f Tailwind CSS<\/code> \u7684\u201c\u5927\u8111\u201d\u3002\u5728\u8fd9\u91cc\uff0c\u4f60\u53ef\u4ee5\u5b8c\u5168\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\u3002\u901a\u8fc7\u4fee\u6539 theme<\/code> \u90e8\u5206\uff0c\u4f60\u53ef\u4ee5\u8986\u76d6\u9ed8\u8ba4\u7684\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u3001\u65ad\u70b9\u7b49\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,jsx,ts,tsx,vue}"], \/\/ \u6307\u5b9a\u9700\u8981\u626b\u63cf\u7684\u6587\u4ef6\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
\u5173\u952e\u7684 content<\/code> \u914d\u7f6e\u7528\u4e8e\u544a\u8bc9 Tailwind CSS<\/code> \u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4e2d\u7684\u7c7b\u540d\uff0c\u4ee5\u4fbf\u5728\u751f\u4ea7\u6784\u5efa\u65f6\u4fdd\u7559\u8fd9\u4e9b\u6837\u5f0f\u3002\u52a1\u5fc5\u6839\u636e\u4f60\u7684\u9879\u76ee\u7ed3\u6784\u6b63\u786e\u914d\u7f6e\u6b64\u9879\u3002<\/p>\n\n\n\n
\u6784\u5efa\u5b9e\u9645\u7684 UI \u7ec4\u4ef6<\/h2>\n\n\n\n
\u7406\u89e3\u4e86\u57fa\u7840\u6982\u5ff5\u5e76\u642d\u5efa\u597d\u73af\u5883\u540e\uff0c\u8ba9\u6211\u4eec\u901a\u8fc7\u6784\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5361\u7247\u7ec4\u4ef6\u6765\u5b9e\u8df5\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u4e00\u6587\u638c\u63e1 Tailwind CSS \u6838\u5fc3\u6982\u5ff5\uff1a\u4ece\u5165\u95e8\u5230\u5b9e\u6218\u5e03\u5c40\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
\u4e00\u4e2a\u57fa\u7840\u5361\u7247\u7ec4\u4ef6<\/h3>\n\n\n\n
\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u5177\u6709\u5934\u50cf\u3001\u6807\u9898\u3001\u63cf\u8ff0\u548c\u64cd\u4f5c\u6309\u94ae\u7684\u5361\u7247\u3002<\/p>\n\n\n\n
<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white p-6">\n  <div class="flex items-center mb-4">\n    <img class="w-12 h-12 rounded-full mr-4" src="\/avatar.jpg" alt="\u7528\u6237\u5934\u50cf">\n    <div>\n      <h2 class="text-xl font-bold text-gray-900">\u5f20\u4e09<\/h2>\n      <p class="text-gray-600">\u524d\u7aef\u5de5\u7a0b\u5e08<\/p>\n    <\/div>\n  <\/div>\n  <p class="text-gray-700 mb-4">\n    \u8fd9\u662f\u4e00\u5f20\u4f7f\u7528 Tailwind CSS \u6784\u5efa\u7684\u5361\u7247\u7ec4\u4ef6\u793a\u4f8b\u3002\u5b83\u5c55\u793a\u4e86\u5982\u4f55\u5feb\u901f\u7ec4\u5408\u5b9e\u7528\u7c7b\u6765\u5b9e\u73b0\u4e00\u4e2a\u7f8e\u89c2\u7684 UI\u3002\n  <\/p>\n  <div class="flex justify-end space-x-2">\n    <button class="px-4 py-2 bg-gray-200 text-gray-800 rounded-lg hover:bg-gray-300 transition-colors">\n      \u53d6\u6d88\n    <\/button>\n    <button class="px-4 py-2 bg-brand-blue text-white rounded-lg hover:bg-blue-600 transition-colors">\n      \u786e\u8ba4\n    <\/button>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u4e86\u95f4\u8ddd\u7c7b\uff08p-6<\/code>, mb-4<\/code>, space-x-2<\/code>\uff09\u3001\u6392\u7248\u7c7b\uff08text-xl<\/code>, font-bold<\/code>\uff09\u3001\u989c\u8272\u7c7b\uff08text-gray-900<\/code>, bg-white<\/code>\uff09\u3001\u5e03\u5c40\u7c7b\uff08flex<\/code>, items-center<\/code>, justify-end<\/code>\uff09\u4ee5\u53ca\u6548\u679c\u7c7b\uff08shadow-lg<\/code>, rounded-xl<\/code>, transition-colors<\/code>\uff09\u3002\u6211\u4eec\u8fd8\u7528\u5230\u4e86\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u81ea\u5b9a\u4e49\u7684\u989c\u8272 bg-brand-blue<\/code>\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
\u63d0\u53d6\u7ec4\u4ef6\u4e0e\u4f7f\u7528 @apply<\/h3>\n\n\n\n
\u5f53\u4e00\u4e2a\u7ec4\u4ef6\u7684\u7c7b\u540d\u53d8\u5f97\u5f88\u957f\uff0c\u6216\u8005\u9700\u8981\u5728\u591a\u4e2a\u5730\u65b9\u91cd\u590d\u4f7f\u7528\u65f6\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5c06\u5e38\u7528\u7684\u5b9e\u7528\u7c7b\u63d0\u53d6\u5230\u81ea\u5b9a\u4e49\u7684 CSS \u7c7b\u4e2d\u3002<\/p>\n\n\n\n
\/* \u5728\u4f60\u7684 CSS \u6587\u4ef6\u4e2d *\/\n.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 transition-all;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u5728 HTML \u4e2d\u76f4\u63a5\u4f7f\u7528\u8fd9\u4e2a\u66f4\u7b80\u6d01\u7684\u7c7b\u540d\u3002<\/p>\n\n\n\n
<button class="btn-primary">\n  \u4e3b\u8981\u6309\u94ae\n<\/button><\/code><\/pre>\n\n\n\n
\u8bf7\u6ce8\u610f\uff0c\u8fc7\u5ea6\u4f7f\u7528 @apply<\/code> \u53ef\u80fd\u4f1a\u8ba9\u4f60\u56de\u5230\u7f16\u5199\u4f20\u7edf CSS \u7684\u8001\u8def\uff0c\u5931\u53bb\u90e8\u5206\u201c\u5728\u6807\u8bb0\u4e2d\u67e5\u770b\u6837\u5f0f\u201d\u7684\u76f4\u89c2\u4f18\u52bf\u3002\u5b83\u66f4\u9002\u5408\u7528\u4e8e\u63d0\u53d6\u771f\u6b63\u9ad8\u5ea6\u91cd\u590d\u7684\u6837\u5f0f\u6a21\u5f0f\u3002<\/p>\n\n\n\n
\u9ad8\u7ea7\u7279\u6027\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n\n\n\n
\u968f\u7740\u9879\u76ee\u89c4\u6a21\u589e\u957f\uff0c\u638c\u63e1\u4e00\u4e9b\u9ad8\u7ea7\u7279\u6027\u548c\u6700\u4f73\u5b9e\u8df5\u80fd\u8ba9\u4f60\u66f4\u597d\u5730\u9a7e\u9a6d Tailwind CSS<\/code>\u3002<\/p>\n\n\n\n
\u4f7f\u7528\u63d2\u4ef6\u6269\u5c55\u529f\u80fd<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u62e5\u6709\u4e00\u4e2a\u4e30\u5bcc\u7684\u63d2\u4ef6\u751f\u6001\u7cfb\u7edf\u3002\u4f8b\u5982\uff0c\u5b98\u65b9\u63d0\u4f9b\u7684 @tailwindcss\/forms<\/code> \u63d2\u4ef6\u4e3a\u8868\u5355\u5143\u7d20\u63d0\u4f9b\u4e86\u66f4\u597d\u7684\u9ed8\u8ba4\u6837\u5f0f\uff1b@tailwindcss\/typography<\/code> \u63d2\u4ef6\u5219\u53ef\u4ee5\u4e3a\u4f60\u6e32\u67d3\u7684 Markdown \u6216 HTML \u5185\u5bb9\u63d0\u4f9b\u6f02\u4eae\u7684\u6392\u7248\u6837\u5f0f\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7 npm \u5b89\u88c5\u5b83\u4eec\u5e76\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u5f15\u5165\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  \/\/ ...\n  plugins: [\n    require('@tailwindcss\/forms'),\n    require('@tailwindcss\/typography'),\n  ],\n}<\/code><\/pre>\n\n\n\n
\u6027\u80fd\u4f18\u5316\u4e0e\u751f\u4ea7\u6784\u5efa<\/h3>\n\n\n\n
\u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b\uff0cTailwind CSS<\/code> \u4f1a\u751f\u6210\u4e00\u4e2a\u5305\u542b\u6240\u6709\u7c7b\u7684\u5e9e\u5927\u6837\u5f0f\u8868\u3002\u4f46\u5728\u751f\u4ea7\u6784\u5efa\u65f6\uff0c\u52a1\u5fc5\u8981\u786e\u4fdd\u6784\u5efa\u6d41\u7a0b\u6b63\u786e\u914d\u7f6e\uff0c\u4ee5\u542f\u7528\u6447\u6811\u4f18\u5316\u3002\u8fd9\u5b8c\u5168\u4f9d\u8d56\u4e8e\u4f60\u7684 content<\/code> \u914d\u7f6e\u662f\u5426\u51c6\u786e\u6db5\u76d6\u4e86\u6240\u6709\u5305\u542b\u7c7b\u540d\u7684\u6e90\u6587\u4ef6\uff08\u6a21\u677f\u3001\u7ec4\u4ef6\u3001Markdown \u6587\u4ef6\u7b49\uff09\u3002\u6784\u5efa\u540e\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u53ea\u6709\u51e0 KB \u5230\u51e0\u5341 KB\u3002<\/p>\n\n\n\n
\u53e6\u4e00\u4e2a\u6700\u4f73\u5b9e\u8df5\u662f\uff0c\u4f18\u5148\u4f7f\u7528 Tailwind CSS<\/code> \u7684\u8bbe\u8ba1\u4ee4\u724c\uff08\u5982 text-gray-800<\/code>\uff09\uff0c\u800c\u4e0d\u662f\u4efb\u610f\u503c\uff08\u5982 text-[#333]<\/code>\uff09\uff0c\u8fd9\u80fd\u6700\u5927\u5316\u5730\u5229\u7528\u5176\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u4fdd\u6301\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n
\u4e0e JavaScript \u6846\u67b6\u7ed3\u5408<\/h3>\n\n\n\n
\u5728 React\u3001Vue \u6216 Svelte \u7b49\u7ec4\u4ef6\u6846\u67b6\u4e2d\uff0cTailwind CSS<\/code> \u7684\u8868\u73b0\u540c\u6837\u51fa\u8272\u3002\u4f60\u53ef\u4ee5\u5c06\u7c7b\u540d\u903b\u8f91\u4e0e\u7ec4\u4ef6\u72b6\u6001\u7ed3\u5408\u3002<\/p>\n\n\n\n
\/\/ React \u7ec4\u4ef6\u793a\u4f8b\nfunction Alert({ message, type }) {\n  const bgColor = type === 'error' ? 'bg-red-100' : 'bg-blue-100';\n  const textColor = type === 'error' ? 'text-red-800' : 'text-blue-800';\n  return (\n    <div className={`p-4 rounded ${bgColor} ${textColor}`}>\n      {message}\n    <\/div>\n  );\n}<\/code><\/pre>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u901a\u8fc7\u5176\u72ec\u7279\u7684\u5b9e\u7528\u4f18\u5148\u54f2\u5b66\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u5f00\u53d1\u8005\u7f16\u5199\u548c\u7ba1\u7406\u6837\u5f0f\u7684\u65b9\u5f0f\u3002\u5b83\u901a\u8fc7\u63d0\u4f9b\u4e00\u5957\u7ea6\u675f\u6027\u7684\u8bbe\u8ba1\u539f\u5b50\uff0c\u5728\u4fdd\u8bc1\u89c6\u89c9\u4e00\u81f4\u6027\u7684\u540c\u65f6\uff0c\u6781\u5927\u5730\u63d0\u5347\u4e86 UI \u5f00\u53d1\u7684\u6548\u7387\u548c\u7075\u6d3b\u6027\u3002\u4ece\u5feb\u901f\u539f\u578b\u5230\u5927\u578b\u751f\u4ea7\u5e94\u7528\uff0c\u5b83\u90fd\u80fd\u80dc\u4efb\u3002\u867d\u7136\u521d\u671f\u9700\u8981\u8bb0\u5fc6\u5927\u91cf\u7c7b\u540d\uff0c\u4f46\u4e00\u65e6\u719f\u6089\u5176\u547d\u540d\u89c4\u5f8b\uff0c\u5f00\u53d1\u4f53\u9a8c\u5c06\u53d8\u5f97\u975e\u5e38\u6d41\u7545\u3002\u62e5\u62b1 Tailwind CSS<\/code>\uff0c\u610f\u5473\u7740\u62e5\u62b1\u4e00\u79cd\u66f4\u73b0\u4ee3\u3001\u66f4\u9ad8\u6548\u7684\u524d\u7aef\u6837\u5f0f\u5f00\u53d1\u8303\u5f0f\u3002<\/p>\n\n\n\n
FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n
Tailwind CSS \u751f\u6210\u7684 CSS \u6587\u4ef6\u4f1a\u4e0d\u4f1a\u5f88\u5927\uff1f<\/h3>\n\n\n\n
\u4e0d\u4f1a\u3002\u8fd9\u6b63\u662f Tailwind CSS<\/code> \u7684\u6838\u5fc3\u4f18\u52bf\u4e4b\u4e00\u3002\u5728\u751f\u4ea7\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u5b83\u4f1a\u901a\u8fc7\u201c\u6447\u6811\u4f18\u5316\u201d\uff08PurgeCSS \u6280\u672f\uff09\u9759\u6001\u5206\u6790\u4f60\u7684\u9879\u76ee\u6587\u4ef6\uff08\u6839\u636e tailwind.config.js<\/code> \u4e2d content<\/code> \u7684\u914d\u7f6e\uff09\uff0c\u53ea\u4fdd\u7559\u4f60\u5b9e\u9645\u4f7f\u7528\u5230\u7684 CSS \u7c7b\uff0c\u5e76\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u975e\u5e38\u5c0f\uff0c\u751a\u81f3\u6bd4\u8bb8\u591a\u624b\u5199\u6216\u4f7f\u7528\u4f20\u7edf UI \u6846\u67b6\u7684 CSS \u66f4\u5c0f\u3002<\/p>\n\n\n\n
\u5728\u56e2\u961f\u9879\u76ee\u4e2d\uff0c\u5982\u4f55\u4fdd\u8bc1\u6837\u5f0f\u4e66\u5199\u7684\u4e00\u81f4\u6027\uff1f<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u672c\u8eab\u5c31\u662f\u4e00\u4e2a\u5f3a\u5927\u7684\u6837\u5f0f\u7ea6\u675f\u5de5\u5177\u3002\u5176\u5185\u7f6e\u7684\u8bbe\u8ba1\u7cfb\u7edf\uff08\u5982\u56fa\u5b9a\u7684\u989c\u8272\u76d8\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u65ad\u70b9\uff09\u5f3a\u5236\u56e2\u961f\u6210\u5458\u4f7f\u7528\u540c\u4e00\u5957\u8bbe\u8ba1\u4ee4\u724c\uff0c\u8fd9\u4ece\u6839\u672c\u4e0a\u4fdd\u8bc1\u4e86\u89c6\u89c9\u4e00\u81f4\u6027\u3002\u6b64\u5916\uff0c\u53ef\u4ee5\u7ed3\u5408\u4f7f\u7528\u7f16\u8f91\u5668\u7684\u667a\u80fd\u63d0\u793a\u63d2\u4ef6\uff08\u5982 Tailwind CSS IntelliSense\uff09\u548c\u4ee3\u7801\u683c\u5f0f\u5316\u5de5\u5177\uff08\u5982 Prettier \u7684 Tailwind CSS \u63d2\u4ef6\uff09\uff0c\u5b83\u4eec\u80fd\u81ea\u52a8\u5bf9\u7c7b\u540d\u8fdb\u884c\u6392\u5e8f\uff0c\u8fdb\u4e00\u6b65\u7edf\u4e00\u4ee3\u7801\u98ce\u683c\u3002<\/p>\n\n\n\n
\u662f\u5426\u9700\u8981\u4e3a\u6bcf\u4e2a\u5143\u7d20\u90fd\u5199\u4e00\u957f\u4e32\u7c7b\u540d\uff1f<\/h3>\n\n\n\n
\u4e0d\u4e00\u5b9a\u3002\u5bf9\u4e8e\u5728\u9879\u76ee\u4e2d\u9ad8\u5ea6\u91cd\u590d\u3001\u7ed3\u6784\u56fa\u5b9a\u7684 UI \u6a21\u5f0f\uff08\u4f8b\u5982\u7279\u5b9a\u98ce\u683c\u7684\u8868\u5355\u63a7\u4ef6\u3001\u5361\u7247\u3001\u5bfc\u822a\u680f\uff09\uff0c\u5efa\u8bae\u4f7f\u7528\u4ee5\u4e0b\u4e24\u79cd\u65b9\u5f0f\u4e4b\u4e00\u6765\u907f\u514d\u91cd\u590d\uff1a1. \u5728\u7ec4\u4ef6\u6846\u67b6\uff08\u5982 React\u3001Vue\uff09\u4e2d\u5c06\u5176\u62bd\u8c61\u4e3a\u4e00\u4e2a\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\uff1b2. \u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u63d0\u53d6\u51fa\u4e00\u4e2a\u590d\u5408\u7c7b\u3002\u5bf9\u4e8e\u4e00\u6b21\u6027\u6216\u7ed3\u6784\u7b80\u5355\u7684\u5143\u7d20\uff0c\u76f4\u63a5\u5728 HTML \u4e2d\u7ec4\u5408\u7c7b\u540d\u662f\u6700\u76f4\u63a5\u9ad8\u6548\u7684\u65b9\u5f0f\u3002<\/p>\n\n\n\n
\u5982\u4f55\u8986\u76d6\u6216\u81ea\u5b9a\u4e49 Tailwind \u7684\u9ed8\u8ba4\u4e3b\u9898\uff1f<\/h3>\n\n\n\n
\u81ea\u5b9a\u4e49\u4e3b\u9898\u4e3b\u8981\u901a\u8fc7\u4fee\u6539 tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\u4e2d\u7684 theme<\/code> \u90e8\u5206\u6765\u5b9e\u73b0\u3002\u4f60\u53ef\u4ee5\u5728 theme.extend<\/code> \u4e0b\u6dfb\u52a0\u65b0\u7684\u503c\uff08\u5982\u81ea\u5b9a\u4e49\u989c\u8272\u3001\u95f4\u8ddd\uff09\uff0c\u8fd9\u4e0d\u4f1a\u8986\u76d6\u539f\u6709\u503c\uff0c\u800c\u662f\u8fdb\u884c\u6269\u5c55\u3002\u5982\u679c\u4f60\u9700\u8981\u5b8c\u5168\u8986\u76d6\u67d0\u4e2a\u9ed8\u8ba4\u503c\uff08\u4f8b\u5982\u9ed8\u8ba4\u7684\u57fa\u7840\u5b57\u4f53\u5927\u5c0f\uff09\uff0c\u5219\u53ef\u4ee5\u76f4\u63a5\u5728 theme<\/code> \u4e0b\uff08\u800c\u4e0d\u662f extend<\/code> \u4e0b\uff09\u5b9a\u4e49\u8be5\u5c5e\u6027\u3002\u5b98\u65b9\u6587\u6863\u63d0\u4f9b\u4e86\u8be6\u5c3d\u7684\u4e3b\u9898\u5b9a\u5236\u6307\u5357\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel ini memperkenalkan framework CSS bernuansa praktis bernama Tailwind CSS. Framework ini membantu pengembang dengan menyediakan serangkaian kelas praktis tingkat rendah, sehingga mereka dapat dengan cepat membuat desain khusus langsung dalam kode HTML. Artikel tersebut menjelaskan konsep-konsep utamanya, seperti penggunaan kelas praktis untuk mengatur tata letak elemen, desain responsif, dan variasi tata letak berdasarkan kondisi tertentu (state variations). Selain itu, artikel ini juga memberikan petunjuk rinci tentang cara memulai proyek menggunakan Tailwind CSS melalui alat PostCSS, serta metode kustomisasi berbagai konfigurasi dalam framework tersebut.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,430,367,2301],"knowledge_category":[281],"class_list":["post-12376516","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-frontend-development","tag-responsive-design","tag-practical-guides","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u5b9e\u7528\u7c7b, \u524d\u7aef\u6846\u67b6, \u5165\u95e8\u6307\u5357, \u4ece\u96f6\u5f00\u59cb\u5b66Tailwind, \u73b0\u4ee3\u5316UI\u5f00\u53d1"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12376516","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\/12376516\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/media?parent=12376516"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/tags?post=12376516"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_category?post=12376516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}