{"id":12363835,"date":"2026-03-12T20:44:30","date_gmt":"2026-03-12T12:44:30","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e5%85%a5%e9%97%a8%e4%b8%8e%e5%ae%9e%e6%88%98%ef%bc%9a%e4%bb%8e%e9%9b%b6%e6%9e%84%e5%bb%ba%e7%8e%b0%e4%bb%a3%e5%8c%96%e5%93%8d%e5%ba%94%e5%bc%8f%e7%95%8c%e9%9d%a2\/"},"modified":"2026-03-12T20:45:08","modified_gmt":"2026-03-12T12:45:08","slug":"tailwind-css-tutorial-build-modern-responsive-ui","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/tr\/knowledge\/website-building\/tailwind-css-tutorial-build-modern-responsive-ui\/","title":{"rendered":"Tailwind CSS\u2019e Giri\u015f ve Uygulamalar\u0131: S\u0131f\u0131rdan Modern, Yan\u0131t Veren Aray\u00fczler Olu\u015fturma"},"content":{"rendered":"\n

\u5728\u73b0\u4ee3\u524d\u7aef\u5f00\u53d1\u4e2d\uff0c\u5feb\u901f\u6784\u5efa\u7f8e\u89c2\u4e14\u4e00\u81f4\u7684\u754c\u9762\u662f\u4e00\u9879\u6838\u5fc3\u6311\u6218\u3002\u4f20\u7edf\u7684 CSS \u7f16\u5199\u65b9\u5f0f\u5e38\u4f34\u968f\u7740\u6837\u5f0f\u5197\u4f59\u3001\u547d\u540d\u56f0\u6270\u548c\u7ef4\u62a4\u56f0\u96be\u3002Tailwind CSS<\/code> \u4f5c\u4e3a\u4e00\u79cd\u5b9e\u7528\u4f18\u5148\u7684 CSS \u6846\u67b6\uff0c\u901a\u8fc7\u63d0\u4f9b\u4e00\u7cfb\u5217\u4f4e\u7ea7\u7684\u3001\u53ef\u7ec4\u5408\u7684\u5b9e\u7528\u7c7b\uff0c\u8ba9\u5f00\u53d1\u8005\u80fd\u591f\u76f4\u63a5\u5728 HTML \u4e2d\u5feb\u901f\u6784\u5efa\u4efb\u4f55\u8bbe\u8ba1\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u7f16\u5199\u6837\u5f0f\u7684\u65b9\u5f0f\u3002<\/p>\n\n\n\n

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

\u8981\u9ad8\u6548\u4f7f\u7528 Tailwind CSS<\/code>\uff0c\u9996\u5148\u9700\u8981\u7406\u89e3\u5176\u8bbe\u8ba1\u54f2\u5b66\u548c\u51e0\u4e2a\u5173\u952e\u6982\u5ff5\u3002<\/p>\n\n\n\n

\u5b9e\u7528\u4f18\u5148\u7684\u8bbe\u8ba1\u54f2\u5b66<\/h3>\n\n\n\n

Tailwind CSS<\/code> \u7684\u6838\u5fc3\u662f\u201c\u5b9e\u7528\u4f18\u5148\u201d\uff08Utility-First\uff09\u3002\u5b83\u63d0\u4f9b\u4e86\u4e00\u6574\u5957\u7ec6\u7c92\u5ea6\u7684 CSS \u7c7b\uff0c\u6bcf\u4e2a\u7c7b\u901a\u5e38\u53ea\u8d1f\u8d23\u4e00\u4e2a\u5355\u4e00\u7684 CSS \u5c5e\u6027\u3002\u4f8b\u5982\uff0c.text-center<\/code> \u7528\u4e8e\u6587\u672c\u5c45\u4e2d\uff0c.bg-blue-500<\/code> \u7528\u4e8e\u8bbe\u7f6e\u80cc\u666f\u8272\u3002\u901a\u8fc7\u7ec4\u5408\u8fd9\u4e9b\u539f\u5b50\u7c7b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u65e0\u9700\u7f16\u5199\u81ea\u5b9a\u4e49 CSS \u5c31\u80fd\u5b9e\u73b0\u590d\u6742\u7684\u754c\u9762\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb Tailwind CSS \u5165\u95e8\u4e0e\u5b9e\u6218\uff1a\u6784\u5efa\u73b0\u4ee3\u5316\u54cd\u5e94\u5f0f\u7f51\u7ad9\u7684\u5b9e\u7528\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n

\u8fd9\u79cd\u65b9\u5f0f\u5e26\u6765\u4e86\u663e\u8457\u4f18\u52bf\uff1a\u5b83\u6781\u5927\u5730\u9650\u5236\u4e86\u6837\u5f0f\u8868\u7684\u4f53\u79ef\u589e\u957f\uff0c\u56e0\u4e3a\u60a8\u51e0\u4e4e\u4e0d\u9700\u8981\u7f16\u5199\u65b0\u7684 CSS \u4ee3\u7801\uff1b\u5b83\u6d88\u9664\u4e86\u4e3a CSS \u7c7b\u547d\u540d\u7684\u75db\u82e6\uff1b\u5b83\u4f7f\u5f97\u6837\u5f0f\u7684\u4fee\u6539\u53d8\u5f97\u6781\u5176\u76f4\u89c2\uff0c\u56e0\u4e3a\u4fee\u6539\u76f4\u63a5\u5728 HTML \u4e2d\u8fdb\u884c\u3002<\/p>\n\n

\r\n\t\r\n\t\t\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"WordPress.com\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\tWordPress.com \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b<\/strong>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t99.999% \u53ef\u7528\u6027+\u8de8\u533a\u5bb9\u707e\uff0c\u5168\u592924\u5c0f\u65f6\u652f\u6301\uff0c\u8d2d\u4e70\u535a\u5ba2\u5957\u9910\u514d\u8d39\u4f7f\u7528AI\u6784\u5efa\u7f51\u7ad9<\/span>\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t
\u514d\u8d39\u57df\u540d\u4e00\u5e74<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\u8bbf\u95eeWordPress.com \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b \u2192<\/a>\r\n\t\t\t\t\t\t\t<\/div> \r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\t\r\n\t\r\n\t
\r\n\t\t
\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"UltaHost\r\n\t\t\t\t\t\t\t\t\t\r\n\t\t\t<\/div>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t
\r\n\t\t\t\t
\r\n\t\t\t\t\tUltaHost \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b<\/strong>\r\n\t\t\t\t\t\t\t\t\t<\/div>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t\t\t900+\u514d\u8d39\u3001\u53ef\u5b9a\u5236\u7684\u6a21\u677f\uff0c\u83b7\u5f97\u4f18\u5316\u7f51\u7ad9\u641c\u7d22\u66dd\u5149\u6240\u9700\u7684 SEO \u80fd\u529b<\/span>\r\n\t\t\t\t
\r\n\t\t\t\r\n\t\t\t\t\t\t\r\n\t\t\t \r\n\t\t\t
\r\n\t\t\t\t\t\t\t\t
\u4f18\u60e0 40%<\/div>\r\n\t\t\t\t\t\t\t\t\t\t\t\t\u8bbf\u95eeUltaHost \u7f51\u7ad9\u5efa\u8bbe\u52a9\u624b \u2192<\/a>\r\n\t\t\t\t\t\t\t<\/div> \r\n\t\t<\/div>\r\n\t<\/div>\r\n\t\t\r\n<\/div>\r\n\r\n\r\n\n\n\n\n\n\n\n

\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u7684\u5185\u7f6e\u65b9\u6848<\/h3>\n\n\n\n

Tailwind CSS<\/code> \u5c06\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u5185\u7f6e\u5230\u5176\u7c7b\u540d\u4e2d\u3002\u5b83\u4f7f\u7528\u4e00\u5957\u9ed8\u8ba4\u7684\u65ad\u70b9\u7cfb\u7edf\uff08\u5982 sm<\/code>, md<\/code>, lg<\/code>, xl<\/code>, 2xl<\/code>\uff09\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u901a\u8fc7\u5728\u8fd9\u4e9b\u65ad\u70b9\u524d\u7f00\u524d\u6dfb\u52a0\u7c7b\u540d\u6765\u8f7b\u677e\u521b\u5efa\u54cd\u5e94\u5f0f\u5e03\u5c40\u3002<\/p>\n\n\n\n

\u4f8b\u5982\uff0c<div class="text-sm md:text-base lg:text-lg"><\/code> \u8868\u793a\u5728\u4e2d\u7b49\u5c4f\u5e55\u5c3a\u5bf8\u4ee5\u4e0a\uff0c\u5b57\u4f53\u5927\u5c0f\u4ece small<\/code> \u53d8\u4e3a base<\/code>\uff0c\u5728\u5927\u5c4f\u5e55\u4ee5\u4e0a\u53d8\u4e3a large<\/code>\u3002\u8fd9\u79cd\u8bed\u6cd5\u6e05\u6670\u5730\u5c06\u54cd\u5e94\u5f0f\u903b\u8f91\u4e0e\u5185\u5bb9\u7ed1\u5b9a\u5728\u4e00\u8d77\uff0c\u65e0\u9700\u5728\u6837\u5f0f\u8868\u548c HTML \u4e4b\u95f4\u53cd\u590d\u8df3\u8f6c\u3002<\/p>\n\n\n\n

\u81ea\u5b9a\u4e49\u914d\u7f6e\u4e0e\u8bbe\u8ba1\u7cfb\u7edf<\/h3>\n\n\n\n

\u5c3d\u7ba1\u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u9ed8\u8ba4\u503c\uff0cTailwind CSS<\/code> \u5177\u5907\u9ad8\u5ea6\u7684\u53ef\u5b9a\u5236\u6027\u3002\u5176\u6838\u5fc3\u914d\u7f6e\u6587\u4ef6\u662f\u6839\u76ee\u5f55\u4e0b\u7684 tailwind.config.js<\/code>\u3002\u5728\u8fd9\u4e2a\u6587\u4ef6\u4e2d\uff0c\u60a8\u53ef\u4ee5\u5b9a\u4e49\u81ea\u5df1\u7684\u989c\u8272\u8c03\u8272\u677f\u3001\u5b57\u4f53\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u65ad\u70b9\u7b49\uff0c\u4ece\u800c\u8f7b\u677e\u5730\u5c06 Tailwind<\/code> \u4e0e\u60a8\u7684\u54c1\u724c\u8bbe\u8ba1\u7cfb\u7edf\u5bf9\u9f50\u3002<\/p>\n\n\n\n

\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand-blue': '#1d4ed8',\n      },\n      spacing: {\n        '128': '32rem',\n      }\n    },\n  },\n  variants: {},\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u4ece\u96f6\u5f00\u59cb\u642d\u5efa\u5f00\u53d1\u73af\u5883<\/h2>\n\n\n\n
\u8ba9\u6211\u4eec\u4e00\u6b65\u6b65\u642d\u5efa\u4e00\u4e2a\u4f7f\u7528 Tailwind CSS<\/code> \u7684\u9879\u76ee\u73af\u5883\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS \u5165\u95e8\u6307\u5357\uff1a\u4ece\u96f6\u5f00\u59cb\u6784\u5efa\u73b0\u4ee3\u5316\u54cd\u5e94\u5f0f\u7f51\u9875<\/a>\u3002<\/p>\n\n\n\n\n
\u901a\u8fc7 NPM \u5b89\u88c5\u4e0e\u521d\u59cb\u5316<\/h3>\n\n\n\n
\u9996\u5148\uff0c\u5728\u60a8\u7684\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5 Tailwind CSS<\/code> \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
npx tailwindcss init<\/code> \u547d\u4ee4\u4f1a\u521b\u5efa\u4e00\u4e2a\u9ed8\u8ba4\u7684 tailwind.config.js<\/code> \u914d\u7f6e\u6587\u4ef6\u3002\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u9700\u8981\u914d\u7f6e\u8be5\u6587\u4ef6\u4ee5\u6307\u5b9a\u9879\u76ee\u4e2d\u54ea\u4e9b\u6587\u4ef6\u5305\u542b Tailwind<\/code> \u7c7b\u540d\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js}"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u8fd9\u91cc\u7684 content<\/code> \u914d\u7f6e\u9879\u81f3\u5173\u91cd\u8981\uff0c\u5b83\u544a\u8bc9 Tailwind<\/code> \u6784\u5efa\u5de5\u5177\u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4ee5\u5bfb\u627e\u7c7b\u540d\uff0c\u5e76\u6700\u7ec8\u5728\u751f\u6210\u7684 CSS \u4e2d\u53ea\u5305\u542b\u7528\u5230\u7684\u6837\u5f0f\uff0c\u8fd9\u662f\u5b9e\u73b0\u6781\u5c0f\u9c7c\u675f\u7684\u5173\u952e\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
\u521b\u5efa\u57fa\u7840\u6837\u5f0f\u6587\u4ef6\u5e76\u5f15\u5165<\/h3>\n\n\n\n
\u521b\u5efa\u4e00\u4e2a CSS \u6587\u4ef6\uff08\u4f8b\u5982 src\/styles.css<\/code>\uff09\uff0c\u5e76\u5728\u6587\u4ef6\u9876\u90e8\u6dfb\u52a0 Tailwind<\/code> \u7684\u6307\u4ee4\u3002<\/p>\n\n\n\n
\/* src\/styles.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u7136\u540e\uff0c\u5728\u60a8\u7684\u9879\u76ee\u7684 HTML \u5165\u53e3\u6587\u4ef6\u6216 JavaScript \u6846\u67b6\u7684\u6839\u7ec4\u4ef6\u4e2d\u5f15\u5165\u8fd9\u4e2a CSS \u6587\u4ef6\u3002\u6700\u540e\uff0c\u901a\u8fc7\u547d\u4ee4\u884c\u8fd0\u884c Tailwind<\/code> \u7684\u6784\u5efa\u8fc7\u7a0b\uff08\u6216\u5c06\u5176\u96c6\u6210\u5230\u60a8\u7684\u6784\u5efa\u5de5\u5177\u5982 Webpack\u3001Vite \u4e2d\uff09\u3002<\/p>\n\n\n\n
npx tailwindcss -i .\/src\/styles.css -o .\/dist\/output.css --watch<\/code><\/pre>\n\n\n\n
\u8fd9\u6761\u547d\u4ee4\u4f1a\u76d1\u542c content<\/code> \u4e2d\u6307\u5b9a\u7684\u6587\u4ef6\u53d8\u5316\uff0c\u5e76\u5b9e\u65f6\u5c06\u7528\u5230\u7684\u6837\u5f0f\u6784\u5efa\u8f93\u51fa\u5230 .\/dist\/output.css<\/code> \u6587\u4ef6\u4e2d\u3002\u5728 HTML \u4e2d\u5f15\u5165\u8fd9\u4e2a\u8f93\u51fa\u6587\u4ef6\u5373\u53ef\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u7f51\u7ad9\u5efa\u8bbe\u5b8c\u6574\u6307\u5357\uff1a\u4ece\u96f6\u5230\u4e0a\u7ebf\uff0c\u5b9e\u73b0\u73b0\u4ee3\u9ad8\u6548\u5efa\u7ad9\u6d41\u7a0b<\/a>\u3002<\/p>\n\n\n\n\n
\u5b9e\u6218\uff1a\u6784\u5efa\u4e00\u4e2a\u54cd\u5e94\u5f0f\u5361\u7247\u7ec4\u4ef6<\/h2>\n\n\n\n
\u7406\u8bba\u7ed3\u5408\u5b9e\u8df5\uff0c\u6211\u4eec\u73b0\u5728\u6784\u5efa\u4e00\u4e2a\u5e38\u89c1\u7684\u54cd\u5e94\u5f0f\u5361\u7247\u7ec4\u4ef6\uff0c\u6db5\u76d6\u5e03\u5c40\u3001\u95f4\u8ddd\u3001\u989c\u8272\u548c\u54cd\u5e94\u5f0f\u8c03\u6574\u3002<\/p>\n\n\n\n
\u5b9a\u4e49\u5361\u7247\u7684\u57fa\u7840\u7ed3\u6784\u4e0e\u6837\u5f0f<\/h3>\n\n\n\n
\u6211\u4eec\u9996\u5148\u6784\u5efa\u4e00\u4e2a\u5728\u79fb\u52a8\u7aef\u5782\u76f4\u5806\u53e0\uff0c\u5728\u684c\u9762\u7aef\u6c34\u5e73\u6392\u5217\u7684\u5361\u7247\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
<div class="max-w-4xl mx-auto p-4">\n  <div class="bg-white rounded-xl shadow-md overflow-hidden md:flex">\n    <!-- \u56fe\u7247\u533a\u57df -->\n    <div class="md:w-1\/3">\n      <img class="h-48 w-full object-cover md:h-full"\n           src="https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3"\n           alt="\u793a\u4f8b\u56fe\u7247">\n    <\/div>\n    <!-- \u5185\u5bb9\u533a\u57df -->\n    <div class="p-8 md:w-2\/3">\n      <div class="uppercase tracking-wide text-sm text-brand-blue font-semibold">\u6559\u7a0b<\/div>\n      <h2 class="mt-2 text-2xl font-bold text-gray-900">Tailwind CSS \u5b9e\u6218\u6307\u5357<\/h2>\n      <p class="mt-4 text-gray-600">\u5b66\u4e60\u5982\u4f55\u4f7f\u7528\u5b9e\u7528\u4f18\u5148\u7684\u6846\u67b6\u5feb\u901f\u6784\u5efa\u73b0\u4ee3\u5316\u7528\u6237\u754c\u9762\uff0c\u65e0\u9700\u79bb\u5f00\u60a8\u7684HTML\u3002<\/p>\n      <div class="mt-6 flex items-center">\n        <img class="h-10 w-10 rounded-full"\n             src="https:\/\/i.pravatar.cc\/150?img=1"\n             alt="\u4f5c\u8005\u5934\u50cf">\n        <div class="ml-4">\n          <p class="text-gray-900 font-medium">\u6280\u672f\u535a\u4e3b<\/p>\n          <p class="text-gray-500">\u53d1\u5e03\u4e8e 2026\u5e743\u6708<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c\u6211\u4eec\u4f7f\u7528 .md:flex<\/code> \u5728\u4e2d\u7b49\u65ad\u70b9\u53ca\u4ee5\u4e0a\u5f00\u542f\u5f39\u6027\u5e03\u5c40\u3002.md:w-1\/3<\/code> \u548c .md:w-2\/3<\/code> \u63a7\u5236\u4e86\u4e24\u90e8\u5206\u5728\u684c\u9762\u7aef\u7684\u5bbd\u5ea6\u6bd4\u4f8b\u3002.mx-auto<\/code> \u548c .max-w-4xl<\/code> \u5b9e\u73b0\u4e86\u5361\u7247\u6574\u4f53\u5c45\u4e2d\u5e76\u9650\u5236\u6700\u5927\u5bbd\u5ea6\u3002\u989c\u8272\u3001\u5706\u89d2\u3001\u9634\u5f71\u7b49\u6837\u5f0f\u90fd\u901a\u8fc7\u5b9e\u7528\u7c7b\u76f4\u89c2\u5730\u8868\u8fbe\u3002<\/p>\n\n\n\n
\u6dfb\u52a0\u4ea4\u4e92\u72b6\u6001\u4e0e\u60ac\u505c\u6548\u679c<\/h3>\n\n\n\n
\u4f18\u79c0\u7684\u7ec4\u4ef6\u9700\u8981\u4ea4\u4e92\u53cd\u9988\u3002\u8ba9\u6211\u4eec\u4e3a\u5361\u7247\u6807\u9898\u548c\u6574\u4e2a\u5361\u7247\u5bb9\u5668\u6dfb\u52a0\u4e00\u4e9b\u60ac\u505c\u6548\u679c\u3002<\/p>\n\n\n\n
<div class="max-w-4xl mx-auto p-4">\n  <div class="bg-white rounded-xl shadow-md overflow-hidden md:flex hover:shadow-xl transition-shadow duration-300">\n    <!-- \u56fe\u7247\u533a\u57df -->\n    <div class="md:w-1\/3">\n      <img class="h-48 w-full object-cover md:h-full"\n           src="https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3"\n           alt="\u793a\u4f8b\u56fe\u7247">\n    <\/div>\n    <!-- \u5185\u5bb9\u533a\u57df -->\n    <div class="p-8 md:w-2\/3">\n      <div class="uppercase tracking-wide text-sm text-brand-blue font-semibold">\u6559\u7a0b<\/div>\n      <a href="#" class="mt-2 block text-2xl font-bold text-gray-900 hover:text-brand-blue transition-colors duration-200">Tailwind CSS \u5b9e\u6218\u6307\u5357<\/a>\n      <p class="mt-4 text-gray-600">\u5b66\u4e60\u5982\u4f55\u4f7f\u7528\u5b9e\u7528\u4f18\u5148\u7684\u6846\u67b6\u5feb\u901f\u6784\u5efa\u73b0\u4ee3\u5316\u7528\u6237\u754c\u9762\uff0c\u65e0\u9700\u79bb\u5f00\u60a8\u7684HTML\u3002<\/p>\n      <!-- \u4f5c\u8005\u4fe1\u606f\u90e8\u5206\u4fdd\u6301\u4e0d\u53d8 -->\n    <\/div>\n  <\/div>\n<\/div><\/code><\/pre>\n\n\n\n
\u6211\u4eec\u4e3a\u5916\u5c42\u5bb9\u5668\u6dfb\u52a0\u4e86 .hover:shadow-xl<\/code> \u548c .transition-shadow<\/code>\uff0c\u4f7f\u5176\u5728\u9f20\u6807\u60ac\u505c\u65f6\u9634\u5f71\u53d8\u5927\u5e76\u5e26\u6709\u5e73\u6ed1\u8fc7\u6e21\u3002\u6807\u9898\u94fe\u63a5\u6dfb\u52a0\u4e86 .hover:text-brand-blue<\/code> \u548c .transition-colors<\/code>\uff0c\u5b9e\u73b0\u60ac\u505c\u53d8\u8272\u6548\u679c\u3002\u8fd9\u4e9b\u4ea4\u4e92\u7c7b\u8ba9\u754c\u9762\u66f4\u52a0\u751f\u52a8\u3002<\/p>\n\n\n\n
\u9ad8\u7ea7\u6280\u5de7\u4e0e\u751f\u4ea7\u4f18\u5316<\/h2>\n\n\n\n
\u5f53\u9879\u76ee\u9010\u6e10\u53d8\u5927\u65f6\uff0c\u638c\u63e1\u4e00\u4e9b\u9ad8\u7ea7\u6280\u5de7\u548c\u4f18\u5316\u7b56\u7565\u80fd\u8ba9\u4f60\u66f4\u597d\u5730\u9a7e\u9a6d Tailwind CSS<\/code>\u3002<\/p>\n\n\n\n
\u63d0\u53d6\u590d\u7528\u6837\u5f0f\u4e3a\u7ec4\u4ef6\u7c7b<\/h3>\n\n\n\n
\u867d\u7136\u5b9e\u7528\u4f18\u5148\u662f\u6838\u5fc3\u7406\u5ff5\uff0c\u4f46\u5f53\u4e00\u4e2a\u590d\u6742\u7684\u6837\u5f0f\u7ec4\u5408\u5728\u591a\u5904\u91cd\u590d\u4f7f\u7528\u65f6\uff0c\u76f4\u63a5\u91cd\u590d\u4e00\u957f\u4e32\u7c7b\u540d\u4f1a\u964d\u4f4e\u53ef\u7ef4\u62a4\u6027\u3002\u6b64\u65f6\u53ef\u4ee5\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u63d0\u53d6\u7ec4\u4ef6\u7c7b\u3002<\/p>\n\n\n\n
\/* \u5728\u60a8\u7684 styles.css \u4e2d\uff0c\u5728 @tailwind utilities; \u4e4b\u540e\u6dfb\u52a0 *\/\n.btn-primary {\n  @apply py-2 px-4 bg-brand-blue 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-colors duration-200;\n}<\/code><\/pre>\n\n\n\n
\u7136\u540e\u5728 HTML \u4e2d\u76f4\u63a5\u4f7f\u7528 <button class="btn-primary">\u6309\u94ae<\/button><\/code> \u5373\u53ef\u3002\u8bf7\u6ce8\u610f\uff0c\u8fc7\u5ea6\u4f7f\u7528 @apply<\/code> \u4f1a\u56de\u5f52\u5230\u4f20\u7edf CSS \u7684\u95ee\u9898\uff0c\u5e94\u8c28\u614e\u7528\u4e8e\u771f\u6b63\u9ad8\u5ea6\u590d\u7528\u7684\u6a21\u5f0f\u3002<\/p>\n\n\n\n
\u5229\u7528 Just-In-Time \u6a21\u5f0f\u63d0\u5347\u6027\u80fd<\/h3>\n\n\n\n
\u4ece Tailwind CSS<\/code> v2.1 \u5f00\u59cb\u5f15\u5165\u7684 Just-In-Time\uff08JIT\uff09\u5f15\u64ce\u662f\u5176\u6027\u80fd\u7684\u98de\u8dc3\u3002\u5728\u914d\u7f6e\u6587\u4ef6\u4e2d\u542f\u7528 JIT \u6a21\u5f0f\u540e\uff0cTailwind<\/code> \u4f1a\u6309\u9700\u52a8\u6001\u751f\u6210\u6837\u5f0f\uff0c\u800c\u975e\u9884\u5148\u751f\u6210\u6240\u6709\u53ef\u80fd\u7684\u7c7b\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  mode: 'jit',\n  content: ['.\/src\/**\/*.{html,js}'],\n  \/\/ ... \u5176\u4ed6\u914d\u7f6e\n}<\/code><\/pre>\n\n\n\n
JIT \u6a21\u5f0f\u5e26\u6765\u4e86\u5de8\u5927\u597d\u5904\uff1a\u5f00\u53d1\u6784\u5efa\u901f\u5ea6\u6781\u5feb\uff1b\u652f\u6301\u4efb\u610f\u503c\u53d8\u4f53\uff0c\u5982 <div class="top-[117px]"><\/code>\uff1b\u751f\u6210\u7684 CSS \u6587\u4ef6\u4f53\u79ef\u5728\u751f\u4ea7\u73af\u5883\u4e2d\u6781\u5c0f\u3002\u5728 2026 \u5e74\u7684\u4eca\u5929\uff0cJIT \u5df2\u6210\u4e3a\u65b0\u9879\u76ee\u7684\u9ed8\u8ba4\u63a8\u8350\u6a21\u5f0f\u3002<\/p>\n\n\n\n
\u4e0e\u6d41\u884c\u524d\u7aef\u6846\u67b6\u96c6\u6210<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u4e0e\u73b0\u4ee3\u524d\u7aef\u6846\u67b6\u7ed3\u5408\u5f97\u5929\u8863\u65e0\u7f1d\u3002\u4ee5 React \u548c Vue.js \u4e3a\u4f8b\uff0c\u96c6\u6210\u8fc7\u7a0b\u975e\u5e38\u987a\u7545\u3002<\/p>\n\n\n\n
\u5728 React \u4e2d\uff0c\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u5728\u9879\u76ee\u7684\u6839 CSS \u6587\u4ef6\u4e2d\u5f15\u5165 Tailwind<\/code> \u6307\u4ee4\u5373\u53ef\u3002\u7ec4\u4ef6\u7684 JSX \u4e2d\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u5b9e\u7528\u7c7b\u3002<\/p>\n\n\n\n
\u5728 Vue.js \u4e2d\uff0c\u8fc7\u7a0b\u7c7b\u4f3c\u3002\u5982\u679c\u4f7f\u7528 Vite\uff0c\u53ef\u4ee5\u5b89\u88c5 @tailwindcss\/jit<\/code> \u76f8\u5173\u7684\u63d2\u4ef6\u4ee5\u83b7\u5f97\u66f4\u5feb\u7684\u5f00\u53d1\u4f53\u9a8c\u3002\u65e0\u8bba\u54ea\u79cd\u6846\u67b6\uff0cTailwind<\/code> \u7684\u7c7b\u540d\u90fd\u53ef\u4ee5\u4e0e\u6846\u67b6\u7684\u52a8\u6001\u7c7b\u7ed1\u5b9a\u8bed\u6cd5\uff08\u5982 Vue \u7684 :class<\/code>\uff0c React \u7684 className<\/code> \u914d\u5408\u6a21\u677f\u5b57\u7b26\u4e32\uff09\u5b8c\u7f8e\u534f\u4f5c\uff0c\u5b9e\u73b0\u6761\u4ef6\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u901a\u8fc7\u5176\u5b9e\u7528\u4f18\u5148\u7684\u7406\u5ff5\uff0c\u4e3a\u5f00\u53d1\u8005\u63d0\u4f9b\u4e86\u4e00\u79cd\u9ad8\u6548\u3001\u4e00\u81f4\u4e14\u53ef\u7ef4\u62a4\u7684\u6837\u5f0f\u5f00\u53d1\u65b9\u6cd5\u3002\u5b83\u6d88\u9664\u4e86\u4e0a\u4e0b\u6587\u5207\u6362\uff0c\u5c06\u8bbe\u8ba1\u548c\u5b9e\u73b0\u7d27\u5bc6\u8026\u5408\u5728 HTML \u4e2d\uff0c\u540c\u65f6\u901a\u8fc7\u5f3a\u5927\u7684\u914d\u7f6e\u548c JIT \u5f15\u64ce\u4fdd\u8bc1\u4e86\u7075\u6d3b\u6027\u4e0e\u6027\u80fd\u3002\u4ece\u7b80\u5355\u7684\u539f\u578b\u5230\u590d\u6742\u7684\u4f01\u4e1a\u7ea7\u5e94\u7528\uff0cTailwind CSS<\/code> \u90fd\u80fd\u663e\u8457\u63d0\u5347\u524d\u7aef\u754c\u9762\u7684\u6784\u5efa\u6548\u7387\u4e0e\u5f00\u53d1\u4f53\u9a8c\u3002\u638c\u63e1\u5176\u6838\u5fc3\u6982\u5ff5\u3001\u54cd\u5e94\u5f0f\u673a\u5236\u4ee5\u53ca\u751f\u4ea7\u4f18\u5316\u6280\u5de7\uff0c\u60a8\u5c06\u80fd\u6e38\u5203\u6709\u4f59\u5730\u5e94\u5bf9\u5404\u79cd\u754c\u9762\u5f00\u53d1\u6311\u6218\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\uff0c\u5728\u6b63\u786e\u914d\u7f6e\u548c\u751f\u4ea7\u6784\u5efa\u4e0b\uff0cTailwind CSS<\/code> \u751f\u6210\u7684 CSS \u6587\u4ef6\u975e\u5e38\u5c0f\u3002\u6838\u5fc3\u5728\u4e8e\u5176\u4f7f\u7528\u7684 PurgeCSS\uff08\u6216 JIT \u5f15\u64ce\u7684\u5185\u7f6e\u4f18\u5316\uff09\u4f1a\u5206\u6790\u60a8\u7684\u9879\u76ee\u6587\u4ef6\uff0c\u53ea\u5c06\u5b9e\u9645\u4f7f\u7528\u5230\u7684 CSS \u7c7b\u6253\u5305\u5230\u6700\u7ec8\u6837\u5f0f\u8868\u4e2d\uff0c\u81ea\u52a8\u79fb\u9664\u6240\u6709\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u5728\u56e2\u961f\u9879\u76ee\u4e2d\uff0c\u5982\u4f55\u4fdd\u6301 Tailwind \u7c7b\u540d\u4e66\u5199\u7684\u4e00\u81f4\u6027\uff1f<\/h3>\n\n\n\n
\u5efa\u8bae\u7ed3\u5408\u4f7f\u7528\u7f16\u8f91\u5668\u7684\u667a\u80fd\u63d0\u793a\u63d2\u4ef6\uff08\u5982 Tailwind CSS IntelliSense\uff09\u548c\u4ee3\u7801\u683c\u5f0f\u5316\u5de5\u5177 Prettier \u7684\u5b98\u65b9 Tailwind \u63d2\u4ef6\u3002\u8fd9\u4e9b\u5de5\u5177\u80fd\u81ea\u52a8\u6392\u5e8f\u7c7b\u540d\uff0c\u5e76\u63d0\u4f9b\u81ea\u52a8\u5b8c\u6210\u529f\u80fd\u3002\u6b64\u5916\uff0c\u5efa\u7acb\u56e2\u961f\u7684\u300a\u5b9e\u7528\u7c7b\u4f7f\u7528\u7ea6\u5b9a\u300b\u6587\u6863\uff0c\u5bf9\u901a\u7528\u6a21\u5f0f\uff08\u5982\u95f4\u8ddd\u3001\u989c\u8272\u4f7f\u7528\u5c42\u7ea7\uff09\u8fdb\u884c\u89c4\u8303\uff0c\u4e5f\u80fd\u6709\u6548\u4fdd\u6301\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n
Tailwind CSS \u662f\u5426\u9002\u5408\u4e0e CSS-in-JS \u65b9\u6848\u4e00\u8d77\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
\u901a\u5e38\u4e0d\u63a8\u8350\u540c\u65f6\u4f7f\u7528\uff0c\u56e0\u4e3a\u4e24\u8005\u7684\u54f2\u5b66\u548c\u5b9e\u8df5\u5b58\u5728\u51b2\u7a81\u3002Tailwind CSS<\/code> \u9f13\u52b1\u5728 HTML\/JSX \u4e2d\u4f7f\u7528\u5177\u8c61\u7684\u5b9e\u7528\u7c7b\uff0c\u800c CSS-in-JS \u503e\u5411\u4e8e\u5c06\u6837\u5f0f\u5b9a\u4e49\u4e3a JavaScript \u5bf9\u8c61\u6216\u5b57\u7b26\u4e32\u3002\u6df7\u5408\u4f7f\u7528\u4f1a\u5bfc\u81f4\u4ee3\u7801\u98ce\u683c\u5272\u88c2\uff0c\u589e\u52a0\u590d\u6742\u5ea6\u3002\u5efa\u8bae\u6839\u636e\u9879\u76ee\u9700\u6c42\u5728\u4e24\u8005\u4e2d\u62e9\u4e00\u4f7f\u7528\u3002<\/p>\n\n\n\n
\u5982\u4f55\u5904\u7406 Tailwind \u4e2d\u672a\u63d0\u4f9b\u7684\u81ea\u5b9a\u4e49\u6837\u5f0f\uff1f<\/h3>\n\n\n\n
\u5bf9\u4e8e\u5b8c\u5168\u8d85\u51fa Tailwind CSS<\/code> \u8bbe\u8ba1\u7cfb\u7edf\u7684\u3001\u72ec\u4e00\u65e0\u4e8c\u7684\u6837\u5f0f\uff0c\u60a8\u6709\u51e0\u79cd\u9009\u62e9\uff1a\u4e00\u662f\u5728 tailwind.config.js<\/code> \u7684 theme.extend<\/code> \u90e8\u5206\u8fdb\u884c\u81ea\u5b9a\u4e49\uff1b\u4e8c\u662f\u4f7f\u7528\u65b9\u62ec\u53f7\u7b26\u53f7\u7684\u4efb\u610f\u503c\u529f\u80fd\uff0c\u5982 class=\u201dtop-[117px]\u201d<\/code>\uff1b\u4e09\u662f\u5728\u5168\u5c40\u6216\u7ec4\u4ef6\u7ea7\u522b\u7684\u4f20\u7edf CSS \u6587\u4ef6\u4e2d\u7f16\u5199\u81ea\u5b9a\u4e49 CSS\uff0cTailwin<\/code> \u53ef\u4ee5\u4e0e\u5176\u4ed6 CSS \u548c\u8c10\u5171\u5b58\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Bu makale, kullan\u0131c\u0131 deneyimini \u00f6ncelik veren bir CSS \u00e7er\u00e7evesi olan Tailwind CSS'i tan\u0131t\u0131r. Temel tasar\u0131m felsefesini, yerle\u015fik tepkisel d\u00fczenlemelerini ve y\u00fcksek \u00f6l\u00e7\u00fcde \u00f6zelle\u015ftirilebilirli\u011fini a\u00e7\u0131klar ve geli\u015ftiricilerin modern aray\u00fczler olu\u015fturmas\u0131na yard\u0131mc\u0131 olacak kurulum, yap\u0131land\u0131rma ve stil dosyalar\u0131 olu\u015fturma konusunda kapsaml\u0131 bir rehber sunar.<\/p>","protected":false},"author":2,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2270,430,367,2271],"knowledge_category":[281],"class_list":["post-12363835","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwindcss","tag-frontend-development","tag-responsive-design","tag-practical-first","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, \u5b9e\u7528\u4f18\u5148, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, CSS\u6846\u67b6, \u524d\u7aef\u5f00\u53d1, \u4ece\u96f6\u5165\u95e8Tailwind, \u6784\u5efa\u54cd\u5e94\u5f0f\u754c\u9762"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/knowledge_posts\/12363835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/users\/2"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/knowledge_posts\/12363835\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/media?parent=12363835"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/tags?post=12363835"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/tr\/wp-json\/wp\/v2\/knowledge_category?post=12363835"}],"curies":[{"name":"WP","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}