{"id":12377111,"date":"2026-03-19T04:08:16","date_gmt":"2026-03-18T20:08:16","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e4%bf%9d%e5%a7%86%e7%ba%a7%e6%95%99%e7%a8%8b%ef%bc%9a%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e9%a1%b9%e7%9b%ae%e5%ae%9e%e6%88%98%e5%85%a8%e8%a7%a3%e6%9e%90\/"},"modified":"2026-03-19T04:23:03","modified_gmt":"2026-03-18T20:23:03","slug":"tailwind-css-tutorial-from-beginner-to-project","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/fr\/knowledge\/website-building\/tailwind-css-tutorial-from-beginner-to-project\/","title":{"rendered":"Guide complet pour d\u00e9butants sur Tailwind CSS : de l'apprentissage de base \u00e0 la mise en \u0153uvre pratique dans des projets r\u00e9els"},"content":{"rendered":"\n

\u5728\u73b0\u4ee3 Web \u5f00\u53d1\u9886\u57df\uff0c\u5b9e\u7528\u4f18\u5148\u7684 CSS \u6846\u67b6\u6b63\u5f15\u9886\u7740\u9ad8\u6548\u5f00\u53d1\u7684\u6f6e\u6d41\u3002\u5176\u4e2d\uff0cTailwind CSS<\/code> \u4ee5\u5176\u72ec\u7279\u7684\u8bbe\u8ba1\u54f2\u5b66\u548c\u5f3a\u5927\u7684\u5de5\u5177\u94fe\uff0c\u6210\u4e3a\u4f17\u591a\u5f00\u53d1\u8005\u7684\u9996\u9009\u3002\u5b83\u901a\u8fc7\u63d0\u4f9b\u5927\u91cf\u53ef\u7ec4\u5408\u7684\u539f\u5b50\u7c7b\uff0c\u8ba9\u4f60\u53ef\u4ee5\u76f4\u63a5\u5728 HTML \u4e2d\u5feb\u901f\u6784\u5efa\u4efb\u4f55\u8bbe\u8ba1\u3002<\/p>\n\n\n\n

Tailwind CSS \u6838\u5fc3\u6982\u5ff5\u4e0e\u5b89\u88c5<\/h2>\n\n\n\n

Tailwind CSS<\/code> \u7684\u6838\u5fc3\u601d\u60f3\u662f\u201c\u5b9e\u7528\u4f18\u5148\u201d(Utility-First)\u3002\u5b83\u6ca1\u6709\u50cf\u4f20\u7edf\u6846\u67b6\u90a3\u6837\u63d0\u4f9b\u9884\u5236\u7684\u7ec4\u4ef6\uff08\u5982\u6309\u94ae\u3001\u5361\u7247\uff09\uff0c\u800c\u662f\u63d0\u4f9b\u4e86\u4e00\u6574\u5957\u7ec6\u7c92\u5ea6\u7684 CSS \u8f85\u52a9\u7c7b\u3002\u901a\u8fc7\u8fd9\u4e9b\u7c7b\u7684\u7ec4\u5408\uff0c\u4f60\u53ef\u4ee5\u50cf\u642d\u79ef\u6728\u4e00\u6837\u6784\u5efa\u51fa\u5b8c\u5168\u81ea\u5b9a\u4e49\u7684\u7528\u6237\u754c\u9762\u3002<\/p>\n\n\n\n

\u4f8b\u5982\uff0c\u5728\u4f20\u7edf\u7684 CSS \u4e2d\uff0c\u4f60\u9700\u8981\u4e3a\u4e00\u4e2a\u6309\u94ae\u5355\u72ec\u7f16\u5199\u6837\u5f0f\uff0c\u800c\u5728 Tailwind \u4e2d\uff0c\u4f60\u53ef\u4ee5\u5728 HTML \u4e2d\u76f4\u63a5\u5e94\u7528\u7c7b\u540d\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb \u62e5\u62b1 Tailwind CSS\uff1a\u638c\u63e1\u5b9e\u7528\u4f18\u5148\u7684\u73b0\u4ee3 CSS \u6846\u67b6\u5f00\u53d1\u4e4b\u9053<\/a>\u3002<\/p>\n\n\n\n\n

\u4e3a\u4e86\u5f00\u59cb\u4f7f\u7528\u5b83\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u591a\u79cd\u65b9\u5f0f\u5b89\u88c5\u3002\u6700\u5e38\u89c1\u4e14\u63a8\u8350\u7684\u65b9\u5f0f\u662f\u4f7f\u7528\u5305\u7ba1\u7406\u5de5\u5177\uff0c\u5e76\u901a\u8fc7 PostCSS<\/code> \u8fdb\u884c\u914d\u7f6e\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

\u9996\u5148\uff0c\u4f7f\u7528 npm<\/code> \u6216 yarn<\/code> \u521d\u59cb\u5316\u9879\u76ee\u5e76\u5b89\u88c5 Tailwind\u3002<\/p>\n\n\n\n

npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u6267\u884c init<\/code> \u547d\u4ee4\u4f1a\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a tailwind.config.js<\/code> \u7684\u914d\u7f6e\u6587\u4ef6\u3002\u63a5\u4e0b\u6765\uff0c\u4f60\u9700\u8981\u5728\u9879\u76ee\u7684 CSS \u5165\u53e3\u6587\u4ef6\uff08\u4f8b\u5982 src\/styles.css<\/code> \u6216 app\/globals.css<\/code>\uff09\u4e2d\u5f15\u5165 Tailwind \u7684\u6307\u4ee4\u3002<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u6700\u540e\uff0c\u5728\u4f60\u7684\u6784\u5efa\u5de5\u5177\uff08\u5982 Vite\u3001Webpack\uff09\u4e2d\u914d\u7f6e PostCSS<\/code>\uff0c\u786e\u4fdd\u5b83\u4f7f\u7528 Tailwind CSS<\/code> \u63d2\u4ef6\u6765\u5904\u7406\u8fd9\u4e9b\u6307\u4ee4\u3002\u5bf9\u4e8e\u50cf Next.js\u3001Vue CLI \u6216 Create React App \u8fd9\u6837\u7684\u73b0\u4ee3\u6846\u67b6\uff0c\u901a\u5e38\u5df2\u5185\u7f6e\u6216\u53ef\u4ee5\u8f7b\u677e\u96c6\u6210 PostCSS\u3002<\/p>\n\n\n\n
\u9879\u76ee\u914d\u7f6e\u6587\u4ef6\u8be6\u89e3<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u662f\u7ba1\u7406\u9879\u76ee\u5b9a\u5236\u5316\u7684\u6838\u5fc3\u3002\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u4f60\u53ef\u4ee5\u5b9a\u4e49\u4e3b\u9898\u989c\u8272\u3001\u5b57\u4f53\u3001\u65ad\u70b9\u7b49\u8bbe\u8ba1\u4ee4\u724c\uff0c\u4ee5\u53ca\u914d\u7f6e\u9700\u8981\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4ee5\u8fdb\u884c\u6837\u5f0f\u4f18\u5316\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u6df1\u5165\u7406\u89e3 Tailwind CSS \u5b9e\u7528\u4f18\u5148\u7684\u73b0\u4ee3 CSS \u6846\u67b6\u6838\u5fc3\u601d\u60f3<\/a>\u3002<\/p>\n\n\n\n\n
\u4e00\u4e2a\u57fa\u7840\u7684\u914d\u7f6e\u5982\u4e0b\uff1a<\/p>\n\n\n\n
\/\/ tailwind.config.js\n\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n  content: [\n    ".\/src\/**\/*.{html,js,jsx,ts,tsx,vue}",\n    ".\/public\/index.html"\n  ],\n  theme: {\n    extend: {\n      colors: {\n        'brand-blue': '#1992d4',\n      },\n    },\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
content<\/code> \u5b57\u6bb5\u81f3\u5173\u91cd\u8981\uff0c\u5b83\u544a\u8bc9 Tailwind \u5728\u6784\u5efa\u65f6\u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4e2d\u7684\u7c7b\u540d\uff0c\u5e76\u53ea\u5c06\u7528\u5230\u7684\u6837\u5f0f\u5305\u542b\u5728\u6700\u7ec8\u7684 CSS \u6587\u4ef6\u4e2d\uff0c\u8fd9\u662f\u5b9e\u73b0\u5176\u6781\u5c0f\u7684\u751f\u4ea7\u5305\u4f53\u79ef\u7684\u5173\u952e\u3002<\/p>\n\n\n\n
\u57fa\u7840\u4f7f\u7528\u4e0e\u5b9e\u7528\u7c7b\u7ec4\u5408<\/h2>\n\n\n\n
\u638c\u63e1 Tailwind \u7684\u5173\u952e\u5728\u4e8e\u7406\u89e3\u5176\u7c7b\u540d\u547d\u540d\u89c4\u5219\u3002\u7c7b\u540d\u901a\u5e38\u76f4\u63a5\u6620\u5c04\u5230 CSS \u5c5e\u6027\uff0c\u5e76\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
\u4f8b\u5982\uff0c\u95f4\u8ddd\uff08margin\u3001padding\uff09\u4f7f\u7528 {property}{side}-{size}<\/code> \u7684\u6a21\u5f0f\uff1a
\n* mt-4<\/code> \u8868\u793a margin-top: 1rem;<\/code>
\n* px+
\n-6<\/code> \u8868\u793a\u5de6\u53f3\u5185\u8fb9\u8ddd\uff08padding-left & padding-right\uff09\u4e3a 1.5rem\u3002<\/p>\n\n\n\n
\u5bf9\u4e8e\u54cd\u5e94\u5f0f\u8bbe\u8ba1\uff0cTailwind \u91c7\u7528\u79fb\u52a8\u4f18\u5148\u7684\u65ad\u70b9\u7cfb\u7edf\u3002\u9ed8\u8ba4\u7684\u65ad\u70b9\u524d\u7f00\u6709 sm:<\/code>, md:<\/code>, lg:<\/code>, xl:<\/code>, 2xl:<\/code>\u3002\u76f4\u63a5\u5728\u7c7b\u540d\u524d\u52a0\u4e0a\u65ad\u70b9\u524d\u7f00\uff0c\u5373\u53ef\u5e94\u7528\u54cd\u5e94\u5f0f\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u8ba9\u6211\u4eec\u6784\u5efa\u4e00\u4e2a\u7b80\u5355\u7684\u5361\u7247\u7ec4\u4ef6\u6765\u76f4\u89c2\u611f\u53d7\u4e00\u4e0b\uff1a<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS \u6784\u5efa\u73b0\u4ee3\u54cd\u5e94\u5f0f\u7f51\u9875\u7684\u5b8c\u6574\u5165\u95e8\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
<div class="max-w-sm rounded-xl overflow-hidden shadow-lg bg-white p-6 md:p-8">\n  <div class="font-bold text-xl text-gray-800 mb-2">\u5361\u7247\u6807\u9898<\/div>\n  <p class="text-gray-600 text-base">\n    \u8fd9\u662f\u4e00\u5f20\u4f7f\u7528 Tailwind CSS \u5b9e\u7528\u7c7b\u6784\u5efa\u7684\u5361\u7247\u3002\u8fd9\u4e9b\u7c7b\u540d\u76f4\u63a5\u5b9a\u4e49\u4e86\u5b83\u7684\u8fb9\u6846\u3001\u9634\u5f71\u3001\u5185\u8fb9\u8ddd\u548c\u6587\u5b57\u6837\u5f0f\u3002\n  <\/p>\n  <div class="mt-6">\n    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-150">\n      \u70b9\u51fb\u6309\u94ae\n    <\/button>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528\u4e86\u80cc\u666f\u8272\uff08bg-white<\/code>\uff09\u3001\u9634\u5f71\uff08shadow-lg<\/code>\uff09\u3001\u5706\u89d2\uff08rounded-xl<\/code>\uff09\u3001\u5185\u8fb9\u8ddd\uff08p-6<\/code>\uff09\u3001\u6587\u5b57\u6837\u5f0f\uff08text-xl<\/code>, text-gray-800<\/code>\uff09\u4ee5\u53ca\u54cd\u5e94\u5f0f\u5185\u8fb9\u8ddd\uff08md:p-8<\/code>\uff09\u3002\u6309\u94ae\u8fd8\u5305\u542b\u4e86\u60ac\u505c\u72b6\u6001\uff08hover:bg-blue-700<\/code>\uff09\u548c\u8fc7\u6e21\u52a8\u753b\uff08transition duration-150<\/code>\uff09\u3002<\/p>\n\n\n\n
\u5904\u7406\u590d\u6742\u72b6\u6001\u4e0e\u4f2a\u7c7b<\/h3>\n\n\n\n
Tailwind \u4e3a\u5404\u79cd\u72b6\u6001\u63d0\u4f9b\u4e86\u4fee\u9970\u7b26\u524d\u7f00\u3002\u9664\u4e86\u4e0a\u9762\u7528\u5230\u7684 hover:<\/code>\uff0c\u5e38\u7528\u7684\u8fd8\u6709\uff1a
\n* focus:<\/code> \u7528\u4e8e\u5143\u7d20\u83b7\u5f97\u7126\u70b9\u65f6\u7684\u6837\u5f0f\u3002
\n* active:<\/code> \u7528\u4e8e\u5143\u7d20\u88ab\u6fc0\u6d3b\uff08\u5982\u9f20\u6807\u6309\u4e0b\uff09\u65f6\u7684\u6837\u5f0f\u3002
\n* disabled:<\/code> \u7528\u4e8e\u7981\u7528\u72b6\u6001\u7684\u6837\u5f0f\u3002
\n* group-hover:<\/code> \u5f53\u7236\u5143\u7d20\u6709 group<\/code> \u7c7b\u65f6\uff0c\u7528\u4e8e\u5b50\u5143\u7d20\u7684\u60ac\u505c\u6837\u5f0f\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
\u8fd9\u4e9b\u4fee\u9970\u7b26\u8ba9\u4ea4\u4e92\u72b6\u6001\u6837\u5f0f\u7684\u7f16\u5199\u53d8\u5f97\u6781\u5176\u76f4\u89c2\u548c\u96c6\u4e2d\u3002<\/p>\n\n\n\n
\u9ad8\u7ea7\u5b9a\u5236\u4e0e\u9879\u76ee\u5b9e\u6218<\/h2>\n\n\n\n
\u5728\u5b9e\u9645\u9879\u76ee\u4e2d\uff0c\u4f60\u5f88\u5c11\u4f1a\u5b8c\u5168\u4f7f\u7528\u9ed8\u8ba4\u914d\u7f6e\u3002\u6df1\u5165\u5b9a\u5236 Tailwind CSS<\/code> \u662f\u5c06\u5176\u6548\u80fd\u6700\u5927\u5316\u7684\u5fc5\u7ecf\u4e4b\u8def\u3002<\/p>\n\n\n\n
\u6269\u5c55\u8bbe\u8ba1\u7cfb\u7edf<\/h3>\n\n\n\n
\u4f60\u53ef\u4ee5\u5728 tailwind.config.js<\/code> \u6587\u4ef6\u7684 theme.extend<\/code> \u5bf9\u8c61\u4e2d\u6dfb\u52a0\u81ea\u5b9a\u4e49\u503c\u3002\u8fd9\u662f\u63a8\u8350\u7684\u65b9\u5f0f\uff0c\u56e0\u4e3a\u5b83\u4f1a\u4e0e\u9ed8\u8ba4\u4e3b\u9898\u5408\u5e76\uff0c\u800c\u4e0d\u4f1a\u8986\u76d6\u6389\u9ed8\u8ba4\u503c\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'primary': '#3b82f6',\n        'secondary': '#10b981',\n      },\n      spacing: {\n        '128': '32rem',\n      },\n      fontFamily: {\n        'sans': ['Inter var', 'system-ui', 'sans-serif'],\n      },\n    },\n  },\n}<\/code><\/pre>\n\n\n\n
\u5b9a\u4e49\u4e4b\u540e\uff0c\u4f60\u5c31\u53ef\u4ee5\u5728\u9879\u76ee\u4e2d\u4f7f\u7528 bg-primary<\/code>, text-secondary<\/code>, w-128<\/code> \u7b49\u81ea\u5b9a\u4e49\u7c7b\u4e86\u3002<\/p>\n\n\n\n
\u63d0\u53d6\u53ef\u590d\u7528\u7ec4\u4ef6\u7c7b<\/h3>\n\n\n\n
\u867d\u7136 Tailwind \u9f13\u52b1\u76f4\u63a5\u5728 HTML \u4e2d\u4f7f\u7528\u5b9e\u7528\u7c7b\uff0c\u4f46\u5f53\u67d0\u4e9b\u7ec4\u4ef6\uff08\u5982\u6309\u94ae\u3001\u8868\u5355\u8f93\u5165\u6846\u3001\u5361\u7247\u5bb9\u5668\uff09\u5728\u9879\u76ee\u4e2d\u53cd\u590d\u51fa\u73b0\u4e14\u6837\u5f0f\u56fa\u5b9a\u65f6\uff0c\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u63d0\u53d6\u516c\u5171\u6837\u5f0f\u5230 CSS \u4e2d\u662f\u4e00\u4e2a\u597d\u4e60\u60ef\uff0c\u8fd9\u6709\u52a9\u4e8e\u4fdd\u6301 HTML \u7684\u7b80\u6d01\u548c\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n\n\n\n
\u5728\u4f60\u7684 CSS \u6587\u4ef6\u4e2d\u53ef\u4ee5\u8fd9\u6837\u5199\uff1a<\/p>\n\n\n\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 transition-all;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\u5728 HTML \u4e2d\u76f4\u63a5\u4f7f\u7528 class=\"btn-primary\"<\/code> \u5373\u53ef\u3002\u8fd9\u7ed3\u5408\u4e86\u5b9e\u7528\u7c7b\u7684\u7075\u6d3b\u6027\u548c\u4f20\u7edf CSS \u7c7b\u7684\u53ef\u590d\u7528\u6027\u3002<\/p>\n\n\n\n
\u4e0e UI \u6846\u67b6\u96c6\u6210\u5b9e\u6218<\/h3>\n\n\n\n
\u5728 React\u3001Vue \u6216 Svelte \u7b49\u7ec4\u4ef6\u5316\u6846\u67b6\u4e2d\uff0cTailwind \u7684\u8868\u73b0\u5c24\u4e3a\u51fa\u8272\u3002\u4f60\u53ef\u4ee5\u5c06\u6837\u5f0f\u903b\u8f91\u5b8c\u5168\u5c01\u88c5\u5728\u7ec4\u4ef6\u5185\u90e8\u3002<\/p>\n\n\n\n
\u4ee5\u4e00\u4e2a React \u7ec4\u4ef6\u4e3a\u4f8b\uff1a<\/p>\n\n\n\n
\/\/ Button.jsx\nexport default function Button({ children, variant = 'primary' }) {\n  const baseClasses = "px-6 py-2 rounded font-medium transition-colors";\n  const variantClasses = {\n    primary: "bg-blue-600 text-white hover:bg-blue-700",\n    secondary: "bg-gray-200 text-gray-800 hover:bg-gray-300",\n    outline: "border border-blue-600 text-blue-600 hover:bg-blue-50",\n  };\n\nreturn (\n    <button className={`${baseClasses} ${variantClasses[variant]}`}>\n      {children}\n    <\/button>\n  );\n}<\/code><\/pre>\n\n\n\n
\u8fd9\u79cd\u6a21\u5f0f\u8ba9\u4f60\u53ef\u4ee5\u6784\u5efa\u51fa\u5f3a\u5927\u4e14\u98ce\u683c\u4e00\u81f4\u7684\u8bbe\u8ba1\u7cfb\u7edf\u7ec4\u4ef6\u5e93\u3002<\/p>\n\n\n\n
\u6027\u80fd\u4f18\u5316\u4e0e\u751f\u4ea7\u90e8\u7f72<\/h2>\n\n\n\n
Tailwind \u751f\u6210\u7684 CSS \u6587\u4ef6\u5728\u5f00\u53d1\u6a21\u5f0f\u4e0b\u53ef\u80fd\u8f83\u5927\uff0c\u56e0\u4e3a\u5b83\u5305\u542b\u4e86\u6240\u6709\u53ef\u80fd\u7684\u7c7b\u3002\u4f46\u5728\u751f\u4ea7\u73af\u5883\u4e2d\uff0c\u901a\u8fc7\u6b63\u786e\u7684\u914d\u7f6e\uff0c\u5b83\u53ef\u4ee5\u53d8\u5f97\u975e\u5e38\u5c0f\u5de7\u3002<\/p>\n\n\n\n
\u542f\u7528 Purge \u4e0e\u4f18\u5316<\/h3>\n\n\n\n
\u5728\u65b0\u7248\u672c\u4e2d\uff0c\u4f18\u5316\u529f\u80fd\uff08\u65e7\u79f0 PurgeCSS\uff09\u901a\u8fc7 content<\/code> \u914d\u7f6e\u81ea\u52a8\u542f\u7528\u3002\u786e\u4fdd\u4f60\u7684 tailwind.config.js<\/code> \u6587\u4ef6\u4e2d\u7684 content<\/code> \u8def\u5f84\u51c6\u786e\u8986\u76d6\u4e86\u9879\u76ee\u4e2d\u6240\u6709\u53ef\u80fd\u4f7f\u7528 Tailwind \u7c7b\u540d\u7684\u6587\u4ef6\uff08\u6a21\u677f\u3001\u7ec4\u4ef6\u3001JS \u6587\u4ef6\u7b49\uff09\u3002Tailwind \u4f1a\u9759\u6001\u5206\u6790\u8fd9\u4e9b\u6587\u4ef6\uff0c\u5e76\u53ea\u5c06\u7528\u5230\u7684\u7c7b\u6253\u5305\u5230\u6700\u7ec8\u7684 CSS \u4e2d\u3002<\/p>\n\n\n\n
\u4e3a\u4e86\u8fbe\u5230\u6700\u4f73\u6548\u679c\uff0c\u4f60\u8fd8\u53ef\u4ee5\u5728\u914d\u7f6e\u4e2d\u6307\u5b9a safelist<\/code> \u9009\u9879\uff0c\u6765\u4fdd\u7559\u4e00\u4e9b\u53ef\u80fd\u901a\u8fc7\u52a8\u6001\u62fc\u63a5\u751f\u6210\u7684\u7c7b\u540d\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: ['.\/src\/**\/*.{js,jsx,ts,tsx}'],\n  safelist: [\n    'bg-red-500',\n    'text-center',\n    {\n      pattern: \/bg-(red|green|blue)-(100|500|700)\/, \/\/ \u52a8\u6001\u751f\u6210\u7684\u989c\u8272\u7c7b\n    },\n  ],\n}<\/code><\/pre>\n\n\n\n
\u4f7f\u7528 JIT \u6a21\u5f0f<\/h3>\n\n\n\n
\u4ece Tailwind CSS v3.0 \u5f00\u59cb\uff0c\u5373\u65f6\u7f16\u8bd1\uff08Just-In-Time\uff09\u6a21\u5f0f\u5df2\u6210\u4e3a\u9ed8\u8ba4\u4e14\u552f\u4e00\u7684\u5f15\u64ce\u3002\u8fd9\u610f\u5473\u7740\u6837\u5f0f\u662f\u6309\u9700\u751f\u6210\u7684\uff0c\u4f60\u65e0\u9700\u518d\u624b\u52a8\u5f00\u542f\u3002\u4f60\u53ef\u4ee5\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4f7f\u7528\u4efb\u610f\u7c7b\u540d\uff0c\u751a\u81f3\u662f\u52a8\u6001\u751f\u6210\u7684\u7c7b\u540d\uff08\u5982 mt-[23px]<\/code> \u8fd9\u6837\u7684\u4efb\u610f\u503c\uff09\uff0cTailwind \u90fd\u4f1a\u5373\u65f6\u4e3a\u4f60\u751f\u6210\u5bf9\u5e94\u7684 CSS\u3002\u8fd9\u5f7b\u5e95\u89e3\u51b3\u4e86\u5f00\u53d1\u73af\u5883 CSS \u6587\u4ef6\u8fc7\u5927\u7684\u95ee\u9898\uff0c\u5e76\u63d0\u4f9b\u4e86\u65e0\u4e0e\u4f26\u6bd4\u7684\u5f00\u53d1\u4f53\u9a8c\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n
\u751f\u4ea7\u73af\u5883\u6784\u5efa<\/h3>\n\n\n\n
\u5728\u6784\u5efa\u751f\u4ea7\u7248\u672c\u65f6\uff0c\u901a\u5e38\u9700\u8981\u8bbe\u7f6e NODE_ENV=production<\/code> \u73af\u5883\u53d8\u91cf\u3002\u6784\u5efa\u5de5\u5177\uff08\u5982 Vite\u3001Webpack\uff09\u4f1a\u81ea\u52a8\u542f\u7528\u6240\u6709\u4f18\u5316\u3002<\/p>\n\n\n\n
\u4f8b\u5982\uff0c\u5728 package.json<\/code> \u4e2d\uff1a<\/p>\n\n\n\n
{\n  "scripts": {\n    "build": "NODE_ENV=production vite build"\n  }\n}<\/code><\/pre>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u901a\u8fc7\u5f7b\u5e95\u7684\u5b9e\u7528\u4f18\u5148\u65b9\u6cd5\u8bba\uff0c\u6539\u53d8\u4e86\u5f00\u53d1\u8005\u7f16\u5199 CSS \u7684\u65b9\u5f0f\u3002\u5b83\u5c06\u6837\u5f0f\u51b3\u7b56\u4ece\u6837\u5f0f\u8868\u8f6c\u79fb\u5230\u4e86\u6a21\u677f\u4e2d\uff0c\u901a\u8fc7\u7ec4\u5408\u539f\u5b50\u7c7b\u5b9e\u73b0\u4e86\u6781\u9ad8\u7684\u5f00\u53d1\u6548\u7387\u548c\u8bbe\u8ba1\u4e00\u81f4\u6027\u3002\u4ece\u7b80\u5355\u7684\u5b89\u88c5\u914d\u7f6e\u3001\u57fa\u7840\u7684\u7c7b\u540d\u4f7f\u7528\uff0c\u5230\u6df1\u5165\u7684\u9879\u76ee\u5b9a\u5236\u3001\u7ec4\u4ef6\u63d0\u53d6\uff0c\u518d\u5230\u9488\u5bf9\u751f\u4ea7\u73af\u5883\u7684\u6781\u81f4\u4f18\u5316\uff0cTailwind \u63d0\u4f9b\u4e86\u4e00\u5957\u5b8c\u6574\u4e14\u5f3a\u5927\u7684\u5de5\u5177\u94fe\u3002\u62e5\u62b1\u5b83\u610f\u5473\u7740\u4f60\u9700\u8981\u8f6c\u53d8\u601d\u7ef4\uff0c\u4f46\u4e00\u65e6\u638c\u63e1\uff0c\u4f60\u5c06\u53ef\u4ee5\u5728\u4e0d\u8131\u79bb HTML\/JSX \u4e0a\u4e0b\u6587\u7684\u60c5\u51b5\u4e0b\uff0c\u4ee5\u60ca\u4eba\u7684\u901f\u5ea6\u6784\u5efa\u51fa\u7cbe\u7f8e\u3001\u54cd\u5e94\u5f0f\u4e14\u6613\u4e8e\u7ef4\u62a4\u7684\u73b0\u4ee3\u7528\u6237\u754c\u9762\u3002<\/p>\n\n\n\n
FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n
Tailwind CSS \u751f\u6210\u7684 CSS \u6587\u4ef6\u4f1a\u4e0d\u4f1a\u5f88\u5927\uff1f<\/h3>\n\n\n\n
\u4e0d\u4f1a\u3002Tailwind \u5728\u751f\u4ea7\u6784\u5efa\u65f6\u4f1a\u4f7f\u7528 PurgeCSS<\/code>\uff08\u6216\u7c7b\u4f3c\u6280\u672f\uff09\u6765\u626b\u63cf\u4f60\u7684\u9879\u76ee\u6587\u4ef6\uff0c\u5e76\u53ea\u5c06\u5b9e\u9645\u4f7f\u7528\u5230\u7684 CSS \u7c7b\u5305\u542b\u5728\u6700\u7ec8\u7684 CSS \u6587\u4ef6\u4e2d\u3002\u56e0\u6b64\uff0c\u6700\u7ec8\u751f\u6210\u7684 CSS \u901a\u5e38\u53ea\u6709\u51e0 KB \u5230\u5341\u51e0 KB\uff0c\u6bd4\u8bb8\u591a\u4f20\u7edf\u7684\u624b\u5199 CSS \u6216\u7ec4\u4ef6\u5e93\u7684 CSS \u8981\u5c0f\u5f97\u591a\u3002<\/p>\n\n\n\n
\u5728\u56e2\u961f\u9879\u76ee\u4e2d\uff0c\u5982\u4f55\u4fdd\u8bc1\u6837\u5f0f\u4e00\u81f4\u6027\uff1f<\/h3>\n\n\n\n
Tailwind \u672c\u8eab\u5c31\u662f\u4e00\u4e2a\u5f3a\u5927\u7684\u8bbe\u8ba1\u7ea6\u675f\u5de5\u5177\u3002\u901a\u8fc7\u7edf\u4e00\u7684 tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\uff0c\u56e2\u961f\u53ef\u4ee5\u5171\u4eab\u4e00\u5957\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u5927\u5c0f\u7b49\u8bbe\u8ba1\u4ee4\u724c\u3002\u6240\u6709\u5f00\u53d1\u8005\u90fd\u4f7f\u7528\u8fd9\u5957\u9884\u8bbe\u7684\u7c7b\u540d\u8fdb\u884c\u5f00\u53d1\uff0c\u5929\u7136\u4fdd\u8bc1\u4e86\u89c6\u89c9\u4e00\u81f4\u6027\u3002\u6b64\u5916\uff0c\u53ef\u4ee5\u7ed3\u5408 @apply<\/code> \u6307\u4ee4\u6216\u7ec4\u4ef6\u5316\u6846\u67b6\u63d0\u53d6\u51fa\u901a\u7528\u7684\u7ec4\u4ef6\u7c7b\uff08\u5982\u6309\u94ae\u3001\u8f93\u5165\u6846\uff09\uff0c\u8fdb\u4e00\u6b65\u7edf\u4e00\u590d\u6742\u7ec4\u4ef6\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u5982\u4f55\u8986\u76d6\u6216\u4fee\u6539\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u7684 Tailwind \u6837\u5f0f\uff1f<\/h3>\n\n\n\n
\u5bf9\u4e8e\u4f7f\u7528\u4e86 Tailwind \u7684\u7b2c\u4e09\u65b9\u7ec4\u4ef6\uff0c\u4f60\u6709\u51e0\u79cd\u5904\u7406\u65b9\u5f0f\u3002\u9996\u5148\uff0c\u5982\u679c\u7ec4\u4ef6\u5141\u8bb8\u4f20\u9012 className<\/code> \u5c5e\u6027\uff0c\u4f60\u53ef\u4ee5\u76f4\u63a5\u9644\u52a0\u989d\u5916\u7684 Tailwind \u7c7b\u6765\u8986\u76d6\u6837\u5f0f\u3002\u5176\u6b21\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u63d0\u9ad8 CSS \u9009\u62e9\u5668\u7279\u5f02\u6027\u7684\u65b9\u5f0f\uff0c\u5728\u4f60\u7684\u5168\u5c40 CSS \u6587\u4ef6\u4e2d\u7f16\u5199\u66f4\u5177\u4f53\u7684\u9009\u62e9\u5668\u6765\u8986\u76d6\u3002\u6700\u540e\uff0c\u6700\u5f7b\u5e95\u7684\u65b9\u5f0f\u662f\u4f7f\u7528 Tailwind \u7684 !important<\/code> \u4fee\u9970\u7b26\uff0c\u5728\u7c7b\u540d\u540e\u6dfb\u52a0 !<\/code>\uff0c\u4f8b\u5982 <code>bg-red-500!<\/code><\/code>\uff0c\u4f46\u8fd9\u5e94\u8c28\u614e\u4f7f\u7528\u3002<\/p>\n\n\n\n
Tailwind CSS \u9002\u5408\u4e0e CSS-in-JS \u65b9\u6848\u4e00\u8d77\u4f7f\u7528\u5417\uff1f<\/h3>\n\n\n\n
\u8fd9\u53d6\u51b3\u4e8e\u5177\u4f53\u7684 CSS-in-JS \u5e93\u3002\u50cf Styled-components<\/code> \u6216 Emotion<\/code> \u8fd9\u7c7b\u8fd0\u884c\u65f6 CSS-in-JS \u65b9\u6848\uff0c\u5176\u7406\u5ff5\u4e0e Tailwind \u7684\u9759\u6001\u63d0\u53d6\u3001\u5b9e\u7528\u4f18\u5148\u54f2\u5b66\u6709\u8f83\u5927\u5dee\u5f02\uff0c\u901a\u5e38\u4e0d\u63a8\u8350\u6df7\u5408\u4f7f\u7528\u3002\u7136\u800c\uff0cTailwind \u53ef\u4ee5\u4e0e\u4e00\u4e9b\u7f16\u8bd1\u65f6 CSS-in-JS \u65b9\u6848\u6216\u5de5\u5177\u7ed3\u5408\u5f97\u5f88\u597d\uff0c\u4f8b\u5982\u5229\u7528 @apply<\/code> \u6307\u4ee4\uff0c\u6216\u8005\u901a\u8fc7\u50cf twin.macro<\/code> \u8fd9\u6837\u7684\u5e93\u5728 CSS-in-JS \u6a21\u677f\u5b57\u7b26\u4e32\u4e2d\u76f4\u63a5\u4f7f\u7528 Tailwind \u7c7b\u540d\u3002\u6700\u4f73\u5b9e\u8df5\u662f\u5728\u4e00\u4e2a\u9879\u76ee\u4e2d\u9009\u5b9a\u4e00\u79cd\u4e3b\u8981\u6837\u5f0f\u65b9\u6848\uff0c\u4ee5\u4fdd\u6301\u6280\u672f\u6808\u7684\u7b80\u6d01\u3002<\/p>\n\n\n\n
\u5982\u4f55\u5904\u7406\u52a8\u6001\u751f\u6210\u7684\u7c7b\u540d\uff1f<\/h3>\n\n\n\n
\u5bf9\u4e8e\u5b8c\u5168\u52a8\u6001\u7684\u7c7b\u540d\uff08\u5982\u4ece\u6570\u636e\u5e93\u4e2d\u8bfb\u53d6\u7684\u5b57\u7b26\u4e32\uff09\uff0cTailwind \u7684 JIT \u5f15\u64ce\u65e0\u6cd5\u9884\u5148\u77e5\u6653\uff0c\u56e0\u6b64\u4e0d\u4f1a\u751f\u6210\u5bf9\u5e94\u7684 CSS\u3002\u89e3\u51b3\u65b9\u6cd5\u662f\u4f7f\u7528\u201c\u5b89\u5168\u5217\u8868\u201d\uff08Safelist\uff09\u3002\u4f60\u53ef\u4ee5\u5728 tailwind.config.js<\/code> \u7684 safelist<\/code> \u9009\u9879\u4e2d\uff0c\u901a\u8fc7\u5b57\u7b26\u4e32\u3001\u6b63\u5219\u8868\u8fbe\u5f0f\u6a21\u5f0f\u5217\u51fa\u6240\u6709\u53ef\u80fd\u52a8\u6001\u51fa\u73b0\u7684\u5b8c\u6574\u7c7b\u540d\uff0c\u786e\u4fdd\u5b83\u4eec\u88ab\u5305\u542b\u5728\u6700\u7ec8\u6837\u5f0f\u8868\u4e2d\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article est une guide complet sur Tailwind CSS. Il commence par pr\u00e9senter sa philosophie fondamentale, qui met l\u2019accent sur l\u2019aspect \u201c pratique \u201d (l\u2019utilit\u00e9 des fonctionnalit\u00e9s propos\u00e9es). Ensuite, il explique en d\u00e9tail les \u00e9tapes n\u00e9cessaires pour installer Tailwind CSS via npm, configurer PostCSS, et modifier le fichier `tailwind.config.js`. L\u2019auteur explique \u00e9galement les r\u00e8gles de nommage des classes pratiques ainsi que les m\u00e9thodes permettant de combiner ces classes. Enfin, il montre comment utiliser directement les noms de classes pour d\u00e9velopper rapidement des styles, \u00e0 travers un exemple de composant de type carte (card) r\u00e9actif.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,430,2271,3203],"knowledge_category":[281],"class_list":["post-12377111","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-frontend-development","tag-practical-first","tag-project-practice","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS\u6559\u7a0b,\u5b9e\u7528\u4f18\u5148CSS\u6846\u67b6,\u539f\u5b50\u7c7b,\u5b89\u88c5\u914d\u7f6e,\u9879\u76ee\u5b9e\u6218,\u54cd\u5e94\u5f0f\u8bbe\u8ba1,Web\u5f00\u53d1,\u4ece\u5165\u95e8\u5230\u5b9e\u6218\u5168\u89e3\u6790"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_posts\/12377111","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\/12377111\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/media?parent=12377111"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/tags?post=12377111"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_category?post=12377111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}