{"id":12364670,"date":"2026-03-13T04:47:48","date_gmt":"2026-03-12T20:47:48","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e5%85%a8%e9%9d%a2%e6%8e%8c%e6%8f%a1-tailwind-css%ef%bc%9a%e4%bb%8e%e9%9b%b6%e6%9e%84%e5%bb%ba%e7%8e%b0%e4%bb%a3%e5%93%8d%e5%ba%94%e5%bc%8f%e7%bd%91%e9%a1%b5%e7%9a%84%e5%ae%9e%e7%94%a8%e6%8c%87\/"},"modified":"2026-03-13T04:57:31","modified_gmt":"2026-03-12T20:57:31","slug":"master-tailwind-css-build-modern-responsive-websites-guide","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/fr\/knowledge\/website-building\/master-tailwind-css-build-modern-responsive-websites-guide\/","title":{"rendered":"Ma\u00eetrisez compl\u00e8tement Tailwind CSS : un guide pratique pour cr\u00e9er des pages web modernes et r\u00e9actives \u00e0 partir de z\u00e9ro."},"content":{"rendered":"\n

\u5728\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u901a\u8fc7\u539f\u5b50\u5316\u3001\u5b9e\u7528\u81f3\u4e0a\u7684 CSS \u6846\u67b6\u6765\u6784\u5efa\u7528\u6237\u754c\u9762\u5df2\u6210\u4e3a\u4e00\u79cd\u9ad8\u6548\u8303\u5f0f\u3002\u800c Tailwind CSS<\/code> \u6b63\u662f\u8fd9\u4e00\u8303\u5f0f\u7684\u6770\u51fa\u4ee3\u8868\u3002\u5b83\u4e0d\u662f\u4e00\u4e2a\u9884\u8bbe\u7ec4\u4ef6\u5e93\uff0c\u800c\u662f\u4e00\u4e2a\u5de5\u5177\u96c6\uff0c\u63d0\u4f9b\u4e86\u5927\u91cf\u53ef\u7ec4\u5408\u7684\u4f4e\u7ea7\u5b9e\u7528\u7c7b\uff0c\u8ba9\u4f60\u76f4\u63a5\u5728 HTML\uff08\u6216 JSX\u3001Vue \u6a21\u677f\u7b49\uff09\u4e2d\u5feb\u901f\u6784\u5efa\u51fa\u4efb\u4f55\u8bbe\u8ba1\u3002\u672c\u6587\u5c06\u4ece\u6838\u5fc3\u6982\u5ff5\u5165\u624b\uff0c\u9010\u6b65\u8bb2\u89e3\u5982\u4f55\u5b89\u88c5\u3001\u914d\u7f6e\u3001\u4f7f\u7528 Tailwind CSS<\/code>\uff0c\u5e76\u6784\u5efa\u4e00\u4e2a\u54cd\u5e94\u5f0f\u7f51\u9875\uff0c\u52a9\u4f60\u5f7b\u5e95\u638c\u63e1\u8fd9\u4e00\u5f3a\u5927\u7684\u5de5\u5177\u3002<\/p>\n\n\n\n

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

\u8981\u7406\u89e3 Tailwind CSS<\/code>\uff0c\u9996\u5148\u5fc5\u987b\u6452\u5f03\u4f20\u7edf CSS \u6216 UI \u6846\u67b6\u7684\u601d\u7ef4\u5b9a\u5f0f\u3002\u5176\u6838\u5fc3\u7406\u5ff5\u662f\u201c\u5b9e\u7528\u4f18\u5148\u201d\uff08Utility-First\uff09\uff0c\u5373\u901a\u8fc7\u7ec4\u5408\u5927\u91cf\u5355\u4e00\u804c\u8d23\u7684 CSS \u7c7b\u6765\u6784\u5efa\u754c\u9762\uff0c\u800c\u4e0d\u662f\u4e3a\u6bcf\u4e2a\u7ec4\u4ef6\u7f16\u5199\u8bed\u4e49\u5316\u7684 CSS \u6216\u4f7f\u7528\u9884\u5b9a\u4e49\u7684\u7ec4\u4ef6\u3002<\/p>\n\n\n\n

\u5b9e\u7528\u4f18\u5148\u7684\u5de5\u4f5c\u539f\u7406<\/h3>\n\n\n\n

\u5b9e\u7528\u4f18\u5148\u6846\u67b6\uff0c\u5982 Tailwind CSS<\/code>\uff0c\u4e3a\u6bcf\u4e00\u4e2a CSS \u5c5e\u6027\u90fd\u63d0\u4f9b\u4e86\u5bf9\u5e94\u7684\u5b9e\u7528\u7c7b\u3002\u4f8b\u5982\uff0c.mt-4<\/code> \u5bf9\u5e94 margin-top: 1rem;<\/code>\uff0c.text-blue-500<\/code> \u5bf9\u5e94 color: #3b82f6;<\/code>\u3002\u4f60\u901a\u8fc7\u7ec4\u5408\u8fd9\u4e9b\u7c7b\u6765\u201c\u63cf\u8ff0\u201d\u5143\u7d20\u7684\u6837\u5f0f\uff0c\u800c\u4e0d\u662f\u5728 CSS \u6587\u4ef6\u4e2d\u201c\u547d\u540d\u201d\u5b83\u4eec\u3002\u8fd9\u79cd\u65b9\u5f0f\u6781\u5927\u5730\u51cf\u5c11\u4e86\u5728 CSS \u548c HTML \u6587\u4ef6\u4e4b\u95f4\u5207\u6362\u7684\u8ba4\u77e5\u8d1f\u62c5\uff0c\u5e76\u4f7f\u5f97\u6837\u5f0f\u4fee\u6539\u53d8\u5f97\u6781\u5176\u76f4\u89c2\u548c\u5c40\u90e8\u5316\u3002<\/p>\n\n\n\n

\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e0e\u65ad\u70b9<\/h3>\n\n\n\n

Tailwind CSS<\/code> \u5185\u7f6e\u4e86\u79fb\u52a8\u4f18\u5148\u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u7cfb\u7edf\u3002\u5176\u65ad\u70b9\u524d\u7f00\u5982 sm:<\/code>\u3001md:<\/code>\u3001lg:<\/code>\u3001xl:<\/code>\u30012xl:<\/code> \u5141\u8bb8\u4f60\u9488\u5bf9\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u5e94\u7528\u4e0d\u540c\u7684\u5b9e\u7528\u7c7b\u3002\u4f8b\u5982\uff0ctext-center md:text-left<\/code> \u8868\u793a\u5728\u79fb\u52a8\u7aef\u5c45\u4e2d\u6587\u672c\uff0c\u4f46\u5728\u4e2d\u7b49\u53ca\u4ee5\u4e0a\u5c4f\u5e55\u5c3a\u5bf8\u65f6\u5de6\u5bf9\u9f50\u3002\u8fd9\u79cd\u58f0\u660e\u5f0f\u7684\u65b9\u6cd5\u8ba9\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u53d8\u5f97\u975e\u5e38\u7b80\u5355\u3002<\/p>\n\n\n\n

\u60ac\u505c\u3001\u7126\u70b9\u4e0e\u5176\u4ed6\u72b6\u6001<\/h3>\n\n\n\n

\u9664\u4e86\u54cd\u5e94\u5f0f\uff0cTailwind CSS<\/code> \u8fd8\u63d0\u4f9b\u4e86\u4e30\u5bcc\u4e14\u4e00\u81f4\u7684\u72b6\u6001\u53d8\u4f53\u524d\u7f00\uff0c\u5982 hover:<\/code>\u3001focus:<\/code>\u3001active:<\/code>\u3001disabled:<\/code> \u7b49\u3002\u4f60\u53ef\u4ee5\u8f7b\u677e\u5730\u4e3a\u5143\u7d20\u6dfb\u52a0\u4ea4\u4e92\u72b6\u6001\u6837\u5f0f\uff0c\u4f8b\u5982 bg-blue-500 hover:bg-blue-700<\/code>\u3002\u8fd9\u79cd\u8bbe\u8ba1\u786e\u4fdd\u4e86\u72b6\u6001\u6837\u5f0f\u4e0e\u57fa\u7840\u6837\u5f0f\u7684\u5206\u79bb\u4e0e\u53ef\u63a7\u6027\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

\u4ece\u96f6\u5f00\u59cb\u914d\u7f6e\u4e0e\u5b89\u88c5<\/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\u4e0e PostCSS \u96c6\u6210\uff0c\u8fd9\u80fd\u83b7\u5f97\u6700\u4f73\u7684\u6027\u80fd\u548c\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n

\u521d\u59cb\u5316\u9879\u76ee\u4e0e\u5b89\u88c5\u4f9d\u8d56<\/h3>\n\n\n\n

\u9996\u5148\uff0c\u786e\u4fdd\u4f60\u6709\u4e00\u4e2a Node.js \u9879\u76ee\u3002\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\uff0c\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5 Tailwind CSS<\/code> \u53ca\u5176\u4f9d\u8d56\u3002<\/p>\n\n\n\n

npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init -p<\/code><\/pre>\n\n\n\n
\u4e0a\u8ff0\u547d\u4ee4\u4f1a\u5b89\u88c5\u5fc5\u8981\u7684\u5305\uff0c\u5e76\u751f\u6210\u4e24\u4e2a\u914d\u7f6e\u6587\u4ef6\uff1atailwind.config.js<\/code> \u548c postcss.config.js<\/code>\u3002<\/p>\n\n\n\n
\u914d\u7f6e\u6587\u4ef6\u8be6\u89e3<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u662f Tailwind CSS<\/code> \u7684\u6838\u5fc3\u914d\u7f6e\u6587\u4ef6\u3002\u5728\u8fd9\u91cc\uff0c\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,ts,jsx,tsx,vue}"],\n  theme: {\n    extend: {\n      colors: {\n        'brand-primary': '#1d4ed8',\n      },\n      fontFamily: {\n        'sans': ['Inter', 'system-ui', 'sans-serif'],\n      },\n    },\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u5173\u952e\u7684 content<\/code> \u9009\u9879\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\u8fdb\u884c Tree Shaking\uff0c\u79fb\u9664\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002\u8fd9\u662f Tailwind CSS<\/code> \u4fdd\u6301\u6700\u7ec8 CSS \u6587\u4ef6\u7cbe\u7b80\u7684\u6838\u5fc3\u673a\u5236\u3002<\/p>\n\n\n\n
\u5f15\u5165\u57fa\u7840\u6837\u5f0f<\/h3>\n\n\n\n
\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\uff08\u5982 src\/styles.css<\/code> \u6216 src\/index.css<\/code>\uff09\u4e2d\uff0c\u4f7f\u7528 @tailwind<\/code> \u6307\u4ee4\u6765\u6ce8\u5165 Tailwind<\/code> \u7684\u5404\u4e2a\u5c42\u6b21\u3002<\/p>\n\n\n\n
\/* src\/index.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u786e\u4fdd\u4f60\u7684\u6784\u5efa\u8fc7\u7a0b\uff08\u5982\u901a\u8fc7 Webpack\u3001Vite \u7b49\uff09\u80fd\u591f\u5904\u7406\u8fd9\u4e2a CSS \u6587\u4ef6\uff0c\u5e76\u5c06\u5176\u5f15\u5165\u5230\u4f60\u7684 HTML \u5165\u53e3\u6587\u4ef6\u4e2d\u3002<\/p>\n\n\n\n
\u6784\u5efa\u73b0\u4ee3\u54cd\u5e94\u5f0f\u7f51\u9875\u5b9e\u6218<\/h2>\n\n\n\n
\u8ba9\u6211\u4eec\u901a\u8fc7\u6784\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u535a\u5ba2\u6587\u7ae0\u5361\u7247\u7ec4\u4ef6\uff0c\u6765\u5b9e\u8df5 Tailwind CSS<\/code> \u7684\u6838\u5fc3\u529f\u80fd\u3002\u6211\u4eec\u7684\u76ee\u6807\u662f\u5b9e\u73b0\u4e00\u4e2a\u5728\u79fb\u52a8\u7aef\u5806\u53e0\u3001\u5728\u684c\u9762\u7aef\u5e76\u6392\u7684\u54cd\u5e94\u5f0f\u5e03\u5c40\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
\u642d\u5efa\u57fa\u7840\u5e03\u5c40\u4e0e\u5bb9\u5668<\/h3>\n\n\n\n
\u9996\u5148\uff0c\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u57fa\u7840\u7684 HTML \u7ed3\u6784\uff0c\u5e76\u4f7f\u7528 Tailwind<\/code> \u7684\u7c7b\u6765\u8bbe\u7f6e\u5bb9\u5668\u548c\u54cd\u5e94\u5f0f\u7f51\u683c\u3002<\/p>\n\n\n\n
<div class="min-h-screen bg-gray-50 p-4 md:p-8">\n  <div class="max-w-7xl mx-auto">\n    <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-8">\u6700\u65b0\u6587\u7ae0<\/h1>\n    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">\n      <!-- \u5361\u7247\u5c06\u5728\u8fd9\u91cc\u63d2\u5165 -->\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u8fd9\u91cc\uff0c\u6211\u4eec\u4f7f\u7528\u4e86 min-h-screen<\/code> \u786e\u4fdd\u6700\u5c0f\u9ad8\u5ea6\uff0cmax-w-7xl<\/code> \u548c mx-auto<\/code> \u5b9e\u73b0\u5c45\u4e2d\u5bb9\u5668\uff0c\u4ee5\u53ca grid<\/code> \u76f8\u5173\u7c7b\u521b\u5efa\u54cd\u5e94\u5f0f\u7f51\u683c\u3002<\/p>\n\n\n\n
\u8bbe\u8ba1\u5361\u7247\u7ec4\u4ef6<\/h3>\n\n\n\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5728\u7f51\u683c\u5185\u521b\u5efa\u5361\u7247\u7ec4\u4ef6\u3002\u8fd9\u4e2a\u5361\u7247\u5c06\u5305\u542b\u56fe\u7247\u3001\u6807\u9898\u3001\u63cf\u8ff0\u3001\u6807\u7b7e\u548c\u64cd\u4f5c\u6309\u94ae\u3002<\/p>\n\n\n\n
<div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">\n  <!-- \u56fe\u7247\u533a\u57df -->\n  <img class="w-full h-48 object-cover" src="https:\/\/picsum.photos\/400\/250" alt="\u6587\u7ae0\u914d\u56fe">\n\n<!-- \u5185\u5bb9\u533a\u57df -->\n  <div class="p-6">\n    <!-- \u6807\u7b7e -->\n    <div class="flex flex-wrap gap-2 mb-3">\n      <span class="inline-block bg-blue-100 text-blue-800 text-xs font-semibold px-3 py-1 rounded-full">\u524d\u7aef\u5f00\u53d1<\/span>\n      <span class="inline-block bg-green-100 text-green-800 text-xs font-semibold px-3 py-1 rounded-full">Tailwind CSS<\/span>\n    <\/div>\n\n<!-- \u6807\u9898\u4e0e\u63cf\u8ff0 -->\n    <h2 class="text-xl font-bold text-gray-900 mb-2">\u6df1\u5165\u7406\u89e3 Tailwind \u7684\u5b9e\u7528\u7c7b\u7cfb\u7edf<\/h2>\n    <p class="text-gray-600 mb-4">\n      \u672c\u6587\u5e26\u4f60\u6df1\u5165\u63a2\u8ba8 Tailwind CSS \u5b9e\u7528\u4f18\u5148\u54f2\u5b66\u80cc\u540e\u7684\u8bbe\u8ba1\u539f\u7406\uff0c\u4ee5\u53ca\u5982\u4f55\u9ad8\u6548\u7ec4\u5408\u7c7b\u540d\u6784\u5efa\u590d\u6742\u754c\u9762\u3002\n    <\/p>\n\n<!-- \u5e95\u90e8\u4fe1\u606f\u4e0e\u6309\u94ae -->\n    <div class="flex items-center justify-between">\n      <span class="text-sm text-gray-500">\u53d1\u5e03\u4e8e 2026\u5e743\u670815\u65e5<\/span>\n      <a href="#" class="inline-flex items-center text-brand-primary font-medium hover:text-blue-700">\n        \u9605\u8bfb\u5168\u6587\n        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">\n          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"\/>\n        <\/svg>\n      <\/a>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u5361\u7247\u7ec4\u4ef6\u7efc\u5408\u8fd0\u7528\u4e86\u80cc\u666f\u3001\u5706\u89d2\u3001\u9634\u5f71\u3001\u6392\u7248\u3001\u989c\u8272\u3001\u5f39\u6027\u5e03\u5c40\u3001\u60ac\u505c\u6548\u679c\u7b49\u591a\u79cd\u5b9e\u7528\u7c7b\uff0c\u5b8c\u5168\u65e0\u9700\u7f16\u5199\u4e00\u884c\u81ea\u5b9a\u4e49 CSS\u3002<\/p>\n\n\n\n
\u5b9e\u73b0\u6df1\u8272\u6a21\u5f0f\u9002\u914d<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u5bf9\u6df1\u8272\u6a21\u5f0f\u63d0\u4f9b\u4e86\u5f00\u7bb1\u5373\u7528\u7684\u652f\u6301\u3002\u9996\u5148\u5728 tailwind.config.js<\/code> \u7684 theme<\/code> \u4e2d\u8bbe\u7f6e darkMode: 'class'<\/code>\uff0c\u7136\u540e\u901a\u8fc7\u4e3a <html><\/code> \u6807\u7b7e\u6dfb\u52a0\u6216\u79fb\u9664 class=\u201ddark\u201d<\/code> \u6765\u5207\u6362\u3002<\/p>\n\n\n\n
\u4e3a\u4e0a\u8ff0\u5361\u7247\u6dfb\u52a0\u6df1\u8272\u6a21\u5f0f\u6837\u5f0f\uff1a<\/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
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-md dark:shadow-gray-900\/30 overflow-hidden hover:shadow-lg dark:hover:shadow-gray-900\/50 transition-shadow duration-300">\n  <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">...<\/h2>\n  <p class="text-gray-600 dark:text-gray-300 mb-4">...<\/p>\n<\/div><\/code><\/pre>\n\n\n\n
\u901a\u8fc7\u6dfb\u52a0 dark:<\/code> \u524d\u7f00\u7684\u7c7b\uff0c\u53ef\u4ee5\u4f18\u96c5\u5730\u4e3a\u6df1\u8272\u6a21\u5f0f\u5b9a\u4e49\u4e0d\u540c\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u9ad8\u7ea7\u6280\u5de7\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n\n\n\n
\u5f53\u9879\u76ee\u89c4\u6a21\u589e\u957f\u65f6\uff0c\u9075\u5faa\u4e00\u4e9b\u6700\u4f73\u5b9e\u8df5\u80fd\u8ba9\u4f60\u7684 Tailwind CSS<\/code> \u4ee3\u7801\u4fdd\u6301\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n\n\n\n
\u63d0\u53d6\u53ef\u590d\u7528\u7ec4\u4ef6\u7c7b<\/h3>\n\n\n\n
\u867d\u7136 Tailwind<\/code> \u9f13\u52b1\u4f7f\u7528\u5b9e\u7528\u7c7b\uff0c\u4f46\u5f53\u67d0\u4e2a\u590d\u6742\u7684\u6837\u5f0f\u7ec4\u5408\u5728\u9879\u76ee\u4e2d\u91cd\u590d\u51fa\u73b0\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5c06\u5176\u63d0\u53d6\u5230 CSS \u4e2d\u4f5c\u4e3a\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7c7b\u3002<\/p>\n\n\n\n
\/* \u5728\u60a8\u7684 CSS \u6587\u4ef6\u4e2d *\/\n.btn-primary {\n  @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\u5728 HTML \u4e2d\u76f4\u63a5\u4f7f\u7528 class=\u201dbtn-primary\u201d<\/code>\u3002\u6ce8\u610f\uff0c\u8fc7\u5ea6\u4f7f\u7528 @apply<\/code> \u4f1a\u56de\u5f52\u5230\u7f16\u5199 CSS \u7684\u8001\u8def\uff0c\u5e94\u8c28\u614e\u4f7f\u7528\u3002<\/p>\n\n\n\n
\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u4e0e\u63d2\u4ef6<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u4e2d\u7684 theme.extend<\/code> \u90e8\u5206\u662f\u4f60\u6269\u5c55\u8bbe\u8ba1\u4ee4\u724c\u7684\u5730\u65b9\u3002\u4f60\u53ef\u4ee5\u6dfb\u52a0\u81ea\u5b9a\u4e49\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u5927\u5c0f\u7b49\uff0c\u4fdd\u6301\u4e0e\u73b0\u6709\u8bbe\u8ba1\u7cfb\u7edf\u7684\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n
\u6b64\u5916\uff0c\u793e\u533a\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u63d2\u4ef6\uff0c\u5982 @tailwindcss\/typography<\/code>\uff08\u7528\u4e8e\u535a\u5ba2\u6587\u7ae0\u6837\u5f0f\uff09\u3001@tailwindcss\/forms<\/code>\uff08\u66f4\u597d\u7684\u8868\u5355\u6837\u5f0f\uff09\uff0c\u53ef\u4ee5\u901a\u8fc7 npm \u5b89\u88c5\u5e76\u5728\u914d\u7f6e\u6587\u4ef6\u7684 plugins<\/code> \u6570\u7ec4\u4e2d\u5f15\u5165\uff0c\u4ee5\u6269\u5c55\u6846\u67b6\u529f\u80fd\u3002<\/p>\n\n\n\n
\u6027\u80fd\u4f18\u5316\u4e0e\u751f\u4ea7\u6784\u5efa<\/h3>\n\n\n\n
\u786e\u4fdd content<\/code> \u914d\u7f6e\u6b63\u786e\u6db5\u76d6\u4e86\u6240\u6709\u53ef\u80fd\u4f7f\u7528 Tailwind<\/code> \u7c7b\u7684\u6587\u4ef6\u8def\u5f84\u3002\u5728\u6784\u5efa\u751f\u4ea7\u7248\u672c\u65f6\uff0cTailwind<\/code> \u4f1a\u8fd0\u884c\u4e00\u4e2a PurgeCSS \u8fc7\u7a0b\uff08\u73b0\u4ee3\u7248\u672c\u5df2\u5185\u7f6e\uff09\uff0c\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684\u7c7b\uff0c\u4ece\u800c\u751f\u6210\u6781\u5c0f\u7684 CSS \u6587\u4ef6\u3002\u901a\u5e38\uff0c\u4f7f\u7528\u9ed8\u8ba4\u914d\u7f6e\u5373\u53ef\u83b7\u5f97\u4f18\u5f02\u7684\u6027\u80fd\u8868\u73b0\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u901a\u8fc7\u5176\u52a1\u5b9e\u3001\u5b9e\u7528\u4f18\u5148\u7684\u65b9\u6cd5\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u6211\u4eec\u7f16\u5199 CSS \u7684\u65b9\u5f0f\u3002\u5b83\u901a\u8fc7\u63d0\u4f9b\u4e00\u7ec4\u53ef\u81ea\u7531\u7ec4\u5408\u7684\u4f4e\u7ea7\u6784\u5efa\u5757\uff0c\u8d4b\u4e88\u4e86\u5f00\u53d1\u8005\u6781\u9ad8\u7684\u8bbe\u8ba1\u5b9e\u73b0\u901f\u5ea6\u548c\u4e00\u81f4\u6027\u63a7\u5236\u529b\u3002\u4ece\u54cd\u5e94\u5f0f\u5e03\u5c40\u5230\u6df1\u8272\u6a21\u5f0f\uff0c\u4ece\u4ea4\u4e92\u72b6\u6001\u5230\u590d\u6742\u52a8\u753b\uff0cTailwind CSS<\/code> \u90fd\u80fd\u901a\u8fc7\u58f0\u660e\u5f0f\u7684\u7c7b\u540d\u7ec4\u5408\u4f18\u96c5\u5730\u89e3\u51b3\u3002\u638c\u63e1\u5176\u6838\u5fc3\u6982\u5ff5\u3001\u914d\u7f6e\u65b9\u6cd5\u548c\u6700\u4f73\u5b9e\u8df5\uff0c\u5c06\u4f7f\u4f60\u80fd\u591f\u9ad8\u6548\u3001\u81ea\u4fe1\u5730\u6784\u5efa\u73b0\u4ee3\u5316\u7684\u54cd\u5e94\u5f0f\u7528\u6237\u754c\u9762\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 \u7684\u6837\u5f0f\u6587\u4ef6\u4f1a\u4e0d\u4f1a\u5f88\u5927\uff1f<\/h3>\n\n\n\n
\u4e0d\u4f1a\u3002Tailwind CSS \u5728\u751f\u4ea7\u6784\u5efa\u8fc7\u7a0b\u4e2d\uff0c\u4f1a\u901a\u8fc7\u626b\u63cf\u4f60\u7684\u6a21\u677f\u6587\u4ef6\uff0c\u667a\u80fd\u5730\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684 CSS \u7c7b\u3002\u6700\u7ec8\u751f\u6210\u7684 CSS \u6587\u4ef6\u901a\u5e38\u53ea\u6709\u51e0 KB \u5230\u5341\u51e0 KB\uff0c\u6bd4\u8bb8\u591a\u4f20\u7edf\u624b\u5199\u6216\u4f7f\u7528 UI \u7ec4\u4ef6\u5e93\u7684\u9879\u76ee\u8981\u5c0f\u5f97\u591a\u3002<\/p>\n\n\n\n
\u5728 HTML \u4e2d\u5199\u8fd9\u4e48\u591a\u7c7b\u540d\uff0c\u4f1a\u4e0d\u4f1a\u5bfc\u81f4\u4ee3\u7801\u96be\u4ee5\u9605\u8bfb\uff1f<\/h3>\n\n\n\n
\u521d\u671f\u53ef\u80fd\u4f1a\u611f\u89c9\u5197\u957f\uff0c\u4f46\u4e60\u60ef\u540e\u4f1a\u53d1\u73b0\u5176\u903b\u8f91\u6e05\u6670\u3002\u826f\u597d\u7684\u7f16\u8f91\u5668\u548c\u63d2\u4ef6\uff08\u5982 Tailwind CSS IntelliSense\uff09\u80fd\u63d0\u4f9b\u81ea\u52a8\u8865\u5168\u548c\u8bed\u6cd5\u9ad8\u4eae\u3002\u5bf9\u4e8e\u590d\u6742\u7684\u7ec4\u4ef6\uff0c\u53ef\u4ee5\u901a\u8fc7\u62c6\u5206\u5230\u5355\u72ec\u7684\u6a21\u677f\u6587\u4ef6\u3001\u7ec4\u4ef6\u6587\u4ef6\uff08\u5982 Vue\/React \u7ec4\u4ef6\uff09\u6765\u7ba1\u7406\uff0c\u6216\u8005\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u8fdb\u884c\u9002\u5ea6\u7684\u62bd\u8c61\uff0c\u4ee5\u4fdd\u6301\u53ef\u8bfb\u6027\u3002<\/p>\n\n\n\n
Tailwind CSS \u662f\u5426\u9002\u5408\u4e0e React\u3001Vue \u7b49\u6846\u67b6\u4e00\u8d77\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
\u975e\u5e38\u9002\u5408\u3002Tailwind CSS \u662f\u6846\u67b6\u65e0\u5173\u7684\uff0c\u53ef\u4ee5\u65e0\u7f1d\u96c6\u6210\u5230 React\u3001Vue\u3001Angular\u3001Svelte \u7b49\u4efb\u4f55\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u6216\u9759\u6001\u7ad9\u70b9\u751f\u6210\u5668\u4e2d\u3002\u5176\u5728 JSX \u6216 Vue \u6a21\u677f\u4e2d\u7684\u4f7f\u7528\u65b9\u5f0f\u4e0e\u5728 HTML \u4e2d\u5b8c\u5168\u4e00\u81f4\uff0c\u662f\u6784\u5efa\u7ec4\u4ef6\u5316 UI \u7684\u7406\u60f3\u4f19\u4f34\u3002<\/p>\n\n\n\n
\u5982\u4f55\u8986\u76d6\u6216\u81ea\u5b9a\u4e49 Tailwind \u9ed8\u8ba4\u7684\u6837\u5f0f\uff1f<\/h3>\n\n\n\n
\u4e3b\u8981\u901a\u8fc7 tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\u8fdb\u884c\u81ea\u5b9a\u4e49\u3002\u4f60\u53ef\u4ee5\u5728 theme.extend<\/code> \u4e2d\u6dfb\u52a0\u65b0\u7684\u503c\u6765\u6269\u5c55\u9ed8\u8ba4\u4e3b\u9898\uff0c\u4e5f\u53ef\u4ee5\u5728 theme<\/code> \u4e2d\u76f4\u63a5\u8986\u76d6\u539f\u6709\u90e8\u5206\uff08\u4e0d\u90a3\u4e48\u63a8\u8350\uff09\u3002\u5bf9\u4e8e\u5355\u4e2a\u5143\u7d20\u7684\u7279\u6b8a\u6837\u5f0f\uff0c\u4f60\u59cb\u7ec8\u53ef\u4ee5\u7f16\u5199\u81ea\u5b9a\u4e49 CSS \u5e76\u4f7f\u7528\u66f4\u9ad8\u7684\u7279\u5f02\u6027\u9009\u62e9\u5668\u6765\u8986\u76d6\uff0c\u4f46 Tailwind \u7684\u5b9e\u7528\u7c7b\u672c\u8eab\u5df2\u7ecf\u63d0\u4f9b\u4e86\u6781\u9ad8\u7684\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n
Tailwind CSS \u5bf9\u6d4f\u89c8\u5668\u517c\u5bb9\u6027\u652f\u6301\u5982\u4f55\uff1f<\/h3>\n\n\n\n
Tailwind CSS \u7684\u5b9e\u7528\u7c7b\u5728\u751f\u6210 CSS \u65f6\uff0c\u4f1a\u901a\u8fc7 Autoprefixer \u81ea\u52a8\u6dfb\u52a0\u5fc5\u8981\u7684\u6d4f\u89c8\u5668\u524d\u7f00\uff0c\u4ee5\u652f\u6301\u73b0\u4ee3\u6d4f\u89c8\u5668\u548c\u4e3b\u6d41\u7248\u672c\u3002\u5bf9\u4e8e\u9700\u8981\u7279\u5b9a\u517c\u5bb9\u6027\u7684 CSS \u7279\u6027\uff08\u5982 CSS Grid\uff09\uff0c\u4f60\u9700\u8981\u5728\u914d\u7f6e\u6216\u4f7f\u7528\u7c7b\u540d\u65f6\u6ce8\u610f\uff0c\u5e76\u53c2\u8003\u5176\u6587\u6863\u4e2d\u5173\u4e8e\u6d4f\u89c8\u5668\u652f\u6301\u7684\u8bf4\u660e\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article pr\u00e9sente de mani\u00e8re syst\u00e9matique Tailwind CSS, un framework CSS ax\u00e9 sur l\u2019utilisabilit\u00e9. Il couvre ses concepts fondamentaux, son principe de fonctionnement et fournit des \u00e9tapes compl\u00e8tes allant de l\u2019initialisation du projet et de sa configuration \u00e0 la cr\u00e9ation effective de pages r\u00e9actives. Il vise \u00e0 aider les d\u00e9veloppeurs \u00e0 ma\u00eetriser efficacement cet outil moderne de d\u00e9veloppement front-end.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[],"knowledge_category":[281],"class_list":["post-12364670","knowledge_post","type-knowledge_post","status-publish","hentry","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS\u6559\u7a0b,\u54cd\u5e94\u5f0f\u7f51\u9875\u8bbe\u8ba1,\u5b9e\u7528\u4f18\u5148CSS,\u524d\u7aef\u6846\u67b6,\u4ece\u96f6\u5f00\u59cb,Tailwind CSS\u914d\u7f6e\u6307\u5357,\u6784\u5efa\u54cd\u5e94\u5f0f\u7f51\u9875"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_posts\/12364670","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\/12364670\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/media?parent=12364670"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/tags?post=12364670"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_category?post=12364670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}