{"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\/en\/knowledge\/website-building\/tailwind-css-guide-practical-component-development\/","title":{"rendered":"Master Tailwind CSS: A Practical Guide to Developing Components, from Beginner to Expert Level"},"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":"
This article provides a comprehensive introduction to the Tailwind CSS framework, emphasizing its philosophy of \u201cfunctionality first\u201d and its high level of customizability. The content covers core concepts such as the principles behind utility classes, responsive breakpoints, and state prefixes, and also provides guidance on setting up the development environment and customizing the design system. The aim is to help developers get started from the basics and eventually master the use of Tailwind to create reusable components that meet production standards.<\/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\/en\/wp-json\/wp\/v2\/knowledge_posts\/12379152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_posts\/12379152\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/media?parent=12379152"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/tags?post=12379152"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/en\/wp-json\/wp\/v2\/knowledge_category?post=12379152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}