{"id":12371429,"date":"2026-03-16T00:13:05","date_gmt":"2026-03-15T16:13:05","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e6%b7%b1%e5%85%a5%e8%a7%a3%e6%9e%90-tailwind-css%ef%bc%9a%e7%8e%b0%e4%bb%a3%e5%8c%96-web-%e5%bc%80%e5%8f%91%e7%9a%84%e6%a0%b8%e5%bf%83%e5%b7%a5%e5%85%b7%e4%b8%8e%e5%ae%9e%e8%b7%b5%e6%8c%87%e5%8d%97\/"},"modified":"2026-03-16T00:20:13","modified_gmt":"2026-03-15T16:20:13","slug":"tailwind-css-modern-web-development-guide","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/fr\/knowledge\/website-building\/tailwind-css-modern-web-development-guide\/","title":{"rendered":"Analyse approfondie de Tailwind CSS : un outil essentiel et un guide pratique pour le d\u00e9veloppement web moderne."},"content":{"rendered":"\n

\u5728\u5f53\u4eca\u8ffd\u6c42\u9ad8\u6548\u4e0e\u7075\u6d3b\u7684\u524d\u7aef\u5f00\u53d1\u9886\u57df\uff0cTailwind CSS<\/code> \u5df2\u4ece\u4f17\u591a\u5de5\u5177\u4e2d\u8131\u9896\u800c\u51fa\uff0c\u6210\u4e3a\u4e00\u79cd\u5e7f\u53d7\u6b22\u8fce\u7684\u5b9e\u7528\u4f18\u5148\u7684 CSS \u6846\u67b6\u3002\u5b83\u6452\u5f03\u4e86\u4f20\u7edf\u7684\u9884\u5b9a\u4e49\u7ec4\u4ef6\u6a21\u5f0f\uff0c\u8f6c\u800c\u63d0\u4f9b\u4e00\u5957\u7ec6\u7c92\u5ea6\u7684\u3001\u539f\u5b50\u5316\u7684\u5de5\u5177\u7c7b\uff0c\u8ba9\u5f00\u53d1\u8005\u80fd\u591f\u76f4\u63a5\u5728 HTML \u4e2d\u5feb\u901f\u6784\u5efa\u4efb\u4f55\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u3002\u8fd9\u79cd\u201c\u529f\u80fd\u7c7b\u4f18\u5148\u201d\u7684\u65b9\u6cd5\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u5f00\u53d1\u8005\u7f16\u5199\u6837\u5f0f\u7684\u5de5\u4f5c\u6d41\uff0c\u5b9e\u73b0\u4e86\u6837\u5f0f\u4e0e\u7ed3\u6784\u7684\u7d27\u5bc6\u8026\u5408\uff0c\u540c\u65f6\u4fdd\u6301\u4e86\u6781\u9ad8\u7684\u53ef\u7ef4\u62a4\u6027\u548c\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n

Tailwind CSS \u7684\u6838\u5fc3\u8bbe\u8ba1\u54f2\u5b66<\/h2>\n\n\n\n

Tailwind CSS<\/code> \u7684\u6838\u5fc3\u7406\u5ff5\u662f\u201c\u5b9e\u7528\u4f18\u5148\u201d\u3002\u5b83\u4e0d\u63d0\u4f9b\u50cf\u6309\u94ae\u3001\u5361\u7247\u8fd9\u6837\u7684\u73b0\u6210\u7ec4\u4ef6\uff0c\u800c\u662f\u63d0\u4f9b\u4e86\u4e00\u6574\u5957\u7528\u4e8e\u8bbe\u7f6e\u95f4\u8ddd\u3001\u6392\u7248\u3001\u989c\u8272\u3001\u5e03\u5c40\u7b49\u5c5e\u6027\u7684\u539f\u5b50\u5316\u7c7b\u3002\u8fd9\u79cd\u8bbe\u8ba1\u7684\u4f18\u52bf\u5728\u4e8e\uff0c\u5b83\u8d4b\u4e88\u4e86\u5f00\u53d1\u8005\u65e0\u4e0e\u4f26\u6bd4\u7684\u6784\u5efa\u81ea\u7531\uff0c\u540c\u65f6\u907f\u514d\u4e86\u4f20\u7edf CSS \u4e2d\u5e38\u89c1\u7684\u6837\u5f0f\u51b2\u7a81\u548c\u7279\u5f02\u6027\u95ee\u9898\u3002<\/p>\n\n\n\n

\u5b9e\u7528\u7c7b\u4f18\u5148\u7684\u5de5\u4f5c\u6d41<\/h3>\n\n\n\n

\u5f00\u53d1\u8005\u901a\u8fc7\u7ec4\u5408\u4e0d\u540c\u7684\u5de5\u5177\u7c7b\u6765\u6784\u5efa\u754c\u9762\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\u53ef\u4ee5\u76f4\u63a5\u5728 HTML \u5143\u7d20\u4e0a\u4e66\u5199\uff1aclass=\"px-4 py-2 bg-blue-600 text-white rounded-lg\"<\/code>\u3002\u8fd9\u79cd\u65b9\u5f0f\u5c06\u6837\u5f0f\u51b3\u7b56\u76f4\u63a5\u5185\u8054\u5728\u6807\u8bb0\u4e2d\uff0c\u4f7f\u5f97\u7ec4\u4ef6\u7684\u6837\u5f0f\u5b8c\u5168\u81ea\u5305\u542b\uff0c\u6613\u4e8e\u7406\u89e3\u548c\u590d\u5236\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb Tailwind CSS \u5b8c\u5168\u6307\u5357\uff1a\u4ece\u96f6\u6784\u5efa\u73b0\u4ee3\u5316\u54cd\u5e94\u5f0f\u7f51\u7ad9<\/a>\u3002<\/p>\n\n\n\n\n

\u9ad8\u5ea6\u53ef\u5b9a\u5236\u6027<\/h3>\n\n\n\n

\u6846\u67b6\u7684\u51e0\u4e4e\u6240\u6709\u65b9\u9762\u90fd\u53ef\u4ee5\u901a\u8fc7\u4e00\u4e2a\u6838\u5fc3\u914d\u7f6e\u6587\u4ef6 tailwind.config.js<\/code> \u8fdb\u884c\u6df1\u5ea6\u5b9a\u5236\u3002\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u6269\u5c55\u6216\u8986\u76d6\u9ed8\u8ba4\u7684\u4e3b\u9898\u989c\u8272\u3001\u5b57\u4f53\u3001\u65ad\u70b9\u3001\u95f4\u8ddd\u6bd4\u4f8b\u7b49\u3002\u8fd9\u610f\u5473\u7740 Tailwind CSS<\/code> \u53ef\u4ee5\u5b8c\u7f8e\u9002\u914d\u4efb\u4f55\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u800c\u4e0d\u4ec5\u4ec5\u662f\u5176\u9ed8\u8ba4\u5916\u89c2\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

\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e0e\u72b6\u6001\u53d8\u4f53<\/h3>\n\n\n\n

Tailwind CSS<\/code> \u5185\u7f6e\u4e86\u5f3a\u5927\u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u5de5\u5177\u3002\u901a\u8fc7\u4e3a\u5de5\u5177\u7c7b\u6dfb\u52a0\u524d\u7f00\uff0c\u5982 md:<\/code>\u3001lg:<\/code>\uff0c\u53ef\u4ee5\u8f7b\u677e\u521b\u5efa\u54cd\u5e94\u5f0f\u5e03\u5c40\u3002\u540c\u65f6\uff0c\u5b83\u8fd8\u652f\u6301\u72b6\u6001\u53d8\u4f53\uff0c\u5982 hover:<\/code>\u3001focus:<\/code>\u3001active:<\/code>\uff0c\u4f7f\u5f97\u5904\u7406\u4ea4\u4e92\u72b6\u6001\u53d8\u5f97\u5f02\u5e38\u7b80\u5355\u3002<\/p>\n\n\n\n

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

\u5c06 Tailwind CSS<\/code> \u96c6\u6210\u5230\u9879\u76ee\u4e2d\u975e\u5e38\u76f4\u63a5\uff0c\u5b83\u652f\u6301\u591a\u79cd\u6784\u5efa\u5de5\u5177\u548c\u6846\u67b6\u3002<\/p>\n\n\n\n

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

\u6700\u5e38\u7528\u7684\u65b9\u5f0f\u662f\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5\u3002\u9996\u5148\u521d\u59cb\u5316\u9879\u76ee\u5e76\u5b89\u88c5\u4f9d\u8d56\uff1a<\/p>\n\n\n\n

npm install -D tailwindcss\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u8fd9\u4f1a\u5b89\u88c5 Tailwind CSS<\/code> \u5e76\u751f\u6210\u4e00\u4e2a\u9ed8\u8ba4\u7684\u914d\u7f6e\u6587\u4ef6 tailwind.config.js<\/code>\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u662f\u4ec0\u4e48\u8ba9 Tailwind CSS \u6210\u4e3a\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u7684\u9996\u9009\u6846\u67b6<\/a>\u3002<\/p>\n\n\n\n\n
\u914d\u7f6e\u6a21\u677f\u8def\u5f84<\/h3>\n\n\n\n
\u63a5\u4e0b\u6765\uff0c\u9700\u8981\u5728 tailwind.config.js<\/code> \u6587\u4ef6\u4e2d\u914d\u7f6e\u9879\u76ee\u6a21\u677f\u6587\u4ef6\u7684\u8def\u5f84\uff0c\u4ee5\u786e\u4fdd\u5de5\u5177\u80fd\u626b\u63cf\u5230\u6240\u6709\u4f7f\u7528 Tailwind<\/code> \u7c7b\u7684\u6587\u4ef6\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,ts,jsx,tsx}"],\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
\u7136\u540e\uff0c\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\uff08\u4f8b\u5982 src\/styles.css<\/code>\uff09\u4e2d\uff0c\u901a\u8fc7 @tailwind<\/code> \u6307\u4ee4\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
\u6700\u540e\uff0c\u8fd0\u884c\u6784\u5efa\u8fc7\u7a0b\uff08\u5982\u4f7f\u7528 npm run dev<\/code>\uff09\u6765\u751f\u6210\u6700\u7ec8\u7684 CSS \u6587\u4ef6\u3002\u5bf9\u4e8e\u50cf React\u3001Vue \u6216 Next.js \u8fd9\u6837\u7684\u6846\u67b6\uff0c\u901a\u5e38\u6709\u76f8\u5e94\u7684\u5b98\u65b9\u6307\u5357\u6765\u7b80\u5316\u96c6\u6210\u8fc7\u7a0b\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
\u6838\u5fc3\u529f\u80fd\u4e0e\u9ad8\u7ea7\u7279\u6027<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u4e0d\u4ec5\u4ec5\u662f\u4e00\u5957\u7c7b\u540d\uff0c\u5b83\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u5f3a\u5927\u7684\u529f\u80fd\u6765\u652f\u6301\u590d\u6742\u7684\u751f\u4ea7\u7ea7\u5e94\u7528\u5f00\u53d1\u3002<\/p>\n\n\n\n
\u5f3a\u5927\u7684\u54cd\u5e94\u5f0f\u65ad\u70b9\u7cfb\u7edf<\/h3>\n\n\n\n
\u5176\u54cd\u5e94\u5f0f\u7cfb\u7edf\u57fa\u4e8e\u79fb\u52a8\u4f18\u5148\u7684\u539f\u5219\u3002\u5de5\u5177\u7c7b\u9ed8\u8ba4\u5e94\u7528\u4e8e\u6240\u6709\u5c4f\u5e55\u5c3a\u5bf8\uff0c\u800c\u5e26\u524d\u7f00\u7684\u7c7b\uff08\u5982 md:flex<\/code>\uff09\u5219\u4f1a\u5728\u6307\u5b9a\u65ad\u70b9\u53ca\u4ee5\u4e0a\u7684\u5c4f\u5e55\u751f\u6548\u3002\u65ad\u70b9\u503c\u53ef\u4ee5\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u8f7b\u677e\u81ea\u5b9a\u4e49\u3002<\/p>\n\n\n\n
\u6df1\u8272\u6a21\u5f0f\u652f\u6301<\/h3>\n\n\n\n
\u901a\u8fc7\u7b80\u5355\u7684 dark:<\/code> \u53d8\u4f53\u524d\u7f00\uff0c\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\u6df1\u8272\u6a21\u5f0f\u3002\u9996\u5148\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u542f\u7528\uff1a<\/p>\n
\u63a8\u8350\u9605\u8bfb \u5168\u9762\u638c\u63e1 Tailwind CSS\uff1a\u4ece\u57fa\u7840\u5230\u5b9e\u6218\u7684\u73b0\u4ee3 CSS \u6846\u67b6\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  darkMode: 'class', \/\/ \u6216 'media'\n  \/\/ ...\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u901a\u8fc7\u6dfb\u52a0\u7c7b\u6765\u63a7\u5236\u6df1\u8272\u6837\u5f0f\uff1a<\/p>\n\n\n\n
<div class="bg-white dark:bg-gray-800">\n  <h1 class="text-gray-900 dark:text-white">\u6807\u9898<\/h1>\n<\/div><\/code><\/pre>\n\n\n\n
\u4f7f\u7528 @apply \u63d0\u53d6\u7ec4\u4ef6<\/h3>\n\n\n\n
\u4e3a\u4e86\u907f\u514d\u5728 HTML \u4e2d\u91cd\u590d\u4e66\u5199\u8fc7\u957f\u7684\u7c7b\u5217\u8868\uff0c\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u5c06\u5e38\u7528\u7684\u5de5\u5177\u7c7b\u63d0\u53d6\u4e3a\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6\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
.btn-primary {\n  @apply px-4 py-2 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50;\n}<\/code><\/pre>\n\n\n\n
\u4e30\u5bcc\u7684\u63d2\u4ef6\u751f\u6001\u7cfb\u7edf<\/h3>\n\n\n\n
\u793e\u533a\u548c\u5b98\u65b9\u63d0\u4f9b\u4e86\u5927\u91cf\u63d2\u4ef6\uff0c\u7528\u4e8e\u6269\u5c55\u529f\u80fd\uff0c\u5982\u8868\u5355\u6837\u5f0f (@tailwindcss\/forms<\/code>)\u3001\u6392\u7248 (@tailwindcss\/typography<\/code>)\u3001\u65e0\u969c\u788d\u652f\u6301\u7b49\uff0c\u6781\u5927\u5730\u4e30\u5bcc\u4e86\u6846\u67b6\u7684\u80fd\u529b\u8fb9\u754c\u3002<\/p>\n\n\n\n
\u6700\u4f73\u5b9e\u8df5\u4e0e\u6027\u80fd\u4f18\u5316<\/h2>\n\n\n\n
\u6b63\u786e\u4f7f\u7528 Tailwind CSS<\/code> \u9700\u8981\u9075\u5faa\u4e00\u4e9b\u6700\u4f73\u5b9e\u8df5\uff0c\u4ee5\u786e\u4fdd\u9879\u76ee\u957f\u671f\u53ef\u7ef4\u62a4\u4e14\u6027\u80fd\u4f18\u5f02\u3002<\/p>\n\n\n\n
\u4fdd\u6301 HTML \u7684\u53ef\u8bfb\u6027<\/h3>\n\n\n\n
\u5f53\u5143\u7d20\u4e0a\u7684\u7c7b\u540d\u8fc7\u591a\u65f6\uff0c\u4f1a\u5f71\u54cd\u53ef\u8bfb\u6027\u3002\u5efa\u8bae\u5c06\u957f\u7c7b\u5217\u8868\u62c6\u5206\u6210\u591a\u884c\uff0c\u5e76\u6309\u7167\u4e00\u5b9a\u7684\u903b\u8f91\uff08\u5982\u5e03\u5c40\u3001\u5c3a\u5bf8\u3001\u989c\u8272\u3001\u72b6\u6001\uff09\u8fdb\u884c\u5206\u7ec4\u6392\u5e8f\u3002\u8bb8\u591a\u7f16\u8f91\u5668\u63d2\u4ef6\u53ef\u4ee5\u8f85\u52a9\u683c\u5f0f\u5316\u3002<\/p>\n\n\n\n
<button class="\n  px-6 py-3\n  bg-gradient-to-r from-blue-500 to-purple-600\n  text-white font-bold\n  rounded-full shadow-lg\n  hover:shadow-xl hover:scale-105\n  transition-all duration-300\n  focus:outline-none focus:ring-4 focus:ring-purple-300\n">\n  \u70b9\u51fb\u6211\n<\/button><\/code><\/pre>\n\n\n\n
\u5229\u7528 Purge \u4f18\u5316\u751f\u4ea7\u4f53\u79ef<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b\u4f1a\u751f\u6210\u4e00\u4e2a\u5305\u542b\u6240\u6709\u53ef\u80fd\u7c7b\u7684\u5e9e\u5927 CSS \u6587\u4ef6\u3002\u5bf9\u4e8e\u751f\u4ea7\u73af\u5883\uff0c\u5fc5\u987b\u4f7f\u7528\u5176\u5185\u7f6e\u7684 PurgeCSS \u529f\u80fd\uff08\u5728 v3.0 \u53ca\u4ee5\u4e0a\u7248\u672c\u4e2d\u79f0\u4e3a\u201c\u5185\u5bb9\u626b\u63cf\u201d\uff09\u6765\u79fb\u9664\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002\u8fd9\u5df2\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u7684 content<\/code> \u90e8\u5206\u914d\u7f6e\u597d\uff0c\u6784\u5efa\u5de5\u5177\uff08\u5982 Vite\u3001Webpack\uff09\u5728\u751f\u4ea7\u6784\u5efa\u65f6\u4f1a\u81ea\u52a8\u8fdb\u884c\u6811\u6447\u4f18\u5316\u3002<\/p>\n\n\n\n
\u4e0e\u7ec4\u4ef6\u6846\u67b6\u7ed3\u5408<\/h3>\n\n\n\n
\u5728 React\u3001Vue \u6216 Svelte \u7b49\u7ec4\u4ef6\u6846\u67b6\u4e2d\uff0cTailwind CSS<\/code> \u5927\u653e\u5f02\u5f69\u3002\u53ef\u4ee5\u5c06\u6837\u5f0f\u7c7b\u4e0e\u7ec4\u4ef6\u903b\u8f91\u5c01\u88c5\u5728\u4e00\u8d77\uff0c\u521b\u5efa\u51fa\u9ad8\u5ea6\u53ef\u590d\u7528\u4e14\u6837\u5f0f\u81ea\u5305\u542b\u7684 UI \u7ec4\u4ef6\u3002\u8fd9\u5b8c\u7f8e\u8df5\u884c\u4e86\u5176\u201c\u5b9e\u7528\u4f18\u5148\u201d\u7684\u7406\u5ff5\u3002<\/p>\n\n\n\n
\u5efa\u7acb\u8bbe\u8ba1\u4ee4\u724c\u7ea6\u675f<\/h3>\n\n\n\n
\u867d\u7136 Tailwind CSS<\/code> \u5f88\u7075\u6d3b\uff0c\u4f46\u4e3a\u4e86\u4fdd\u6301\u8bbe\u8ba1\u4e00\u81f4\u6027\uff0c\u56e2\u961f\u5e94\u57fa\u4e8e\u914d\u7f6e\u6587\u4ef6\u4e2d\u7684\u4e3b\u9898\u5b9a\u4e49\uff08\u5982\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u5927\u5c0f\uff09\u6765\u5efa\u7acb\u8bbe\u8ba1\u4ee4\u724c\u7ea6\u675f\uff0c\u907f\u514d\u968f\u610f\u4f7f\u7528\u4efb\u610f\u503c\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u901a\u8fc7\u5176\u72ec\u7279\u7684\u5b9e\u7528\u7c7b\u4f18\u5148\u8303\u5f0f\uff0c\u4e3a\u73b0\u4ee3 Web \u5f00\u53d1\u5e26\u6765\u4e86\u9769\u547d\u6027\u7684\u6548\u7387\u63d0\u5347\u548c\u7075\u6d3b\u6027\u3002\u5b83\u901a\u8fc7\u7ec6\u7c92\u5ea6\u7684\u5de5\u5177\u7c7b\u3001\u9ad8\u5ea6\u7684\u53ef\u5b9a\u5236\u6027\u3001\u5185\u7f6e\u7684\u54cd\u5e94\u5f0f\u4e0e\u72b6\u6001\u652f\u6301\uff0c\u4f7f\u5f97\u6784\u5efa\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\u53d8\u5f97\u524d\u6240\u672a\u6709\u7684\u9ad8\u6548\u3002\u7ed3\u5408\u5176\u51fa\u8272\u7684\u751f\u4ea7\u73af\u5883\u4f18\u5316\u80fd\u529b\u4ee5\u53ca\u4e0e\u4e3b\u6d41\u524d\u7aef\u6846\u67b6\u7684\u65e0\u7f1d\u96c6\u6210\uff0cTailwind CSS<\/code> \u5df2\u6210\u4e3a\u8bb8\u591a\u5f00\u53d1\u56e2\u961f\u6784\u5efa\u73b0\u4ee3\u5316\u3001\u9ad8\u6027\u80fd\u3001\u53ef\u7ef4\u62a4\u7528\u6237\u754c\u9762\u7684\u9996\u9009\u5de5\u5177\u3002\u638c\u63e1\u5176\u6838\u5fc3\u54f2\u5b66\u5e76\u9075\u5faa\u6700\u4f73\u5b9e\u8df5\uff0c\u5c06\u80fd\u5145\u5206\u53d1\u6325\u5176\u6f5c\u529b\uff0c\u663e\u8457\u63d0\u5347\u524d\u7aef\u5f00\u53d1\u4f53\u9a8c\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
\u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b\uff0c\u4e3a\u4e86\u63d0\u4f9b\u6240\u6709\u53ef\u80fd\u7684\u5de5\u5177\u7c7b\uff0c\u751f\u6210\u7684 CSS \u6587\u4ef6\u786e\u5b9e\u4f1a\u6bd4\u8f83\u5927\u3002<\/p>\n\n\n\n
\u4f46\u5728\u751f\u4ea7\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0cTailwind CSS<\/code> \u4f1a\u901a\u8fc7\u626b\u63cf\u9879\u76ee\u6587\u4ef6\u4e2d\u7684\u7c7b\u540d\uff0c\u667a\u80fd\u5730\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u901a\u5e38\u88ab\u79f0\u4e3a\u201c\u6811\u6447\u201d\u6216\u201c\u51c0\u5316\u201d\uff0c\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u53ea\u6709\u51e0 KB \u5230\u51e0\u5341 KB\uff0c\u975e\u5e38\u7cbe\u7b80\u3002<\/p>\n\n\n\n
\u5728 HTML \u4e2d\u5199\u8fd9\u4e48\u591a\u7c7b\u540d\uff0c\u4f1a\u4e0d\u4f1a\u4f7f\u4ee3\u7801\u96be\u4ee5\u7ef4\u62a4\uff1f<\/h3>\n\n\n\n
\u8fd9\u53d6\u51b3\u4e8e\u56e2\u961f\u7684\u5b9e\u8df5\u3002\u539f\u5b50\u5316\u7c7b\u540d\u8d77\u521d\u53ef\u80fd\u663e\u5f97\u5197\u957f\uff0c\u4f46\u5b83\u4eec\u4f7f\u6837\u5f0f\u5b8c\u5168\u672c\u5730\u5316\uff0c\u6d88\u9664\u4e86\u5168\u5c40 CSS \u7684\u6837\u5f0f\u51b2\u7a81\u98ce\u9669\u3002<\/p>\n\n\n\n
\u901a\u8fc7\u5c06\u7c7b\u540d\u6309\u903b\u8f91\u5206\u7ec4\u3001\u591a\u884c\u4e66\u5199\uff0c\u5e76\u5229\u7528\u7ec4\u4ef6\u6846\u67b6\u8fdb\u884c\u5c01\u88c5\uff0c\u53ef\u4ee5\u4fdd\u6301\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u3002\u8bb8\u591a\u5f00\u53d1\u8005\u8ba4\u4e3a\uff0c\u8fd9\u79cd\u660e\u786e\u7684\u3001\u81ea\u5305\u542b\u7684\u6837\u5f0f\u65b9\u5f0f\uff0c\u6bd4\u5728 CSS \u6587\u4ef6\u548c HTML \u6587\u4ef6\u4e4b\u95f4\u6765\u56de\u8df3\u8f6c\u66f4\u5bb9\u6613\u7ef4\u62a4\u3002<\/p>\n\n\n\n
Tailwind CSS \u662f\u5426\u9002\u5408\u4e0e UI \u7ec4\u4ef6\u5e93\u4e00\u8d77\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u672c\u8eab\u662f\u4e00\u4e2a\u5e95\u5c42\u5de5\u5177\uff0c\u5b83\u5e76\u4e0d\u76f4\u63a5\u63d0\u4f9b\u73b0\u6210\u7684 UI \u7ec4\u4ef6\u3002\u56e0\u6b64\uff0c\u5b83\u975e\u5e38\u9002\u5408\u7528\u6765\u6784\u5efa\u81ea\u5b9a\u4e49\u7684\u3001\u4e0e\u54c1\u724c\u9ad8\u5ea6\u4e00\u81f4\u7684 UI \u7ec4\u4ef6\u5e93\u3002<\/p>\n\n\n\n
\u5e02\u9762\u4e0a\u4e5f\u6709\u4e00\u4e9b\u57fa\u4e8e Tailwind CSS<\/code> \u6784\u5efa\u7684\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\uff08\u5982 Headless UI, DaisyUI\uff09\uff0c\u5b83\u4eec\u63d0\u4f9b\u4e86\u65e0\u6837\u5f0f\u6216\u9884\u6837\u5f0f\u7684\u7ec4\u4ef6\uff0c\u4f60\u53ef\u4ee5\u7528 Tailwind<\/code> \u7684\u7c7b\u540d\u8f7b\u677e\u5730\u8fdb\u884c\u81ea\u5b9a\u4e49\u548c\u8986\u76d6\u3002<\/p>\n\n\n\n
\u5982\u4f55\u81ea\u5b9a\u4e49\u9ed8\u8ba4\u7684\u4e3b\u9898\u989c\u8272\u548c\u95f4\u8ddd\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\u5b9e\u73b0\u3002<\/p>\n\n\n\n
\u4f60\u53ef\u4ee5\u5728\u914d\u7f6e\u5bf9\u8c61\u7684 theme.extend<\/code> \u90e8\u5206\u6dfb\u52a0\u65b0\u7684\u503c\u6765\u6269\u5c55\u9ed8\u8ba4\u4e3b\u9898\uff0c\u4e5f\u53ef\u4ee5\u5728 theme<\/code> \u90e8\u5206\u76f4\u63a5\u8986\u76d6\u9ed8\u8ba4\u503c\u3002\u4f8b\u5982\uff0c\u8981\u6dfb\u52a0\u4e00\u79cd\u54c1\u724c\u8272\uff0c\u53ef\u4ee5\u8fd9\u6837\u5199\uff1atheme: { extend: { colors: { \u2018brand\u2019: \u2018#0f766e\u2019 } } }<\/code>\u3002\u4fee\u6539\u540e\uff0c\u5c31\u53ef\u4ee5\u4f7f\u7528\u50cf bg-brand<\/code> \u8fd9\u6837\u7684\u5de5\u5177\u7c7b\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article pr\u00e9sente de mani\u00e8re syst\u00e9matique le framework CSS Tailwind CSS, qui privil\u00e9gie l\u2019utilit\u00e9 et la flexibilit\u00e9 dans son approche. Il se distingue des frameworks traditionnels en ne proposant pas de composants pr\u00e9d\u00e9finis, mais plut\u00f4t des classes fonctionnelles \u201catomis\u00e9es\u201d permettant aux d\u00e9veloppeurs de construire rapidement des designs personnalis\u00e9s directement dans le HTML. L\u2019article explique sa philosophie de conception fondamentale, sa grande personnalisabilit\u00e9, ainsi que son syst\u00e8me int\u00e9gr\u00e9 de r\u00e9activit\u00e9 et de variations de style en fonction des conditions d'affichage. Il fournit \u00e9galement une guide pratique complet allant de l\u2019installation et de la configuration \u00e0 l\u2019utilisation des fonctionnalit\u00e9s avanc\u00e9es de Tailwind CSS, afin d\u2019am\u00e9liorer l\u2019efficacit\u00e9 et la flexibilit\u00e9 du d\u00e9veloppement front-end.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2256,2329,2343,367,2271],"knowledge_category":[281],"class_list":["post-12371429","knowledge_post","type-knowledge_post","status-publish","hentry","tag-tailwind-css","tag-frontend-frameworks","tag-atomic-css","tag-responsive-design","tag-practical-first","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS,\u5b9e\u7528\u4f18\u5148CSS\u6846\u67b6,\u539f\u5b50\u5316CSS,\u54cd\u5e94\u5f0f\u8bbe\u8ba1,\u524d\u7aef\u5f00\u53d1\u5de5\u5177,Web\u5f00\u53d1\u5b9e\u8df5,Tailwind\u914d\u7f6e\u6307\u5357,Tailwind CSS\u6df1\u8272\u6a21\u5f0f"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_posts\/12371429","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_posts\/12371429\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/media?parent=12371429"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/tags?post=12371429"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_category?post=12371429"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}