{"id":12379152,"date":"2026-03-20T07:56:28","date_gmt":"2026-03-19T23:56:28","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e6%8e%8c%e6%8f%a1-tailwind-css%ef%bc%9a%e4%bb%8e%e5%85%a5%e9%97%a8%e5%88%b0%e7%b2%be%e9%80%9a%e7%9a%84%e5%ae%9e%e7%94%a8%e7%bb%84%e4%bb%b6%e5%bc%80%e5%8f%91%e6%8c%87%e5%8d%97\/"},"modified":"2026-03-20T08:00:30","modified_gmt":"2026-03-20T00:00:30","slug":"tailwind-css-guide-practical-component-development","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/fr\/knowledge\/website-building\/tailwind-css-guide-practical-component-development\/","title":{"rendered":"Ma\u00eetriser Tailwind CSS : Guide pratique pour le d\u00e9veloppement de composants, de l'initiation \u00e0 la ma\u00eetrise"},"content":{"rendered":"\n

Tailwind CSS \u4f5c\u4e3a\u4e00\u79cd\u5b9e\u7528\u4f18\u5148\u7684 CSS \u6846\u67b6\uff0c\u4ee5\u5176\u9ad8\u5ea6\u53ef\u5b9a\u5236\u6027\u548c\u5f00\u53d1\u6548\u7387\u5728\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u4e2d\u5360\u636e\u4e86\u91cd\u8981\u5730\u4f4d\u3002\u4e0e\u4f20\u7edf\u7684 CSS \u6846\u67b6\u4e0d\u540c\uff0c\u5b83\u4e0d\u63d0\u4f9b\u9884\u5236\u7684\u3001\u590d\u6742\u7684\u7ec4\u4ef6\uff0c\u800c\u662f\u901a\u8fc7\u63d0\u4f9b\u7ec6\u7c92\u5ea6\u7684\u3001\u5355\u4e00\u7684\u5b9e\u7528\u7c7b\u6765\u6784\u5efa\u7528\u6237\u754c\u9762\u3002\u8fd9\u610f\u5473\u7740\u4f60\u65e0\u9700\u5728 HTML \u548c CSS \u6587\u4ef6\u4e4b\u95f4\u53cd\u590d\u8df3\u8f6c\uff0c\u4e5f\u65e0\u9700\u4e3a\u7c7b\u540d\u7ede\u5c3d\u8111\u6c41\uff0c\u4ece\u800c\u5b9e\u73b0\u4e86\u6837\u5f0f\u4e0e\u7ed3\u6784\u7684\u7d27\u5bc6\u8026\u5408\uff0c\u540c\u65f6\u4fdd\u6301\u4e86\u6837\u5f0f\u58f0\u660e\u7684\u7075\u6d3b\u6027\u3002<\/p>\n\n\n\n

\u5b83\u7684\u6838\u5fc3\u54f2\u5b66\u662f\u201c\u529f\u80fd\u4f18\u5148\u201d\uff0c\u4f46\u6df1\u5165\u4e86\u89e3\u5176\u5de5\u4f5c\u539f\u7406\u540e\uff0c\u4f60\u4f1a\u53d1\u73b0\u6781\u9650\u53ef\u5b9a\u5236\u6027\u624d\u662f\u5176\u771f\u6b63\u7684\u7cbe\u9ad3\u3002\u901a\u8fc7\u7b80\u5355\u4fee\u6539 tailwind.config.js<\/code> \u6587\u4ef6\uff0c\u4f60\u53ef\u4ee5\u5b8c\u5168\u91cd\u65b0\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u5305\u62ec\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u3001\u65ad\u70b9\u7b49\uff0c\u4f7f\u5176\u5b8c\u7f8e\u5951\u5408\u4f60\u7684\u9879\u76ee\u8bbe\u8ba1\u89c4\u8303\u3002<\/p>\n\n\n\n

\u672c\u6587\u5c06\u5f15\u5bfc\u4f60\u4ece\u57fa\u7840\u6982\u5ff5\u51fa\u53d1\uff0c\u9010\u6b65\u6df1\u5165\u5230\u9ad8\u7ea7\u6280\u5de7\uff0c\u6700\u7ec8\u80fd\u72ec\u7acb\u4f7f\u7528 Tailwind CSS \u5f00\u53d1\u51fa\u7b26\u5408\u751f\u4ea7\u6807\u51c6\u7684\u3001\u53ef\u590d\u7528\u7684\u5b9e\u7528\u7ec4\u4ef6\uff0c\u5b9e\u73b0\u4ece\u201c\u4f1a\u7528\u201d\u5230\u201c\u7cbe\u901a\u201d\u7684\u8de8\u8d8a\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb \u89e3\u9501 Tailwind CSS \u7684\u5f3a\u5927\u529f\u80fd\uff1a\u5b9e\u7528\u7a0b\u5e8f\u4f18\u5148 CSS \u6846\u67b6\u7684\u5b8c\u6574\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n

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

\u5728\u5f00\u59cb\u7f16\u5199\u4ee3\u7801\u4e4b\u524d\uff0c\u5efa\u7acb\u5bf9\u51e0\u4e2a\u6838\u5fc3\u6982\u5ff5\u7684\u6b63\u786e\u7406\u89e3\u81f3\u5173\u91cd\u8981\u3002\u8fd9\u80fd\u5e2e\u52a9\u4f60\u5728\u540e\u7eed\u5f00\u53d1\u4e2d\u505a\u51fa\u66f4\u5408\u7406\u7684\u8bbe\u8ba1\u51b3\u7b56\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

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

Tailwind CSS \u7684\u5b9e\u7528\u7c7b\u672c\u8d28\u4e0a\u662f\u5bf9 CSS \u5c5e\u6027\u7684\u5355\u4e00\u6620\u5c04\u3002\u4f8b\u5982\uff0c\u7c7b\u540d text-center<\/code> \u5bf9\u5e94 text-align: center;<\/code>\uff0c\u800c bg-blue-500<\/code> \u5219\u662f\u4e00\u4e2a\u590d\u5408\u6620\u5c04\uff0c\u5b83\u5bf9\u5e94 background-color: #3b82f6;<\/code>\u3002\u6846\u67b6\u5728\u6784\u5efa\u65f6\uff0c\u4f1a\u626b\u63cf\u4f60\u7684\u9879\u76ee\u6587\u4ef6\uff0c\u5c06\u8fd9\u4e9b\u4f7f\u7528\u5230\u7684\u7c7b\u540d\u751f\u6210\u5bf9\u5e94\u7684 CSS\u3002<\/p>\n\n\n\n

\u8fd9\u79cd\u65b9\u5f0f\u7684\u4f18\u52bf\u5728\u4e8e\uff0c\u5b83\u751f\u6210\u7684 CSS \u6587\u4ef6\u53ea\u5305\u542b\u4f60\u5b9e\u9645\u7528\u5230\u7684\u6837\u5f0f\uff0c\u4ece\u800c\u6781\u5927\u5730\u4f18\u5316\u4e86\u6700\u7ec8\u4ea7\u7269\u7684\u4f53\u79ef\u3002\u4f60\u65e0\u9700\u624b\u52a8\u7ba1\u7406\u4e00\u4e2a\u4e0d\u65ad\u81a8\u80c0\u7684 CSS \u6587\u4ef6\uff0c\u6846\u67b6\u5de5\u5177\u94fe\uff08\u5982 PostCSS\uff09\u4f1a\u4e3a\u4f60\u5904\u7406\u8fd9\u4e00\u5207\u3002<\/p>\n\n\n\n

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

Tailwind CSS \u5185\u7f6e\u4e86\u4e00\u5957\u79fb\u52a8\u4f18\u5148\u7684\u54cd\u5e94\u5f0f\u65ad\u70b9\u7cfb\u7edf\u3002\u9ed8\u8ba4\u7684\u65ad\u70b9\u5305\u62ec sm<\/code>\u3001md<\/code>\u3001lg<\/code>\u3001xl<\/code>\u30012xl<\/code>\u3002\u8981\u4e3a\u67d0\u4e2a\u5b9e\u7528\u7c7b\u6dfb\u52a0\u54cd\u5e94\u5f0f\u884c\u4e3a\uff0c\u53ea\u9700\u5728\u5176\u524d\u9762\u52a0\u4e0a\u65ad\u70b9\u524d\u7f00\u3002<\/p>\n\n\n\n

\u4f8b\u5982\uff0ctext-sm md:text-base lg:text-lg<\/code> \u8868\u793a\u5728\u79fb\u52a8\u7aef\u4f7f\u7528\u5c0f\u5b57\u53f7\uff0c\u5728\u4e2d\u7b49\u5c4f\u5e55\u4e0a\u4f7f\u7528\u57fa\u7840\u5b57\u53f7\uff0c\u5728\u5927\u5c4f\u5e55\u4e0a\u4f7f\u7528\u5927\u5b57\u53f7\u3002\u8fd9\u79cd\u76f4\u63a5\u5728 HTML \u4e2d\u58f0\u660e\u54cd\u5e94\u5f0f\u903b\u8f91\u7684\u65b9\u5f0f\uff0c\u4f7f\u5f97\u4e0d\u540c\u5c4f\u5e55\u5c3a\u5bf8\u4e0b\u7684\u6837\u5f0f\u53d8\u5316\u4e00\u76ee\u4e86\u7136\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb \u5168\u9762\u638c\u63e1 Tailwind CSS \u5b9e\u7528\u6307\u5357\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1<\/a>\u3002<\/p>\n\n\n\n\n

\u72b6\u6001\u53d8\u91cf\u4e0e\u4f2a\u7c7b\u524d\u7f00<\/h3>\n\n\n\n

\u9664\u4e86\u54cd\u5e94\u5f0f\uff0cTailwind \u8fd8\u901a\u8fc7\u524d\u7f00\u652f\u6301\u5404\u79cd\u72b6\u6001\uff0c\u5982\u60ac\u505c\uff08hover:<\/code>\uff09\u3001\u805a\u7126\uff08focus:<\/code>\uff09\u3001\u6fc0\u6d3b\uff08active:<\/code>\uff09\u7b49\u3002\u8fd9\u4f7f\u5f97\u4e3a\u4ea4\u4e92\u5143\u7d20\u6dfb\u52a0\u72b6\u6001\u6837\u5f0f\u53d8\u5f97\u5f02\u5e38\u7b80\u5355\u3002<\/p>\n\n\n\n

\u4f60\u53ef\u4ee5\u8fd9\u6837\u5b9a\u4e49\u4e00\u4e2a\u6309\u94ae\u7684\u60ac\u505c\u6548\u679c\uff1abg-blue-500 hover:bg-blue-700<\/code>\u3002\u8fd9\u79cd\u5199\u6cd5\u5c06\u5143\u7d20\u7684\u57fa\u7840\u72b6\u6001\u548c\u4ea4\u4e92\u72b6\u6001\u7d27\u5bc6\u5730\u7ec4\u7ec7\u5728\u4e00\u8d77\uff0c\u63d0\u9ad8\u4e86\u4ee3\u7801\u7684\u53ef\u8bfb\u6027\u548c\u53ef\u7ef4\u62a4\u6027\u3002<\/p>\n\n\n\n

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

\u4efb\u4f55\u7cbe\u6e5b\u6280\u827a\u7684\u65bd\u5c55\u90fd\u79bb\u4e0d\u5f00\u8d81\u624b\u7684\u5de5\u5177\u3002\u6b63\u786e\u914d\u7f6e\u5f00\u53d1\u73af\u5883\u662f\u9ad8\u6548\u4f7f\u7528 Tailwind CSS \u7684\u7b2c\u4e00\u6b65\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

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

\u5bf9\u4e8e\u5927\u591a\u6570\u73b0\u4ee3\u524d\u7aef\u9879\u76ee\uff08\u5982\u4f7f\u7528 Vite\u3001Next.js \u6216 Create React App \u521b\u5efa\u7684\u9879\u76ee\uff09\uff0c\u5b89\u88c5 Tailwind CSS \u7684\u6700\u4f73\u65b9\u5f0f\u662f\u901a\u8fc7 npm \u6216 yarn\u3002\u9996\u5148\uff0c\u5b89\u88c5 Tailwind \u53ca\u5176\u76f8\u5173\u4f9d\u8d56\u3002<\/p>\n\n\n\n

npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u6267\u884c npx tailwindcss init<\/code> \u547d\u4ee4\u4f1a\u751f\u6210\u4e00\u4e2a\u9ed8\u8ba4\u7684 tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\u3002\u8fd9\u662f\u4f60\u63a7\u5236\u6574\u4e2a Tailwind \u7cfb\u7edf\u7684\u201c\u4e2d\u67a2\u201d\u3002<\/p>\n\n\n\n
\u5173\u952e\u914d\u7f6e\u6587\u4ef6\u8be6\u89e3<\/h3>\n\n\n\n
\u751f\u6210\u7684 tailwind.config.js<\/code> \u6587\u4ef6\u662f\u6838\u5fc3\u3002\u4f60\u9700\u8981\u5728\u6b64\u914d\u7f6e\u6587\u4ef6\u4e2d\u6307\u5b9a\u54ea\u4e9b\u6587\u4ef6\u9700\u8981\u88ab\u626b\u63cf\u4ee5\u63d0\u53d6\u7c7b\u540d\u3002\u8fd9\u901a\u8fc7 content<\/code> \u5b57\u6bb5\u5b8c\u6210\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS \u7ec8\u6781\u6307\u5357\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a\uff0c\u6784\u5efa\u73b0\u4ee3\u5316\u54cd\u5e94\u5f0f\u7f51\u9875<\/a>\u3002<\/p>\n\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,jsx,ts,tsx,vue}"], \/\/ \u6839\u636e\u4f60\u7684\u9879\u76ee\u7ed3\u6784\u8c03\u6574\n  theme: {\n    extend: {\n      colors: {\n        'brand-primary': '#1d4ed8', \/\/ \u6269\u5c55\u81ea\u5b9a\u4e49\u989c\u8272\n      },\n      spacing: {\n        '128': '32rem', \/\/ \u6269\u5c55\u81ea\u5b9a\u4e49\u95f4\u8ddd\n      }\n    },\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u5728 theme.extend<\/code> \u5bf9\u8c61\u4e2d\u6dfb\u52a0\u81ea\u5b9a\u4e49\u503c\uff0c\u8fd9\u662f\u6269\u5c55 Tailwind \u8bbe\u8ba1\u7cfb\u7edf\u63a8\u8350\u7684\u65b9\u5f0f\uff0c\u5b83\u4e0d\u4f1a\u8986\u76d6\u9ed8\u8ba4\u503c\uff0c\u800c\u662f\u6dfb\u52a0\u65b0\u7684\u9009\u9879\u3002<\/p>\n\n\n\n
\u6700\u540e\uff0c\u5728\u4f60\u7684\u4e3b CSS \u6587\u4ef6\uff08\u5982 src\/index.css<\/code> \u6216 src\/App.css<\/code>\uff09\u4e2d\u5bfc\u5165 Tailwind \u7684\u6307\u4ee4\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
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u6784\u5efa\u5b9e\u7528\u4f18\u5148\u7684 UI \u7ec4\u4ef6<\/h2>\n\n\n\n
\u638c\u63e1\u4e86\u57fa\u7840\u6982\u5ff5\u548c\u914d\u7f6e\u540e\uff0c\u5c31\u53ef\u4ee5\u5f00\u59cb\u52a8\u624b\u6784\u5efa\u7ec4\u4ef6\u4e86\u3002\u6211\u4eec\u5c06\u4ece\u4e00\u4e2a\u7b80\u5355\u7684\u6309\u94ae\u7ec4\u4ef6\u5f00\u59cb\uff0c\u9010\u6b65\u589e\u52a0\u590d\u6742\u5ea6\u3002<\/p>\n\n\n\n
\u521b\u5efa\u57fa\u7840\u6309\u94ae<\/h3>\n\n\n\n
\u4e00\u4e2a\u57fa\u7840\u7684\u6309\u94ae\u901a\u5e38\u5305\u542b\u5185\u8fb9\u8ddd\u3001\u5706\u89d2\u3001\u80cc\u666f\u8272\u3001\u6587\u5b57\u989c\u8272\u548c\u5b57\u4f53\u3002\u4f7f\u7528 Tailwind \u7684\u5b9e\u7528\u7c7b\uff0c\u4f60\u53ef\u4ee5\u8fc5\u901f\u7ec4\u5408\u51fa\u8fd9\u4e9b\u6837\u5f0f\u3002<\/p>\n\n\n\n
<button class="px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold">\n  \u70b9\u51fb\u6211\n<\/button><\/code><\/pre>\n\n\n\n
\u8fd9\u6bb5\u4ee3\u7801\u521b\u5efa\u4e86\u4e00\u4e2a\u5177\u6709\u4e2d\u7b49\u5185\u8fb9\u8ddd\u3001\u5927\u5706\u89d2\u3001\u84dd\u8272\u80cc\u666f\u3001\u767d\u8272\u52a0\u7c97\u6587\u5b57\u7684\u6309\u94ae\u3002\u6240\u6709\u6837\u5f0f\u58f0\u660e\u90fd\u96c6\u4e2d\u5728 HTML \u7684 class<\/code> \u5c5e\u6027\u4e2d\u3002<\/p>\n\n\n\n
\u4e3a\u6309\u94ae\u6dfb\u52a0\u4ea4\u4e92\u4e0e\u72b6\u6001<\/h3>\n\n\n\n
\u9759\u6001\u6309\u94ae\u662f\u57fa\u7840\uff0c\u4ea4\u4e92\u72b6\u6001\uff08\u60ac\u505c\u3001\u7126\u70b9\uff09\u548c\u7981\u7528\u72b6\u6001\u624d\u662f\u7528\u6237\u4f53\u9a8c\u7684\u5173\u952e\u3002\u4f7f\u7528\u72b6\u6001\u524d\u7f00\u53ef\u4ee5\u8f7b\u677e\u5b9e\u73b0\u3002<\/p>\n\n\n\n
<button class="px-4 py-2 rounded-lg bg-blue-600 text-white font-semibold hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed">\n  \u4ea4\u4e92\u6309\u94ae\n<\/button><\/code><\/pre>\n\n\n\n
\u8fd9\u91cc\uff0c\u6211\u4eec\u6dfb\u52a0\u4e86\u60ac\u505c\u65f6\u989c\u8272\u53d8\u6df1\uff08hover:bg-blue-700<\/code>\uff09\uff0c\u805a\u7126\u65f6\u53bb\u9664\u9ed8\u8ba4\u8f6e\u5ed3\u5e76\u6dfb\u52a0\u4e00\u4e2a\u73af\u72b6\u9634\u5f71\uff08focus:ring-2 focus:ring-blue-500...<\/code>\uff09\uff0c\u4ee5\u53ca\u7981\u7528\u65f6\u964d\u4f4e\u900f\u660e\u5ea6\u5e76\u6539\u53d8\u9f20\u6807\u6307\u9488\uff08disabled:opacity-50...<\/code>\uff09\u3002<\/p>\n\n\n\n
\u6784\u5efa\u5361\u7247\u7ec4\u4ef6<\/h3>\n\n\n\n
\u5361\u7247\u7ec4\u4ef6\u662f\u5c55\u793a\u4fe1\u606f\u7684\u5e38\u89c1\u5bb9\u5668\u3002\u5b83\u901a\u5e38\u5305\u542b\u8fb9\u6846\u3001\u9634\u5f71\u3001\u5185\u8fb9\u8ddd\u548c\u53ef\u80fd\u7684\u6807\u9898\u533a\u57df\u3002<\/p>\n\n\n\n
<div class="max-w-sm rounded-xl overflow-hidden shadow-lg border border-gray-200">\n  <div class="px-6 py-4">\n    <div class="font-bold text-xl mb-2">\u5361\u7247\u6807\u9898<\/div>\n    <p class="text-gray-700 text-base">\n      \u8fd9\u91cc\u662f\u5361\u7247\u7684\u8be6\u7ec6\u63cf\u8ff0\u5185\u5bb9\uff0c\u53ef\u4ee5\u5c55\u793a\u4e00\u6bb5\u8f83\u957f\u7684\u6587\u672c\u4fe1\u606f\u3002\n    <\/p>\n  <\/div>\n  <div class="px-6 pt-4 pb-6">\n    <span class="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#\u6807\u7b7e1<\/span>\n    <span class="inline-block bg-gray-100 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#\u6807\u7b7e2<\/span>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u4f8b\u5b50\u5c55\u793a\u4e86\u5982\u4f55\u7ec4\u5408\u591a\u4e2a\u5b9e\u7528\u7c7b\u6765\u521b\u5efa\u5177\u6709\u5c42\u6b21\u611f\u548c\u89c6\u89c9\u6df1\u5ea6\u7684\u5e03\u5c40\uff0c\u5305\u62ec\u63a7\u5236\u6700\u5927\u5bbd\u5ea6\u3001\u5706\u89d2\u3001\u9634\u5f71\u3001\u8fb9\u6846\u4ee5\u53ca\u5185\u90e8\u5143\u7d20\u7684\u6392\u7248\u3002<\/p>\n\n\n\n
\u9ad8\u7ea7\u6280\u5de7\u4e0e\u6700\u4f73\u5b9e\u8df5<\/h2>\n\n\n\n
\u5f53\u4f60\u80fd\u719f\u7ec3\u6784\u5efa\u57fa\u7840\u7ec4\u4ef6\u540e\uff0c\u8fd0\u7528\u4e00\u4e9b\u9ad8\u7ea7\u6280\u5de7\u548c\u9075\u5faa\u6700\u4f73\u5b9e\u8df5\u80fd\u8ba9\u4f60\u7684\u4ee3\u7801\u66f4\u4e13\u4e1a\u3001\u66f4\u6613\u7ef4\u62a4\u3002<\/p>\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\u4f7f\u7528\u5b9e\u7528\u7c7b\u5f88\u65b9\u4fbf\uff0c\u4f46\u5f53\u540c\u4e00\u4e2a\u590d\u6742\u7684\u6837\u5f0f\u7ec4\u5408\u5728\u591a\u5904\u91cd\u590d\u4f7f\u7528\u65f6\uff0c\u4ee3\u7801\u4f1a\u53d8\u5f97\u5197\u957f\u4e14\u96be\u4ee5\u7ef4\u62a4\u3002\u6b64\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u63d0\u53d6\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\u7c7b\u3002<\/p>\n\n\n\n
\u5728\u4f60\u7684 CSS \u6587\u4ef6\u4e2d\uff08\u5728 @tailwind utilities;<\/code> \u4e4b\u540e\uff09\uff0c\u53ef\u4ee5\u8fd9\u6837\u505a\uff1a<\/p>\n\n\n\n
.btn-primary {\n  @apply px-4 py-2 rounded-lg font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2;\n  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;\n  @apply disabled:opacity-50 disabled:cursor-not-allowed;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u5728 HTML \u4e2d\u53ea\u9700\u4f7f\u7528 class=\"btn-primary\"<\/code> \u5373\u53ef\u3002\u8bf7\u6ce8\u610f\uff0c\u8fc7\u5ea6\u4f7f\u7528 @apply<\/code> \u4f1a\u56de\u5f52\u5230\u7f16\u5199\u4f20\u7edf CSS \u7684\u8001\u8def\uff0c\u5931\u53bb\u90e8\u5206\u5b9e\u7528\u4f18\u5148\u7684\u4f18\u52bf\uff0c\u56e0\u6b64\u5efa\u8bae\u4ec5\u7528\u4e8e\u9ad8\u5ea6\u91cd\u590d\u3001\u903b\u8f91\u56fa\u5b9a\u7684\u6837\u5f0f\u5757\u3002<\/p>\n\n\n\n
\u81ea\u5b9a\u4e49\u63d2\u4ef6\u4e0e\u52a8\u6001\u7c7b\u540d<\/h3>\n\n\n\n
\u5bf9\u4e8e\u66f4\u590d\u6742\u7684\u3001\u9700\u8981\u903b\u8f91\u5224\u65ad\u7684\u7c7b\u540d\u7ec4\u5408\uff0c\u7279\u522b\u662f\u5728 JavaScript \u6846\u67b6\uff08\u5982 React\u3001Vue\uff09\u4e2d\uff0c\u5efa\u8bae\u5728\u7ec4\u4ef6\u5c42\u8fdb\u884c\u52a8\u6001\u8ba1\u7b97\uff0c\u800c\u4e0d\u662f\u5728 CSS \u4e2d\u4f7f\u7528 @apply<\/code>\u3002<\/p>\n\n\n\n
\u4f8b\u5982\uff0c\u5728 React \u4e2d\u521b\u5efa\u4e00\u4e2a\u53ef\u914d\u7f6e\u7684\u6309\u94ae\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n
function Button({ children, variant = 'primary', ...props }) {\n  const baseClasses = "px-4 py-2 rounded-lg font-semibold focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed";\n  const variantClasses = {\n    primary: "bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500",\n    secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500",\n    danger: "bg-red-600 text-white hover:bg-red-700 focus:ring-red-500",\n  };\n  const className = `${baseClasses} ${variantClasses[variant]}`;\n  return <button className={className} {...props}>{children}<\/button>;\n}<\/code><\/pre>\n\n\n\n
\u6027\u80fd\u4f18\u5316\u4e0e\u751f\u4ea7\u6784\u5efa<\/h3>\n\n\n\n
\u786e\u4fdd\u5728\u5f00\u53d1\u548c\u751f\u4ea7\u73af\u5883\u4e2d\u6b63\u786e\u914d\u7f6e\u3002\u5728\u751f\u4ea7\u6784\u5efa\u65f6\uff0cTailwind \u4f1a\u4f7f\u7528 purge<\/code>\uff08\u6216 content<\/code> \u914d\u7f6e\uff09\u6765\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684\u6837\u5f0f\uff0c\u56e0\u6b64\u52a1\u5fc5\u786e\u4fdd tailwind.config.js<\/code> \u4e2d\u7684 content<\/code> \u8def\u5f84\u5305\u542b\u4e86\u6240\u6709\u53ef\u80fd\u4f7f\u7528 Tailwind \u7c7b\u540d\u7684\u6587\u4ef6\u3002<\/p>\n\n\n\n
\u5bf9\u4e8e\u4f7f\u7528 JIT\uff08\u5373\u65f6\uff09\u6a21\u5f0f\u7684\u9879\u76ee\uff08Tailwind CSS v2.1+ \u9ed8\u8ba4\u542f\u7528\uff09\uff0c\u5f00\u53d1\u4f53\u9a8c\u4f1a\u6781\u5176\u5feb\u901f\uff0c\u56e0\u4e3a\u5b83\u53ea\u751f\u6210\u4f60\u6b63\u5728\u4f7f\u7528\u7684 CSS\u3002\u4f60\u53ea\u9700\u5173\u6ce8\u751f\u4ea7\u6784\u5efa\u7684\u6700\u7ec8\u4f53\u79ef\u5373\u53ef\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS \u901a\u8fc7\u5176\u72ec\u7279\u7684\u201c\u5b9e\u7528\u4f18\u5148\u201d\u65b9\u6cd5\u8bba\uff0c\u4ece\u6839\u672c\u4e0a\u6539\u53d8\u4e86\u6211\u4eec\u7f16\u5199\u6837\u5f0f\u7684\u65b9\u5f0f\u3002\u5b83\u6d88\u9664\u4e86\u5728\u6587\u4ef6\u95f4\u5207\u6362\u7684\u4e0a\u4e0b\u6587\u6210\u672c\uff0c\u5c06\u6837\u5f0f\u51b3\u7b56\u76f4\u63a5\u5448\u73b0\u5728\u6807\u8bb0\u8bed\u8a00\u4e2d\uff0c\u5e76\u901a\u8fc7\u5f3a\u5927\u7684\u7ea6\u675f\u7cfb\u7edf\uff08\u8bbe\u8ba1\u4ee4\u724c\uff09\u4fdd\u8bc1\u4e86\u8bbe\u8ba1\u7684\u4e00\u81f4\u6027\u3002\u4ece\u7406\u89e3\u6838\u5fc3\u6982\u5ff5\u3001\u914d\u7f6e\u73af\u5883\uff0c\u5230\u6784\u5efa\u57fa\u7840\u548c\u9ad8\u9636\u7ec4\u4ef6\uff0c\u518d\u5230\u638c\u63e1\u63d0\u53d6\u7ec4\u4ef6\u548c\u6027\u80fd\u4f18\u5316\u7684\u6700\u4f73\u5b9e\u8df5\uff0c\u8fd9\u6761\u5b66\u4e60\u8def\u5f84\u65e8\u5728\u5e2e\u52a9\u4f60\u4e0d\u4ec5\u80fd\u591f\u4f7f\u7528 Tailwind\uff0c\u66f4\u80fd\u4ee5\u7b26\u5408\u5176\u54f2\u5b66\u7684\u65b9\u5f0f\u9ad8\u6548\u5730\u6784\u5efa\u53ef\u7ef4\u62a4\u7684\u73b0\u4ee3\u7528\u6237\u754c\u9762\u3002\u8bb0\u4f4f\uff0c\u7cbe\u901a\u7684\u5173\u952e\u5728\u4e8e\u5b9e\u8df5\u2014\u2014\u4e0d\u65ad\u6784\u5efa\uff0c\u4e0d\u65ad\u91cd\u6784\uff0c\u4f60\u81ea\u7136\u4f1a\u9886\u7565\u5230\u5176\u5b9e\u7528\u4e4b\u7f8e\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 CSS \u4f7f\u7528 PurgeCSS\uff08\u6216\u5185\u7f6e\u7684\u6e05\u9664\u529f\u80fd\uff09\u6765\u626b\u63cf\u4f60\u7684\u4ee3\u7801\uff0c\u5e76\u53ea\u5c06\u4f60\u5b9e\u9645\u4f7f\u7528\u5230\u7684\u5b9e\u7528\u7c7b\u5305\u542b\u5728\u6700\u7ec8\u7684 CSS \u6587\u4ef6\u4e2d\u3002\u8fd9\u610f\u5473\u7740\u5728\u751f\u4ea7\u73af\u5883\u4e2d\uff0c\u6700\u7ec8\u7684 CSS \u6587\u4ef6\u901a\u5e38\u53ea\u6709\u51e0 KB \u5230\u5341\u51e0 KB\uff0c\u975e\u5e38\u7cbe\u7b80\u3002<\/p>\n\n\n\n
\u5728\u56e2\u961f\u9879\u76ee\u4e2d\uff0c\u5982\u4f55\u4fdd\u8bc1 Tailwind \u7c7b\u540d\u4e66\u5199\u7684\u4e00\u81f4\u6027\uff1f<\/h3>\n\n\n\n
\u53ef\u4ee5\u7ed3\u5408\u4f7f\u7528\u7f16\u8f91\u5668\u6269\u5c55\uff08\u5982 Tailwind CSS IntelliSense\uff09\uff0c\u5b83\u63d0\u4f9b\u81ea\u52a8\u8865\u5168\u548c\u8bed\u6cd5\u9ad8\u4eae\u3002\u540c\u65f6\uff0c\u5728\u56e2\u961f\u5185\u5236\u5b9a\u7b80\u5355\u7684\u7ea6\u5b9a\uff0c\u4f8b\u5982\u6309\u7167\u5e03\u5c40\u3001\u5c3a\u5bf8\u3001\u6392\u7248\u3001\u989c\u8272\u3001\u72b6\u6001\u7b49\u987a\u5e8f\u7ec4\u7ec7\u7c7b\u540d\uff0c\u5e76\u4f7f\u7528 Prettier \u63d2\u4ef6\uff08\u5982 prettier-plugin-tailwindcss<\/code>\uff09\u8fdb\u884c\u81ea\u52a8\u6392\u5e8f\u3002<\/p>\n\n\n\n
\u80fd\u5426\u4e0e CSS-in-JS \u5e93\uff08\u5982 styled-components\uff09\u4e00\u8d77\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
\u867d\u7136\u53ef\u4ee5\uff0c\u4f46\u4e0d\u63a8\u8350\uff0c\u56e0\u4e3a\u5b83\u4eec\u7684\u8303\u5f0f\u5b58\u5728\u51b2\u7a81\u3002Tailwind \u7684\u6838\u5fc3\u7406\u5ff5\u662f\u4f7f\u7528\u9884\u5b9a\u4e49\u7684\u5b9e\u7528\u7c7b\uff0c\u800c CSS-in-JS \u63d0\u5021\u5728 JavaScript \u4e2d\u52a8\u6001\u751f\u6210\u6837\u5f0f\u3002\u6df7\u5408\u4f7f\u7528\u4f1a\u5bfc\u81f4\u6280\u672f\u6808\u590d\u6742\u5ea6\u548c\u5fc3\u667a\u8d1f\u62c5\u589e\u52a0\u3002\u901a\u5e38\u5efa\u8bae\u5728\u9879\u76ee\u4e2d\u4e8c\u9009\u4e00\u3002<\/p>\n\n\n\n
\u5982\u4f55\u5904\u7406\u9700\u8981\u9ad8\u5ea6\u5b9a\u5236\u8bbe\u8ba1\u7684\u8001\u9879\u76ee\uff1f<\/h3>\n\n\n\n
Tailwind CSS \u7684\u914d\u7f6e\u6027\u6781\u5f3a\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u4fee\u6539 tailwind.config.js<\/code> \u6587\u4ef6\u4e2d\u7684 theme<\/code> \u90e8\u5206\uff0c\u5b8c\u5168\u91cd\u65b0\u5b9a\u4e49\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u3001\u65ad\u70b9\u7b49\u8bbe\u8ba1\u4ee4\u724c\uff0c\u4f7f\u5176\u4e0e\u73b0\u6709\u8bbe\u8ba1\u7cfb\u7edf\u5339\u914d\u3002\u4f60\u8fd8\u53ef\u4ee5\u901a\u8fc7 @layer<\/code> \u6307\u4ee4\u6dfb\u52a0\u5b8c\u5168\u81ea\u5b9a\u4e49\u7684\u57fa\u7840\u6837\u5f0f\u6216\u7ec4\u4ef6\u7c7b\uff0c\u5b9e\u73b0\u6e10\u8fdb\u5f0f\u8fc1\u79fb\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Cet article pr\u00e9sente de mani\u00e8re syst\u00e9matique le framework Tailwind CSS, en mettant l'accent sur sa philosophie de \u201c\u00a0priorit\u00e9 des fonctionnalit\u00e9s\u00a0\u201d et sa grande personnalisabilit\u00e9. Il couvre des concepts fondamentaux tels que le principe des classes utilitaires, les points de rupture r\u00e9actifs et les pr\u00e9fixes d'\u00e9tat, et fournit des directives pour la configuration de l'environnement et la personnalisation du syst\u00e8me de design. Il vise \u00e0 aider les d\u00e9veloppeurs \u00e0 commencer par les bases et \u00e0 ma\u00eetriser finalement l'utilisation de Tailwind pour d\u00e9velopper des composants pratiques r\u00e9utilisables et conformes aux normes de production.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,430,367,2301],"knowledge_category":[281],"class_list":["post-12379152","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-frontend-development","tag-responsive-design","tag-practical-guides","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, \u5b9e\u7528\u4f18\u5148CSS\u6846\u67b6, \u7ec4\u4ef6\u5f00\u53d1, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u524d\u7aef\u5f00\u53d1, \u4ece\u5165\u95e8\u5230\u7cbe\u901a, \u5b9a\u5236\u5316\u914d\u7f6e, \u5b9e\u7528\u7c7b\u6784\u5efa"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_posts\/12379152","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\/12379152\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/media?parent=12379152"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/tags?post=12379152"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/fr\/wp-json\/wp\/v2\/knowledge_category?post=12379152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}