{"id":12372981,"date":"2026-03-16T21:00:53","date_gmt":"2026-03-16T13:00:53","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e5%85%a5%e9%97%a8%e4%b8%8e%e5%ae%9e%e6%88%98%ef%bc%9a%e4%bb%8e%e9%9b%b6%e6%9e%84%e5%bb%ba%e7%8e%b0%e4%bb%a3%e5%8c%96%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bd%91%e9%a1%b5%e7%95%8c%e9%9d%a2\/"},"modified":"2026-03-16T21:13:42","modified_gmt":"2026-03-16T13:13:42","slug":"tailwind-css-tutorial-build-responsive-web-interfaces","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/id\/knowledge\/website-building\/tailwind-css-tutorial-build-responsive-web-interfaces\/","title":{"rendered":"Pengantar dan Penerapan Praktis Tailwind CSS: Membangun Antarmuka Web Responsif yang Modern dari Nol"},"content":{"rendered":"\n

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

Tailwind CSS \u662f\u4e00\u4e2a\u529f\u80fd\u4f18\u5148\u7684 CSS \u6846\u67b6\uff0c\u5b83\u901a\u8fc7\u63d0\u4f9b\u5927\u91cf\u4f4e\u7ea7\u7684\u5b9e\u7528\u7c7b\u6765\u5e2e\u52a9\u4f60\u5feb\u901f\u6784\u5efa\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u3002\u4e0e Bootstrap \u8fd9\u7c7b\u63d0\u4f9b\u9884\u7f6e\u7ec4\u4ef6\uff08\u5982\u6309\u94ae\u3001\u5361\u7247\uff09\u7684\u6846\u67b6\u4e0d\u540c\uff0cTailwind \u63d0\u4f9b\u7684\u662f\u6784\u5efa\u8fd9\u4e9b\u7ec4\u4ef6\u6240\u9700\u7684\u201c\u539f\u5b50\u7c7b\u201d\uff0c\u4f8b\u5982\u7528\u4e8e\u63a7\u5236\u5185\u8fb9\u8ddd\u7684 p-4<\/code>\u3001\u63a7\u5236\u6587\u672c\u989c\u8272\u7684 text-blue-500<\/code> \u548c\u63a7\u5236\u5f39\u6027\u76d2\u5b50\u5e03\u5c40\u7684 flex<\/code>\u3002\u8fd9\u79cd\u65b9\u6cd5\u7684\u6838\u5fc3\u7406\u5ff5\u662f\u5c06\u6837\u5f0f\u76f4\u63a5\u5199\u5728 HTML \u4e2d\uff0c\u4ece\u800c\u6781\u5927\u5730\u63d0\u9ad8\u4e86\u5f00\u53d1\u6548\u7387\uff0c\u5e76\u4fdd\u6301\u4e86\u8bbe\u8ba1\u7684\u9ad8\u5ea6\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n

\u5176\u6838\u5fc3\u5de5\u4f5c\u539f\u7406<\/h3>\n\n\n\n

Tailwind \u7684\u6838\u5fc3\u5f15\u64ce\u662f\u4e00\u4e2a\u7528 JavaScript\uff08Node.js\uff09\u7f16\u5199\u7684 PostCSS \u63d2\u4ef6\u3002\u5728\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u5b83\u4f1a\u626b\u63cf\u4f60\u7684\u9879\u76ee\u6587\u4ef6\uff0c\u5bfb\u627e\u6240\u6709\u4f7f\u7528\u5230\u7684\u5b9e\u7528\u7c7b\uff0c\u7136\u540e\u53ea\u5c06\u8fd9\u4e9b\u4f7f\u7528\u5230\u7684 CSS \u6837\u5f0f\u751f\u6210\u5230\u6700\u7ec8\u7684\u751f\u4ea7\u73af\u5883 CSS \u6587\u4ef6\u4e2d\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u79f0\u4e3a\u201c\u6447\u6811\u4f18\u5316\u201d\uff0c\u5b83\u80fd\u786e\u4fdd\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u4f53\u79ef\u5c3d\u53ef\u80fd\u5c0f\uff0c\u907f\u514d\u4e86\u4f20\u7edf CSS \u6846\u67b6\u9700\u8981\u5f15\u5165\u6574\u4e2a\u5e93\u7684\u5197\u4f59\u95ee\u9898\u3002\u4f60\u53ef\u4ee5\u5728 tailwind.config.js<\/code> \u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\u4e2d\u81ea\u5b9a\u4e49\u4e3b\u9898\u989c\u8272\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u65ad\u70b9\u7b49\u6240\u6709\u8bbe\u8ba1\u53c2\u6570\u3002<\/p>\n\n\n\n

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

\u5f00\u59cb\u4f7f\u7528 Tailwind CSS \u6709\u591a\u79cd\u65b9\u5f0f\uff0c\u6700\u63a8\u8350\u7684\u662f\u901a\u8fc7\u5176\u5b98\u65b9 CLI \u5de5\u5177\u6216\u4e0e\u524d\u7aef\u6784\u5efa\u5de5\u5177\u96c6\u6210\u3002\u4ee5\u4e0b\u662f\u901a\u8fc7 npm \u548c PostCSS \u96c6\u6210\u7684\u6807\u51c6\u6d41\u7a0b\uff0c\u8fd9\u80fd\u8ba9\u4f60\u5728\u9879\u76ee\u4e2d\u83b7\u5f97\u6700\u5b8c\u6574\u7684\u7279\u6027\u548c\u6700\u4f73\u7684\u6027\u80fd\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb Tailwind CSS \u7ec8\u6781\u5165\u95e8\u6307\u5357\uff1a\u4ece\u96f6\u5230\u4e00\u6784\u5efa\u73b0\u4ee3\u5316\u754c\u9762<\/a>\u3002<\/p>\n\n\n\n\n

\u9996\u5148\uff0c\u4f60\u9700\u8981\u521d\u59cb\u5316\u4e00\u4e2a\u9879\u76ee\u5e76\u901a\u8fc7 npm \u5b89\u88c5 Tailwind \u53ca\u5176\u4f9d\u8d56\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 init -y\nnpm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u4f60\u4f1a\u5f97\u5230\u4e00\u4e2a tailwind.config.js<\/code> \u6587\u4ef6\u3002\u4f60\u9700\u8981\u4fee\u6539\u8be5\u6587\u4ef6\u4e2d\u7684 content<\/code> \u5b57\u6bb5\uff0c\u4ee5\u6307\u5b9a Tailwind \u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u6765\u67e5\u627e\u4f7f\u7528\u7684\u7c7b\u540d\u3002\u8fd9\u901a\u5e38\u662f\u4f60\u7684 HTML \u6a21\u677f\u3001JavaScript \u7ec4\u4ef6\u6587\u4ef6\u7b49\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js}"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u63a5\u4e0b\u6765\uff0c\u521b\u5efa\u4e00\u4e2a\u4e3b CSS \u6587\u4ef6\uff08\u4f8b\u5982 src\/input.css<\/code>\uff09\uff0c\u5e76\u5f15\u5165 Tailwind \u7684\u6307\u4ee4\u3002<\/p>\n\n\n\n
\/* src\/input.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u6700\u540e\uff0c\u914d\u7f6e\u6784\u5efa\u8fc7\u7a0b\u3002\u5982\u679c\u4f60\u4f7f\u7528\u7684\u662f\u50cf Vite \u8fd9\u6837\u7684\u5de5\u5177\uff0c\u4f60\u9700\u8981\u786e\u4fdd PostCSS \u914d\u7f6e\u6b63\u786e\u3002\u521b\u5efa\u4e00\u4e2a postcss.config.js<\/code> \u6587\u4ef6\u3002<\/p>\n\n\n\n
\/\/ postcss.config.js\nmodule.exports = {\n  plugins: {\n    tailwindcss: {},\n    autoprefixer: {},\n  },\n}<\/code><\/pre>\n\n\n\n
\u73b0\u5728\uff0c\u8fd0\u884c\u6784\u5efa\u547d\u4ee4\uff08\u4f8b\u5982 npm run build<\/code>\uff0c\u5177\u4f53\u53d6\u51b3\u4e8e\u4f60\u7684\u811a\u672c\u914d\u7f6e\uff09\uff0cTailwind \u5c31\u4f1a\u5904\u7406\u4f60\u7684 CSS \u6587\u4ef6\uff0c\u751f\u6210\u6700\u7ec8\u7684\u6837\u5f0f\u3002\u7136\u540e\u4f60\u5c31\u53ef\u4ee5\u5728 HTML \u4e2d\u5f00\u59cb\u4f7f\u7528 Tailwind \u7684\u5b9e\u7528\u7c7b\u4e86\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u638c\u63e1Tailwind CSS\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a\u7684\u5b9e\u7528\u6307\u5357\u4e0e\u6700\u4f73\u5b9e\u8df5<\/a>\u3002<\/p>\n\n\n\n\n
\u6838\u5fc3\u5b9e\u7528\u7c7b\u4e0e\u54cd\u5e94\u5f0f\u8bbe\u8ba1<\/h2>\n\n\n\n
Tailwind \u7684\u5b9e\u7528\u7c7b\u8986\u76d6\u4e86 CSS \u7684\u65b9\u65b9\u9762\u9762\uff0c\u4ece\u5e03\u5c40\u3001\u95f4\u8ddd\u3001\u6392\u7248\u5230\u80cc\u666f\u3001\u8fb9\u6846\u548c\u7279\u6548\u3002\u5176\u8bbe\u8ba1\u7cfb\u7edf\u5177\u6709\u9ad8\u5ea6\u7684\u4e00\u81f4\u6027\uff0c\u4f8b\u5982\u95f4\u8ddd\u4f7f\u7528\u7edf\u4e00\u7684\u6bd4\u4f8b\uff08\u5982 0.25rem \u7684\u500d\u6570\uff09\uff0c\u989c\u8272\u6709\u9884\u5b9a\u4e49\u7684\u8c03\u8272\u677f\u3002<\/p>\n\n\n\n
\u5e03\u5c40\u4e0e\u95f4\u8ddd\u7c7b<\/h3>\n\n\n\n
\u5e03\u5c40\u7c7b\u5982 flex<\/code>, grid<\/code>, block<\/code>, inline-block<\/code> \u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u3002\u95f4\u8ddd\u901a\u8fc7 p-{size}<\/code>\uff08\u5185\u8fb9\u8ddd\uff09\u548c m-{size}<\/code>\uff08\u5916\u8fb9\u8ddd\uff09\u6765\u63a7\u5236\uff0c\u4f8b\u5982 p-4<\/code> \u8868\u793a 1rem \u7684\u5185\u8fb9\u8ddd\uff0cmt-2<\/code> \u8868\u793a 0.5rem \u7684\u4e0a\u5916\u8fb9\u8ddd\u3002<\/p>\n\n\n\n
<div class="flex p-4 space-x-4">\n  <div class="p-2 bg-gray-200">\u9879\u76ee\u4e00<\/div>\n  <div class="p-2 bg-gray-200">\u9879\u76ee\u4e8c<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u54cd\u5e94\u5f0f\u65ad\u70b9\u524d\u7f00<\/h3>\n\n\n\n
Tailwind \u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u662f\u5176\u5f3a\u5927\u529f\u80fd\u4e4b\u4e00\u3002\u5b83\u5185\u7f6e\u4e86\u4e94\u4e2a\u9ed8\u8ba4\u65ad\u70b9\uff1asm<\/code> (640px), md<\/code> (768px), lg<\/code> (1024px), xl<\/code> (1280px), 2xl<\/code> (1536px)\u3002\u901a\u8fc7\u5728\u5b9e\u7528\u7c7b\u524d\u6dfb\u52a0\u65ad\u70b9\u524d\u7f00\uff0c\u4f60\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u54cd\u5e94\u5f0f\u754c\u9762\u3002\u4f8b\u5982\uff0cmd:flex<\/code> \u8868\u793a\u5728\u4e2d\u7b49\u5c4f\u5e55\u53ca\u4ee5\u4e0a\u91c7\u7528\u5f39\u6027\u5e03\u5c40\uff0ctext-center lg:text-left<\/code> \u8868\u793a\u9ed8\u8ba4\u5c45\u4e2d\uff0c\u5728\u5927\u5c4f\u5e55\u4e0a\u5de6\u5bf9\u9f50\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="flex flex-col md:flex-row">\n  <div class="w-full md:w-1\/2 p-4">\u5de6\u4fa7\u5185\u5bb9<\/div>\n  <div class="w-full md:w-1\/2 p-4">\u53f3\u4fa7\u5185\u5bb9<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u5b9e\u6218\uff1a\u6784\u5efa\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f<\/h2>\n\n\n\n
\u8ba9\u6211\u4eec\u901a\u8fc7\u6784\u5efa\u4e00\u4e2a\u5e38\u89c1\u7684\u54cd\u5e94\u5f0f\u5bfc\u822a\u680f\u6765\u5c06\u6240\u5b66\u77e5\u8bc6\u878d\u4f1a\u8d2f\u901a\u3002\u8fd9\u4e2a\u5bfc\u822a\u680f\u5728\u5927\u5c4f\u5e55\u4e0a\u6c34\u5e73\u663e\u793a\uff0c\u5728\u5c0f\u5c4f\u5e55\u4e0a\u4f1a\u6298\u53e0\u6210\u4e00\u4e2a\u6c49\u5821\u83dc\u5355\u3002<\/p>\n\n\n\n
\u9996\u5148\uff0c\u6211\u4eec\u7f16\u5199\u5927\u5c4f\u5e55\u4e0b\u7684\u6c34\u5e73\u5bfc\u822a\u7ed3\u6784\u3002<\/p>\n\n\n\n
<nav class="bg-gray-800 p-4">\n  <div class="container mx-auto flex justify-between items-center">\n    <!-- \u54c1\u724c Logo -->\n    <a href="#" class="text-white text-xl font-bold">\u6211\u7684\u54c1\u724c<\/a>\n    <!-- \u684c\u9762\u7aef\u5bfc\u822a\u94fe\u63a5 -->\n    <div class="hidden md:flex space-x-4">\n      <a href="#" class="text-gray-300 hover:text-white">\u9996\u9875<\/a>\n      <a href="#" class="text-gray-300 hover:text-white">\u5173\u4e8e<\/a>\n      <a href="#" class="text-gray-300 hover:text-white">\u670d\u52a1<\/a>\n      <a href="#" class="text-gray-300 hover:text-white">\u8054\u7cfb<\/a>\n    <\/div>\n    <!-- \u79fb\u52a8\u7aef\u83dc\u5355\u6309\u94ae -->\n    <button id="menuBtn" class="md:hidden text-white">\n      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">...<\/svg>\n    <\/button>\n  <\/div>\n  <!-- \u79fb\u52a8\u7aef\u4e0b\u62c9\u83dc\u5355 -->\n  <div id="mobileMenu" class="md:hidden hidden mt-2">\n    <a href="#" class="block text-gray-300 hover:text-white py-2">\u9996\u9875<\/a>\n    <a href="#" class="block text-gray-300 hover:text-white py-2">\u5173\u4e8e<\/a>\n    <a href="#" class="block text-gray-300 hover:text-white py-2">\u670d\u52a1<\/a>\n    <a href="#" class="block text-gray-300 hover:text-white py-2">\u8054\u7cfb<\/a>\n  <\/div>\n<\/nav><\/code><\/pre>\n\n\n\n
\u6dfb\u52a0\u4ea4\u4e92\u529f\u80fd<\/h3>\n\n\n\n
\u4e0a\u8ff0 HTML \u7ed3\u6784\u901a\u8fc7 hidden<\/code> \u548c md:flex<\/code> \u7b49\u7c7b\u5b9e\u73b0\u4e86\u54cd\u5e94\u5f0f\u5e03\u5c40\u3002\u4e3a\u4e86\u5728\u79fb\u52a8\u7aef\u5207\u6362\u83dc\u5355\u7684\u663e\u793a\u4e0e\u9690\u85cf\uff0c\u6211\u4eec\u9700\u8981\u4e00\u70b9\u7b80\u5355\u7684 JavaScript\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS\u7ec8\u6781\u6307\u5357\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a\u7684\u5b9e\u6218\u6559\u7a0b<\/a>\u3002<\/p>\n\n\n\n\n
\/\/ \u7b80\u5355\u7684\u83dc\u5355\u5207\u6362\u903b\u8f91\ndocument.getElementById('menuBtn').addEventListener('click', function() {\n  const menu = document.getElementById('mobileMenu');\n  menu.classList.toggle('hidden');\n});<\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u4f8b\u5b50\u5c55\u793a\u4e86\u5982\u4f55\u4ec5\u7528 Tailwind \u7684\u5b9e\u7528\u7c7b\u548c\u4e00\u4e2a\u7b80\u5355\u7684 JavaScript \u51fd\u6570\uff0c\u5feb\u901f\u6784\u5efa\u51fa\u4e00\u4e2a\u529f\u80fd\u5b8c\u6574\u3001\u5916\u89c2\u4e13\u4e1a\u7684\u54cd\u5e94\u5f0f\u7ec4\u4ef6\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539\u80cc\u666f\u8272\u3001\u95f4\u8ddd\u3001\u60ac\u505c\u6548\u679c\u7b49\u7c7b\uff0c\u8f7b\u677e\u5730\u8c03\u6574\u5176\u5916\u89c2\u4ee5\u5339\u914d\u4f60\u7684\u54c1\u724c\u8bbe\u8ba1\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS \u901a\u8fc7\u5176\u529f\u80fd\u4f18\u5148\u7684\u5b9e\u7528\u7c7b\u65b9\u6cd5\u8bba\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u524d\u7aef\u5f00\u53d1\u8005\u7f16\u5199\u6837\u5f0f\u7684\u65b9\u5f0f\u3002\u5b83\u6d88\u9664\u4e86\u5728 HTML \u548c CSS \u6587\u4ef6\u4e4b\u95f4\u9891\u7e41\u5207\u6362\u7684\u4e0a\u4e0b\u6587\u5207\u6362\u6210\u672c\uff0c\u901a\u8fc7\u7ea6\u675f\u6027\u7684\u8bbe\u8ba1\u7cfb\u7edf\u786e\u4fdd\u4e86 UI \u7684\u4e00\u81f4\u6027\uff0c\u5e76\u501f\u52a9\u5148\u8fdb\u7684\u6784\u5efa\u65f6\u4f18\u5316\u4fdd\u8bc1\u4e86\u4ea7\u51fa\u7684\u9ad8\u6027\u80fd\u3002\u4ece\u7b80\u5355\u7684\u539f\u578b\u5230\u590d\u6742\u7684\u4f01\u4e1a\u7ea7\u5e94\u7528\uff0cTailwind \u90fd\u80fd\u63d0\u4f9b\u51fa\u8272\u7684\u5f00\u53d1\u4f53\u9a8c\u548c\u53ef\u7ef4\u62a4\u6027\u3002\u638c\u63e1\u5176\u6838\u5fc3\u5b9e\u7528\u7c7b\u3001\u54cd\u5e94\u5f0f\u524d\u7f00\u4ee5\u53ca\u914d\u7f6e\u65b9\u6cd5\uff0c\u5c06\u80fd\u663e\u8457\u63d0\u5347\u4f60\u7684\u524d\u7aef\u5f00\u53d1\u6548\u7387\u4e0e\u8bbe\u8ba1\u5b9e\u73b0\u80fd\u529b\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
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\uff0c\u8fd9\u6b63\u662f Tailwind \u8bbe\u8ba1\u7684\u7cbe\u5999\u4e4b\u5904\u3002\u5728\u751f\u4ea7\u6784\u5efa\u9636\u6bb5\uff0cTailwind \u4f1a\u4f7f\u7528 PurgeCSS\uff08\u73b0\u96c6\u6210\u5728\u5f15\u64ce\u5185\u90e8\uff09\u6765\u201c\u6447\u6811\u201d\uff0c\u5b83\u53ea\u4f1a\u4fdd\u7559\u4f60\u5b9e\u9645\u5728 HTML\u3001JavaScript \u7b49\u6a21\u677f\u6587\u4ef6\u4e2d\u4f7f\u7528\u5230\u7684 CSS \u7c7b\u3002\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u53ea\u6709\u51e0 KB \u5230\u51e0\u5341 KB\uff0c\u6bd4\u8bb8\u591a\u4f20\u7edf CSS \u6846\u67b6\u8981\u5c0f\u5f97\u591a\u3002<\/p>\n\n\n\n
\u5728 HTML \u4e2d\u5199\u8fd9\u4e48\u591a\u7c7b\u540d\uff0c\u4f1a\u4e0d\u4f1a\u8ba9\u4ee3\u7801\u96be\u4ee5\u9605\u8bfb\u548c\u7ef4\u62a4\uff1f<\/h3>\n\n\n\n
\u8fd9\u786e\u5b9e\u662f\u4e00\u4e2a\u5e38\u89c1\u7684\u521d\u671f\u987e\u8651\u3002\u5b9e\u8df5\u8868\u660e\uff0c\u5c06\u6837\u5f0f\u4e0e\u7ed3\u6784\u653e\u5728\u76f8\u8fd1\u7684\u4f4d\u7f6e\uff0c\u5b9e\u9645\u4e0a\u964d\u4f4e\u4e86\u5bfb\u627e\u548c\u4fee\u6539\u6837\u5f0f\u7684\u8ba4\u77e5\u8d1f\u62c5\u3002\u5bf9\u4e8e\u590d\u6742\u7684\u7ec4\u4ef6\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 Tailwind \u7684 @apply<\/code> \u6307\u4ee4\u5c06\u5e38\u7528\u7684\u5b9e\u7528\u7c7b\u63d0\u53d6\u5230 CSS \u4e2d\uff0c\u521b\u5efa\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6\u7c7b\u3002\u6b64\u5916\uff0c\u826f\u597d\u7684\u7f16\u8f91\u5668\u6269\u5c55\uff08\u5982 Tailwind CSS IntelliSense\uff09\u80fd\u63d0\u4f9b\u81ea\u52a8\u8865\u5168\u548c\u60ac\u505c\u9884\u89c8\uff0c\u6781\u5927\u5730\u6539\u5584\u4e86\u5f00\u53d1\u4f53\u9a8c\u3002<\/p>\n\n\n\n
Tailwind CSS \u9002\u5408\u4e0e\u54ea\u4e9b JavaScript \u6846\u67b6\u4e00\u8d77\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
Tailwind CSS \u662f\u6846\u67b6\u65e0\u5173\u7684\uff0c\u5b83\u53ef\u4ee5\u4e0e\u4efb\u4f55\u524d\u7aef\u6846\u67b6\u6216\u5e93\u5b8c\u7f8e\u914d\u5408\u3002\u5728 React\u3001Vue.js\u3001Angular\u3001Svelte \u4ee5\u53ca\u4f20\u7edf\u7684\u9759\u6001\u7f51\u7ad9\u751f\u6210\u5668\uff08\u5982 Next.js, Nuxt.js, Gatsby, Hugo\uff09\u4e2d\u90fd\u6709\u6781\u4f73\u7684\u652f\u6301\u548c\u5e7f\u6cdb\u7684\u793e\u533a\u5e94\u7528\u3002\u5176\u5de5\u4f5c\u6d41\u7a0b\uff08\u626b\u63cf\u6587\u4ef6\u3001\u751f\u6210\u6837\u5f0f\uff09\u53ef\u4ee5\u65e0\u7f1d\u96c6\u6210\u5230\u8fd9\u4e9b\u6846\u67b6\u7684\u6784\u5efa\u5de5\u5177\u94fe\u4e2d\u3002<\/p>\n\n\n\n
\u5982\u4f55\u81ea\u5b9a\u4e49 Tailwind \u7684\u9ed8\u8ba4\u4e3b\u9898\uff0c\u6bd4\u5982\u54c1\u724c\u8272\uff1f<\/h3>\n\n\n\n
\u81ea\u5b9a\u4e49\u4e3b\u9898\u4e3b\u8981\u901a\u8fc7\u4fee\u6539\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u7684 tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\u6765\u5b8c\u6210\u3002\u4f60\u53ef\u4ee5\u5728 theme.extend<\/code> \u5bf9\u8c61\u4e2d\u6dfb\u52a0\u6216\u8986\u76d6\u9ed8\u8ba4\u503c\u3002\u4f8b\u5982\uff0c\u8981\u6dfb\u52a0\u81ea\u5b9a\u4e49\u54c1\u724c\u8272\uff0c\u53ef\u4ee5\u8fd9\u6837\u914d\u7f6e\uff1a<\/p>\n\n\n\n
module.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand-blue': '#1992d4',\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
\u914d\u7f6e\u5b8c\u6210\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728\u9879\u76ee\u4e2d\u4f7f\u7528 bg-brand-blue<\/code> \u6216 text-brand-blue<\/code> \u8fd9\u6837\u7684\u7c7b\u4e86\u3002\u6240\u6709\u6838\u5fc3\u7684\u5c3a\u5bf8\u3001\u5b57\u4f53\u3001\u65ad\u70b9\u7b49\u90fd\u53ef\u4ee5\u7528\u7c7b\u4f3c\u7684\u65b9\u5f0f\u8fdb\u884c\u5b9a\u5236\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel ini secara sistematis memperkenalkan kerangka kerja Tailwind CSS. Artikel tersebut menjelaskan konsep utama Tailwind CSS sebagai sebuah kerangka kerja yang mengutamakan fungsionalitas, yaitu dengan menyediakan sejumlah besar kelas praktis tingkat rendah untuk membangun desain kustom dengan cepat. Artikel tersebut juga membahas secara rinci cara kerja Tailwind CSS yang berbasis pada plugin PostCSS dan mekanisme \u201ctree shaking\u201d (pemrosesan kode untuk menghilangkan kode yang tidak digunakan), serta memberikan prosedur standar untuk memulai penggunaan Tailwind CSS melalui integrasi npm dan PostCSS. Di akhir, dijelaskan pula cara menggunakan sistem kelas praktis utama Tailwind CSS dan desain responsif berbasis titik pemutus (breakpoints).<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2747,2256,430,367],"knowledge_category":[281],"class_list":["post-12372981","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-postcss","tag-tailwind-css","tag-frontend-development","tag-responsive-design","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, CSS\u6846\u67b6, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u5b9e\u7528\u7c7b, \u524d\u7aef\u5f00\u53d1, \u4ece\u96f6\u5165\u95e8Tailwind, \u73b0\u4ee3\u5316\u7f51\u9875\u754c\u9762\u6784\u5efa"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12372981","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\/12372981\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/media?parent=12372981"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/tags?post=12372981"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_category?post=12372981"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}