{"id":12374218,"date":"2026-03-17T13:24:23","date_gmt":"2026-03-17T05:24:23","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e4%bb%8e%e9%9b%b6%e6%9e%84%e5%bb%ba%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bd%91%e7%ab%99%ef%bc%9atailwind-css-%e5%ae%9e%e6%88%98%e5%85%a5%e9%97%a8%e4%b8%8e%e6%a0%b8%e5%bf%83%e6%8a%80%e5%b7%a7%e5%85%a8\/"},"modified":"2026-03-17T13:38:36","modified_gmt":"2026-03-17T05:38:36","slug":"build-responsive-website-tailwind-css-tutorial-core-techniques","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/en\/knowledge\/website-building\/build-responsive-website-tailwind-css-tutorial-core-techniques\/","title":{"rendered":"Building a Responsive Website from Scratch: A Practical Introduction to Tailwind CSS and a Comprehensive Analysis of Its Core Techniques"},"content":{"rendered":"\n

\u5728\u5f53\u4eca\u5feb\u901f\u53d1\u5c55\u7684\u524d\u7aef\u5f00\u53d1\u9886\u57df\uff0c\u6548\u7387\u4e0e\u8bbe\u8ba1\u4e00\u81f4\u6027\u662f\u9879\u76ee\u6210\u529f\u7684\u5173\u952e\u56e0\u7d20\u3002\u4f20\u7edf\u7684 CSS \u7f16\u5199\u65b9\u5f0f\u5e38\u5e38\u53d7\u9650\u4e8e\u91cd\u590d\u7684\u7c7b\u547d\u540d\u3001\u81c3\u80bf\u7684\u6837\u5f0f\u8868\u4ee5\u53ca\u96be\u4ee5\u7ef4\u62a4\u7684\u4ee3\u7801\u7ed3\u6784\u3002\u800c Tailwind CSS<\/code> \u4f5c\u4e3a\u4e00\u79cd\u529f\u80fd\u4f18\u5148\u7684 CSS \u6846\u67b6\uff0c\u901a\u8fc7\u63d0\u4f9b\u5927\u91cf\u53ef\u7ec4\u5408\u7684\u5b9e\u7528\u7c7b\uff08Utility Classes\uff09\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u5f00\u53d1\u8005\u6784\u5efa\u7528\u6237\u754c\u9762\u7684\u65b9\u5f0f\u3002\u5b83\u5141\u8bb8\u5f00\u53d1\u8005\u76f4\u63a5\u5728 HTML \u4e2d\u901a\u8fc7\u7c7b\u540d\u5e94\u7528\u6837\u5f0f\uff0c\u4ece\u800c\u5b9e\u73b0\u4e86\u9ad8\u5ea6\u7684\u5b9a\u5236\u5316\u4e0e\u5f00\u53d1\u901f\u5ea6\u7684\u98de\u8dc3\u3002\u672c\u6587\u5c06\u5f15\u5bfc\u4f60\u4ece\u96f6\u5f00\u59cb\uff0c\u638c\u63e1\u4f7f\u7528 Tailwind CSS<\/code> \u6784\u5efa\u73b0\u4ee3\u54cd\u5e94\u5f0f\u7f51\u7ad9\u7684\u6838\u5fc3\u6d41\u7a0b\u4e0e\u9ad8\u7ea7\u6280\u5de7\u3002<\/p>\n\n\n\n

\u4ec0\u4e48\u662f Tailwind CSS \u53ca\u5176\u6838\u5fc3\u4f18\u52bf<\/h2>\n\n\n\n

Tailwind CSS<\/code> \u4e0d\u662f\u4e00\u4e2a\u4f20\u7edf\u7684\u7ec4\u4ef6\u5e93\uff08\u5982 Bootstrap\uff09\uff0c\u5b83\u4e0d\u63d0\u4f9b\u9884\u6784\u5efa\u7684\u6309\u94ae\u6216\u5361\u7247\u7ec4\u4ef6\u3002\u76f8\u53cd\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u5957\u7ec6\u7c92\u5ea6\u7684\u3001\u5355\u4e00\u804c\u8d23\u7684 CSS \u5b9e\u7528\u7c7b\uff0c\u7528\u4e8e\u76f4\u63a5\u6784\u5efa\u4efb\u4f55\u8bbe\u8ba1\u3002<\/p>\n\n\n\n

\u5b9e\u7528\u4f18\u5148\u7684\u8bbe\u8ba1\u54f2\u5b66<\/h3>\n\n\n\n

\u5176\u6838\u5fc3\u54f2\u5b66\u662f\u201c\u5b9e\u7528\u4f18\u5148\uff08Utility-First\uff09\u201d\u3002\u8fd9\u610f\u5473\u7740\u4f60\u901a\u8fc7\u7ec4\u5408\u591a\u4e2a\u7b80\u5355\u7684\u3001\u5355\u4e00\u529f\u80fd\u7684\u7c7b\u6765\u6784\u5efa\u590d\u6742\u7684\u7ec4\u4ef6\u3002\u4f8b\u5982\uff0c\u8981\u521b\u5efa\u4e00\u4e2a\u6709\u5185\u8fb9\u8ddd\u3001\u84dd\u8272\u80cc\u666f\u3001\u767d\u8272\u6587\u5b57\u548c\u5706\u89d2\u7684\u6309\u94ae\uff0c\u4f60\u4e0d\u518d\u9700\u8981\u53bb CSS \u6587\u4ef6\u4e2d\u7f16\u5199\u4e00\u4e2a\u540d\u4e3a .btn-primary<\/code> \u7684\u7c7b\uff0c\u800c\u662f\u76f4\u63a5\u5728 HTML \u4e2d\u7ec4\u5408\u4f7f\u7528 px-4 py-2 bg-blue-500 text-white rounded<\/code> \u8fd9\u4e9b\u7c7b\u3002\u8fd9\u79cd\u65b9\u5f0f\u6781\u5927\u5730\u51cf\u5c11\u4e86\u4e0a\u4e0b\u6587\u5207\u6362\uff0c\u63d0\u9ad8\u4e86\u5f00\u53d1\u6548\u7387\uff0c\u5e76\u4f7f\u5f97\u6837\u5f0f\u4e0e\u6807\u8bb0\u7d27\u5bc6\u8026\u5408\uff0c\u6613\u4e8e\u7ef4\u62a4\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb Tailwind CSS \u6df1\u5165\u89e3\u6790\uff1a\u4ece\u96f6\u5f00\u59cb\u6784\u5efa\u73b0\u4ee3\u5316\u7684\u54cd\u5e94\u5f0f\u7528\u6237\u754c\u9762<\/a>\u3002<\/p>\n\n\n\n\n

\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e0e\u4ea4\u4e92\u72b6\u6001\u7684\u5185\u7f6e\u652f\u6301<\/h3>\n\n\n\n

Tailwind CSS<\/code> \u5185\u7f6e\u4e86\u5f3a\u5927\u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u7cfb\u7edf\u3002\u901a\u8fc7\u4e3a\u5b9e\u7528\u7c7b\u6dfb\u52a0\u54cd\u5e94\u5f0f\u524d\u7f00\uff08\u5982 md:<\/code>, lg:<\/code>\uff09\uff0c\u53ef\u4ee5\u8f7b\u677e\u6784\u5efa\u9002\u5e94\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u7684\u754c\u9762\u3002\u540c\u65f6\uff0c\u5b83\u8fd8\u539f\u751f\u652f\u6301\u5e38\u89c1\u7684\u4ea4\u4e92\u72b6\u6001\uff0c\u5982\u60ac\u505c\uff08hover:<\/code>\uff09\u3001\u7126\u70b9\uff08focus:<\/code>\uff09\u3001\u6fc0\u6d3b\uff08active:<\/code>\uff09\u7b49\uff0c\u4f7f\u5f97\u6dfb\u52a0\u4ea4\u4e92\u6837\u5f0f\u53d8\u5f97\u5f02\u5e38\u7b80\u5355\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

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

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

\u5b89\u88c5\u4e0e\u521d\u59cb\u5316<\/h3>\n\n\n\n

\u5728\u4f60\u7684\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\uff0c\u901a\u8fc7\u7ec8\u7aef\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4\u8fdb\u884c\u5b89\u88c5\uff1a<\/p>\n\n\n\n

npm install -D tailwindcss\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u8fd9\u4f1a\u5c06 Tailwind CSS<\/code> \u5b89\u88c5\u4e3a\u5f00\u53d1\u4f9d\u8d56\uff0c\u5e76\u751f\u6210\u4e00\u4e2a\u9ed8\u8ba4\u7684\u914d\u7f6e\u6587\u4ef6 tailwind.config.js<\/code>\u3002\u8fd9\u4e2a\u6587\u4ef6\u662f\u4f60\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\u7684\u6838\u5fc3\u3002<\/p>\n\n\n\n
\u914d\u7f6e\u6a21\u677f\u8def\u5f84<\/h3>\n\n\n\n
\u4e3a\u4e86\u786e\u4fdd\u751f\u4ea7\u6784\u5efa\u65f6\u80fd\u6b63\u786e\u5254\u9664\u672a\u4f7f\u7528\u7684\u6837\u5f0f\uff0c\u4f60\u9700\u8981\u5728 tailwind.config.js<\/code> \u6587\u4ef6\u7684 content<\/code> \u5c5e\u6027\u4e2d\u914d\u7f6e\u4f60\u7684\u9879\u76ee\u6587\u4ef6\u8def\u5f84\u3002\u8fd9\u544a\u8bc9 Tailwind<\/code> \u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4ee5\u5bfb\u627e\u4f7f\u7528\u7684\u7c7b\u540d\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u63d0\u5347\u5f00\u53d1\u6548\u7387\uff1a\u6df1\u5165\u7406\u89e3 Tailwind CSS \u7684\u5b9e\u7528\u6280\u5de7\u4e0e\u6700\u4f73\u5b9e\u8df5<\/a>\u3002<\/p>\n\n\n\n\n
\/** @type {import('tailwindcss').Config} *\/\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
\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\/index.css<\/code> \u6216 src\/styles.css<\/code>\uff09\u4e2d\uff0c\u4f7f\u7528 @tailwind<\/code> \u6307\u4ee4\u6765\u5f15\u5165 Tailwind<\/code> \u7684\u5404\u4e2a\u5c42\u3002<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u4e4b\u540e\uff0c\u786e\u4fdd\u4f60\u7684\u9879\u76ee\u6784\u5efa\u6d41\u7a0b\uff08\u5982\u4f7f\u7528 PostCSS\uff09\u4f1a\u5904\u7406\u8fd9\u4e2a CSS \u6587\u4ef6\u3002\u5982\u679c\u4f60\u4f7f\u7528\u50cf Vite \u6216 Next.js \u8fd9\u6837\u7684\u73b0\u4ee3\u5de5\u5177\u94fe\uff0c\u5b83\u4eec\u901a\u5e38\u5df2\u914d\u7f6e\u597d\u652f\u6301 Tailwind<\/code>\u3002<\/p>\n\n\n\n
\u6838\u5fc3\u5b9e\u7528\u7c7b\u4e0e\u5e03\u5c40\u6784\u5efa<\/h2>\n\n\n\n
\u638c\u63e1 Tailwind CSS<\/code> \u7684\u5173\u952e\u5728\u4e8e\u719f\u6089\u5176\u5e9e\u5927\u7684\u5b9e\u7528\u7c7b\u547d\u540d\u4f53\u7cfb\u3002\u5b83\u4eec\u7684\u547d\u540d\u901a\u5e38\u975e\u5e38\u76f4\u89c2\uff0c\u9075\u5faa\u4e00\u5b9a\u7684\u6a21\u5f0f\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
\u95f4\u8ddd\u4e0e\u6392\u7248\u63a7\u5236<\/h3>\n\n\n\n
Tailwind<\/code> \u4f7f\u7528\u4e00\u5957\u57fa\u4e8e REM \u7684\u7f29\u653e\u6bd4\u4f8b\u7cfb\u7edf\u6765\u63a7\u5236\u95f4\u8ddd\u548c\u5c3a\u5bf8\u3002\u4f8b\u5982\uff1a
\n*   m-4<\/code> \u4ee3\u8868 margin: 1rem;<\/code>
\n*   p-2<\/code> \u4ee3\u8868 padding: 0.5rem;<\/code>
\n*   text-xl<\/code> \u4ee3\u8868 font-size: 1.25rem; line-height: 1.75rem;<\/code>
\n*   font-bold<\/code> \u4ee3\u8868 font-weight: 700;<\/code><\/p>\n\n\n\n
\u4f60\u53ef\u4ee5\u901a\u8fc7\u7ec4\u5408\u8fd9\u4e9b\u7c7b\u6765\u7cbe\u786e\u63a7\u5236\u5143\u7d20\u7684\u8fb9\u8ddd\u3001\u586b\u5145\u548c\u6587\u672c\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u7075\u6d3b\u7684 Flexbox \u4e0e Grid \u5e03\u5c40<\/h3>\n\n\n\n
Tailwind<\/code> \u4e3a CSS Flexbox \u548c Grid \u5e03\u5c40\u63d0\u4f9b\u4e86\u5168\u9762\u7684\u7c7b\u652f\u6301\uff0c\u4f7f\u5f97\u521b\u5efa\u590d\u6742\u5e03\u5c40\u53d8\u5f97\u8f7b\u800c\u6613\u4e3e\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS \u6838\u5fc3\u6982\u5ff5\u89e3\u6790\u4e0e\u4ece\u96f6\u5230\u4e00\u5b9e\u6218\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
<!-- \u4e00\u4e2a\u4f7f\u7528 Flexbox \u7684\u7b80\u5355\u5bfc\u822a\u680f -->\n<nav class="flex items-center justify-between p-4 bg-gray-800">\n  <div class="text-white text-lg font-bold">\u6211\u7684\u54c1\u724c<\/div>\n  <div class="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  <\/div>\n<\/nav>\n\n<!-- \u4e00\u4e2a\u4f7f\u7528 Grid \u7684\u5361\u7247\u5bb9\u5668 -->\n<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">\n  <div class="p-4 border rounded shadow">\u5361\u7247 1<\/div>\n  <div class="p-4 border rounded shadow">\u5361\u7247 2<\/div>\n  <div class="p-4 border rounded shadow">\u5361\u7247 3<\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u5728\u4e0a\u9762\u7684\u7f51\u683c\u793a\u4f8b\u4e2d\uff0cgrid-cols-1<\/code> \u8868\u793a\u5728\u79fb\u52a8\u7aef\u5355\u5217\u663e\u793a\uff0cmd:grid-cols-2<\/code> \u8868\u793a\u5728\u4e2d\u7b49\u5c4f\u5e55\u4ee5\u4e0a\u53d8\u4e3a\u4e24\u5217\uff0clg:grid-cols-3<\/code> \u8868\u793a\u5728\u5927\u5c4f\u5e55\u53d8\u4e3a\u4e09\u5217\u3002gap-6<\/code> \u5219\u63a7\u5236\u7f51\u683c\u9879\u4e4b\u95f4\u7684\u95f4\u9699\u3002<\/p>\n\n\n\n
\u9ad8\u7ea7\u6280\u5de7\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n\n\n\n
\u5f53\u719f\u6089\u57fa\u7840\u7528\u6cd5\u540e\uff0c\u4e00\u4e9b\u9ad8\u7ea7\u6280\u5de7\u80fd\u8ba9\u4f60\u66f4\u9ad8\u6548\u5730\u4f7f\u7528 Tailwind CSS<\/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 \u6307\u4ee4<\/h3>\n\n\n\n
\u867d\u7136\u76f4\u63a5\u5728 HTML \u4e2d\u7ec4\u5408\u7c7b\u5f88\u65b9\u4fbf\uff0c\u4f46\u5982\u679c\u4e00\u4e2a\u590d\u6742\u7684\u6837\u5f0f\u7ec4\u5408\u5728\u591a\u5904\u91cd\u590d\u4f7f\u7528\uff0c\u5c31\u4f1a\u4ea7\u751f\u5197\u4f59\u3002\u6b64\u65f6\uff0c\u4f60\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728\u4f60\u7684 CSS \u6587\u4ef6\u4e2d\u63d0\u53d6\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\u7c7b\u3002<\/p>\n\n\n\n
\/* \u5728\u4f60\u7684\u81ea\u5b9a\u4e49 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;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u5728 HTML \u4e2d\u7b80\u5355\u5730\u4f7f\u7528 class=\u201cbtn-primary\u201d<\/code> \u5373\u53ef\u3002\u8fd9\u7ed3\u5408\u4e86\u5b9e\u7528\u7c7b\u7684\u7075\u6d3b\u6027\u4e0e\u4f20\u7edf CSS \u7684\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n\n\n\n
\u6df1\u5ea6\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u4ee4\u724c<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u6587\u4ef6\u7684 theme<\/code> \u90e8\u5206\u662f\u4f60\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\u7684\u5730\u65b9\u3002\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc\u8986\u76d6\u6216\u6269\u5c55\u9ed8\u8ba4\u7684\u989c\u8272\u3001\u5b57\u4f53\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u65ad\u70b9\u7b49\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        '128': '32rem',\n      },\n      fontFamily: {\n        'sans': ['Inter', 'system-ui', 'sans-serif'],\n      }\n    },\n  },\n}<\/code><\/pre>\n\n\n\n
\u5b9a\u4e49\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u4f7f\u7528\u50cf text-brand-blue<\/code>\u3001h-128<\/code> \u8fd9\u6837\u7684\u81ea\u5b9a\u4e49\u7c7b\u4e86\u3002<\/p>\n\n\n\n
\u542f\u7528 JIT \u6a21\u5f0f\u4e0e\u751f\u4ea7\u4f18\u5316<\/h3>\n\n\n\n
\u4ece\u7248\u672c\u5f00\u59cb\uff0cTailwind CSS<\/code> \u7684 Just-in-Time (JIT) \u5f15\u64ce\u5df2\u6210\u4e3a\u9ed8\u8ba4\u6a21\u5f0f\u3002\u5b83\u4f1a\u6309\u9700\u751f\u6210\u4f60\u5b9e\u9645\u4f7f\u7528\u7684\u6837\u5f0f\uff0c\u4f7f\u5f97\u5f00\u53d1\u7f16\u8bd1\u901f\u5ea6\u6781\u5feb\uff0c\u5e76\u4e14\u5141\u8bb8\u4f60\u4f7f\u7528\u4efb\u610f\u503c\uff0c\u5982 top-[117px]<\/code> \u6216 bg-[#bada55]<\/code>\uff0c\u63d0\u4f9b\u4e86\u65e0\u4e0e\u4f26\u6bd4\u7684\u7075\u6d3b\u6027\u3002
\n\u5728\u751f\u4ea7\u6784\u5efa\u65f6\uff0c\u786e\u4fdd\u4f60\u7684\u6784\u5efa\u6d41\u7a0b\u4f1a\u8fd0\u884c Tailwind<\/code> \u6765\u51c0\u5316\uff08Purge\uff09\u672a\u4f7f\u7528\u7684 CSS\uff0c\u8fd9\u5c06\u4f7f\u6700\u7ec8\u7684 CSS \u6587\u4ef6\u4f53\u79ef\u53d8\u5f97\u975e\u5e38\u5c0f\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u4ee5\u5176\u5b9e\u7528\u4f18\u5148\u7684\u54f2\u5b66\uff0c\u4e3a\u524d\u7aef\u5f00\u53d1\u8005\u63d0\u4f9b\u4e86\u4e00\u5957\u9ad8\u6548\u3001\u7075\u6d3b\u4e14\u9ad8\u5ea6\u53ef\u7ef4\u62a4\u7684\u6837\u5f0f\u89e3\u51b3\u65b9\u6848\u3002\u4ece\u73af\u5883\u642d\u5efa\u3001\u6838\u5fc3\u5b9e\u7528\u7c7b\u7684\u4f7f\u7528\uff0c\u5230\u54cd\u5e94\u5f0f\u5e03\u5c40\u7684\u6784\u5efa\uff0c\u518d\u5230\u901a\u8fc7\u914d\u7f6e\u548c\u6307\u4ee4\u8fdb\u884c\u6df1\u5ea6\u5b9a\u5236\uff0c\u5b83\u8d2f\u7a7f\u4e86\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u7684\u6574\u4e2a\u6837\u5f0f\u5de5\u4f5c\u6d41\u3002\u867d\u7136\u521d\u671f\u9700\u8981\u8bb0\u5fc6\u5927\u91cf\u7684\u7c7b\u540d\uff0c\u4f46\u5176\u76f4\u89c2\u7684\u547d\u540d\u89c4\u5219\u548c\u5e26\u6765\u7684\u5f00\u53d1\u6548\u7387\u63d0\u5347\u662f\u503c\u5f97\u7684\u3002\u901a\u8fc7\u9075\u5faa\u6700\u4f73\u5b9e\u8df5\uff0c\u5982\u9002\u65f6\u63d0\u53d6\u7ec4\u4ef6\u548c\u5145\u5206\u5229\u7528 JIT \u6a21\u5f0f\uff0c\u4f60\u53ef\u4ee5\u5728\u4fdd\u6301\u4ee3\u7801\u6574\u6d01\u7684\u540c\u65f6\uff0c\u5feb\u901f\u5b9e\u73b0\u4efb\u4f55\u8bbe\u8ba1\u7a3f\u3002<\/p>\n\n\n\n
FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n
Tailwind CSS \u4f1a\u5bfc\u81f4 HTML \u7c7b\u540d\u975e\u5e38\u5197\u957f\u5417\uff1f<\/h3>\n\n\n\n
\u4f1a\u7684\uff0c\u8fd9\u662f\u4f7f\u7528\u5b9e\u7528\u7c7b\u6846\u67b6\u7684\u5e38\u89c1\u73b0\u8c61\u3002\u5355\u4e2a\u5143\u7d20\u7684\u7c7b\u540d\u53ef\u80fd\u4f1a\u53d8\u5f97\u5f88\u957f\u3002\u7136\u800c\uff0c\u8fd9\u901a\u5e38\u88ab\u89c6\u4e3a\u4e00\u79cd\u6743\u8861\u3002<\/p>\n\n\n\n
\u901a\u8fc7\u5c06\u6837\u5f0f\u76f4\u63a5\u5199\u5728\u6807\u8bb0\u4e2d\uff0c\u4f60\u6d88\u9664\u4e86\u5728 HTML \u548c CSS \u6587\u4ef6\u4e4b\u95f4\u6765\u56de\u8df3\u8f6c\u7684\u8ba4\u77e5\u8d1f\u62c5\uff0c\u7ec4\u4ef6\u53d8\u5f97\u5b8c\u5168\u81ea\u5305\u542b\uff0c\u66f4\u5bb9\u6613\u7406\u89e3\u548c\u7ef4\u62a4\u3002\u5bf9\u4e8e\u6781\u5176\u590d\u6742\u7684\u7c7b\u540d\u7ec4\u5408\uff0c\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u63d0\u53d6\u4e3a\u7ec4\u4ef6\u7c7b\u6765\u51cf\u5c11\u91cd\u590d\u3002<\/p>\n\n\n\n
\u5982\u4f55\u5c06 Tailwind CSS \u4e0e React\u3001Vue \u7b49\u6846\u67b6\u7ed3\u5408\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u4e0e\u6240\u6709\u4e3b\u6d41\u524d\u7aef\u6846\u67b6\u90fd\u80fd\u5b8c\u7f8e\u96c6\u6210\u3002\u5b89\u88c5\u548c\u914d\u7f6e\u8fc7\u7a0b\u57fa\u672c\u4e00\u81f4\uff1a\u901a\u8fc7\u5305\u7ba1\u7406\u5668\u5b89\u88c5 tailwindcss<\/code> \u53ca\u5176\u4f9d\u8d56\uff08\u5982 PostCSS\u3001Autoprefixer\uff09\uff0c\u521d\u59cb\u5316\u914d\u7f6e\u6587\u4ef6\uff0c\u5e76\u5728\u4e3b CSS \u6587\u4ef6\u4e2d\u5f15\u5165\u6307\u4ee4\u3002<\/p>\n\n\n\n
\u5bf9\u4e8e React\uff08Create React App \u6216 Vite+React\uff09\u3001Vue\uff08Vue CLI \u6216 Vite+Vue\uff09\u6216 Next.js\uff0c\u5b98\u65b9\u6587\u6863\u63d0\u4f9b\u4e86\u8be6\u5c3d\u7684\u96c6\u6210\u6307\u5357\u3002\u901a\u5e38\uff0c\u6846\u67b6\u7684\u793e\u533a\u6a21\u677f\u6216\u63d2\u4ef6\u4e5f\u4f1a\u63d0\u4f9b\u5f00\u7bb1\u5373\u7528\u7684 Tailwind<\/code> \u652f\u6301\u3002<\/p>\n\n\n\n
Tailwind \u7684\u6837\u5f0f\u4f1a\u8986\u76d6\u6211\u81ea\u5df1\u7684 CSS \u5417\uff1f<\/h3>\n\n\n\n
\u8fd9\u53d6\u51b3\u4e8e CSS \u7684\u7279\u5f02\u6027\u548c\u52a0\u8f7d\u987a\u5e8f\u3002Tailwind<\/code> \u7684 base<\/code> \u5c42\u4f1a\u5f15\u5165\u4e00\u4e9b\u91cd\u7f6e\u6837\u5f0f\uff0c\u53ef\u80fd\u4f1a\u8986\u76d6\u6d4f\u89c8\u5668\u7684\u9ed8\u8ba4\u6837\u5f0f\u3002\u5b83\u7684\u5b9e\u7528\u7c7b\u5177\u6709\u5355\u4e00\u7684\u7279\u5f02\u6027\uff08\u5982\u4e00\u4e2a\u7c7b\u9009\u62e9\u5668\uff09\uff0c\u56e0\u6b64\u5f88\u5bb9\u6613\u88ab\u4f60\u81ea\u5df1\u7684\u5177\u6709\u66f4\u9ad8\u7279\u5f02\u6027\u7684 CSS \u89c4\u5219\u8986\u76d6\u3002<\/p>\n\n\n\n
\u5982\u679c\u4f60\u5e0c\u671b\u81ea\u5df1\u7684 CSS \u62e5\u6709\u66f4\u9ad8\u4f18\u5148\u7ea7\uff0c\u786e\u4fdd\u5c06\u5176\u653e\u5728 @tailwind utilities;<\/code> \u6307\u4ee4\u4e4b\u540e\u5f15\u5165\uff0c\u6216\u8005\u4f7f\u7528\u66f4\u5177\u4f53\u7684\u9009\u62e9\u5668\u3002\u5728 Tailwind<\/code> \u4e2d\uff0c\u4f60\u4e5f\u53ef\u4ee5\u901a\u8fc7\u4e3a\u5b9e\u7528\u7c7b\u6dfb\u52a0 !important<\/code> \u6765\u5f3a\u5236\u4f18\u5148\u7ea7\uff0c\u4f8b\u5982 text-red-500 !important<\/code>\u3002<\/p>\n\n\n\n
\u56e2\u961f\u9879\u76ee\u4e2d\u5982\u4f55\u4fdd\u6301 Tailwind \u7c7b\u540d\u4e66\u5199\u7684\u4e00\u81f4\u6027\uff1f<\/h3>\n\n\n\n
\u4fdd\u6301\u4e00\u81f4\u6027\u7684\u6700\u4f73\u5b9e\u8df5\u662f\u7ed3\u5408\u4f7f\u7528\u5de5\u5177\u548c\u7ea6\u5b9a\u3002<\/p>\n\n\n\n
\u9996\u5148\uff0c\u5f3a\u70c8\u63a8\u8350\u5728\u9879\u76ee\u4e2d\u96c6\u6210\u7f16\u8f91\u5668\u7684 Tailwind CSS IntelliSense<\/code> \u63d2\u4ef6\uff0c\u5b83\u80fd\u63d0\u4f9b\u81ea\u52a8\u8865\u5168\u548c\u8bed\u6cd5\u9ad8\u4eae\u3002\u5176\u6b21\uff0c\u53ef\u4ee5\u5236\u5b9a\u56e2\u961f\u4ee3\u7801\u89c4\u8303\uff0c\u4f8b\u5982\u7c7b\u540d\u7684\u6392\u5e8f\uff08\u5efa\u8bae\u4f7f\u7528 Prettier \u63d2\u4ef6 prettier-plugin-tailwindcss<\/code> \u8fdb\u884c\u81ea\u52a8\u6392\u5e8f\uff09\u3002\u5bf9\u4e8e\u590d\u6742\u7684\u7ec4\u4ef6\uff0c\u9f13\u52b1\u4f7f\u7528 @apply<\/code> \u63d0\u53d6\u6216\u5c06\u5176\u5c01\u88c5\u6210\u6846\u67b6\u7684\u7ec4\u4ef6\uff08\u5982 React Component\uff09\uff0c\u4ee5\u63d0\u4f9b\u7edf\u4e00\u7684 API \u7ed9\u56e2\u961f\u6210\u5458\u4f7f\u7528\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
This article provides a comprehensive introduction to the Tailwind CSS framework, highlighting its core advantage of \u201cpracticality first\u201d and the differences it has compared to traditional CSS. The content covers setting up the development environment, basic configuration, the use of core utility classes, as well as how to efficiently create responsive layouts and interactive interfaces using Tailwind\u2019s built-in systems. It serves as a practical guide for front-end developers looking to get started with using Tailwind CSS.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2402,2256,430,2329,367],"knowledge_category":[281],"class_list":["post-12374218","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-utility-classes","tag-tailwind-css","tag-frontend-development","tag-frontend-frameworks","tag-responsive-design","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, \u54cd\u5e94\u5f0f\u7f51\u7ad9, \u5b9e\u7528\u4f18\u5148, \u524d\u7aef\u5f00\u53d1, CSS\u6846\u67b6, \u4ece\u96f6\u5165\u95e8Tailwind, \u54cd\u5e94\u5f0f\u8bbe\u8ba1\u6280\u5de7"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts\/12374218","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts\/12374218\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/media?parent=12374218"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/tags?post=12374218"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_category?post=12374218"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}