{"id":12366051,"date":"2026-03-13T16:40:22","date_gmt":"2026-03-13T08:40:22","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/%e4%bb%8e%e9%9b%b6%e5%88%b0%e7%b2%be%e9%80%9a%ef%bc%9atailwind-css-%e5%ae%98%e6%96%b9%e9%a1%b9%e7%9b%ae%e5%ae%9e%e6%88%98%e4%b8%8e%e6%9c%80%e4%bd%b3%e9%85%8d%e7%bd%ae%e6%8c%87%e5%8d%97\/"},"modified":"2026-03-13T16:42:14","modified_gmt":"2026-03-13T08:42:14","slug":"tailwind-css-official-project-tutorial-best-configuration-guide","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/id\/knowledge\/website-building\/tailwind-css-official-project-tutorial-best-configuration-guide\/","title":{"rendered":"Dari Nol hingga Ahli: Praktik Proyek Resmi Tailwind CSS dan Panduan Konfigurasi Terbaik."},"content":{"rendered":"\n

Tailwind CSS \u4ee5\u5176\u5b9e\u7528\u4f18\u5148\u7684\u539f\u5b50\u5316\u8bbe\u8ba1\u7406\u5ff5\uff0c\u5f7b\u5e95\u6539\u53d8\u4e86\u524d\u7aef\u5f00\u53d1\u8005\u7684\u6837\u5f0f\u7f16\u5199\u65b9\u5f0f\u3002\u901a\u8fc7\u76f4\u63a5\u7ec4\u5408\u9884\u5b9a\u4e49\u7684\u5b9e\u7528\u7c7b\uff0c\u5f00\u53d1\u8005\u53ef\u4ee5\u5feb\u901f\u6784\u5efa\u51fa\u9ad8\u5ea6\u5b9a\u5236\u4e14\u4fdd\u6301\u4e00\u81f4\u6027\u7684\u7528\u6237\u754c\u9762\uff0c\u907f\u514d\u4e86\u4f20\u7edf CSS \u4e2d\u5e38\u89c1\u7684\u6837\u5f0f\u81a8\u80c0\u548c\u547d\u540d\u96be\u9898\u3002\u672c\u6587\u5c06\u5f15\u5bfc\u4f60\u4ece\u4e00\u4e2a\u5b98\u65b9\u9879\u76ee\u6a21\u677f\u5f00\u59cb\uff0c\u9010\u6b65\u6df1\u5165\uff0c\u6700\u7ec8\u638c\u63e1\u5176\u6838\u5fc3\u914d\u7f6e\u4e0e\u6700\u4f73\u5b9e\u8df5\u3002<\/p>\n\n\n\n

\u73af\u5883\u642d\u5efa\u4e0e\u9879\u76ee\u521d\u59cb\u5316<\/h2>\n\n\n\n

\u5f00\u59cb\u4e00\u4e2a Tailwind CSS \u9879\u76ee\uff0c\u6700\u5feb\u901f\u7684\u65b9\u5f0f\u662f\u4f7f\u7528\u5176\u5b98\u65b9 CLI \u5de5\u5177\u3002\u8fd9\u786e\u4fdd\u4e86\u6784\u5efa\u7ba1\u9053\u7684\u6b63\u786e\u914d\u7f6e\uff0c\u907f\u514d\u4e86\u624b\u52a8\u8bbe\u7f6e\u7684\u7e41\u7410\u6b65\u9aa4\u3002<\/p>\n\n\n\n

\u4f7f\u7528\u5b98\u65b9 CLI \u521b\u5efa\u9879\u76ee<\/h3>\n\n\n\n

\u9996\u5148\uff0c\u4f60\u9700\u8981\u901a\u8fc7 npm \u6216 yarn \u5b89\u88c5 Tailwind CSS CLI\u3002\u5728\u7ec8\u7aef\u4e2d\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff0cnpx<\/code> \u5c06\u81ea\u52a8\u4e0b\u8f7d\u5e76\u8fd0\u884c\u6700\u65b0\u7248\u672c\u7684 CLI \u5de5\u5177\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb Tailwind CSS \u5165\u95e8\u5b9e\u8df5\u6307\u5357\uff1a\u6784\u5efa\u7b80\u6d01\u9ad8\u6548\u7684\u73b0\u4ee3\u7f51\u7ad9\u754c\u9762<\/a>\u3002<\/p>\n\n\n\n\n

npx create-tailwindcss@latest my-project\ncd my-project<\/code><\/pre>\n\n\n\n
\u8fd9\u4e2a\u547d\u4ee4\u4f1a\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a my-project<\/code> \u7684\u65b0\u76ee\u5f55\uff0c\u5e76\u5305\u542b\u4e00\u4e2a\u9884\u8bbe\u597d\u7684\u9879\u76ee\u7ed3\u6784\u3002CLI \u5de5\u5177\u4f1a\u5f15\u5bfc\u4f60\u8fdb\u884c\u4e00\u4e9b\u9009\u62e9\uff0c\u4f8b\u5982\u662f\u5426\u4f7f\u7528 TypeScript\u3001\u662f\u5426\u652f\u6301 PostCSS \u7b49\u3002\u5bf9\u4e8e\u521d\u5b66\u8005\uff0c\u63a5\u53d7\u9ed8\u8ba4\u9009\u9879\u5373\u53ef\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
\u9879\u76ee\u6838\u5fc3\u6587\u4ef6\u89e3\u6790<\/h3>\n\n\n\n
\u521d\u59cb\u5316\u5b8c\u6210\u540e\uff0c\u4f60\u4f1a\u770b\u5230\u51e0\u4e2a\u5173\u952e\u6587\u4ef6\u3002\u5176\u4e2d\uff0ctailwind.config.js<\/code> \u662f\u6574\u4e2a\u9879\u76ee\u7684\u914d\u7f6e\u6838\u5fc3\u3002\u5b83\u5141\u8bb8\u4f60\u81ea\u5b9a\u4e49\u8bbe\u8ba1\u7cfb\u7edf\uff0c\u5982\u989c\u8272\u3001\u95f4\u8ddd\u3001\u5b57\u4f53\u7b49\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\n\/** @type {import('tailwindcss').Config} *\/\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js}"],\n  theme: {\n    extend: {},\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u53e6\u4e00\u4e2a\u91cd\u8981\u6587\u4ef6\u662f src\/input.css<\/code>\uff0c\u8fd9\u662f Tailwind \u751f\u6210\u6837\u5f0f\u7684\u5165\u53e3\u70b9\u3002\u5b83\u901a\u5e38\u5305\u542b\u4e09\u4e2a Tailwind \u6307\u4ee4\u3002<\/p>\n\n\n\n
\/* src\/input.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
package.json<\/code> \u4e2d\u4f1a\u5305\u542b\u6784\u5efa\u811a\u672c\uff0c\u901a\u5e38\u662f npm run dev<\/code> \u7528\u4e8e\u542f\u52a8\u5f00\u53d1\u670d\u52a1\u5668\uff0cnpm run build<\/code> \u7528\u4e8e\u751f\u6210\u751f\u4ea7\u73af\u5883\u4ee3\u7801\u3002<\/p>\n\n\n\n
\u6838\u5fc3\u5b9e\u7528\u7c7b\u4e0e\u5e03\u5c40\u5b9e\u6218<\/h2>\n\n\n\n
\u7406\u89e3 Tailwind CSS \u7684\u7c7b\u540d\u547d\u540d\u903b\u8f91\u662f\u9ad8\u6548\u4f7f\u7528\u7684\u5173\u952e\u3002\u5176\u7c7b\u540d\u901a\u5e38\u7531\u5c5e\u6027\u7f29\u5199\u548c\u523b\u5ea6\u503c\u7ec4\u6210\uff0c\u5177\u6709\u6781\u5f3a\u7684\u53ef\u8bfb\u6027\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u638c\u63e1 Tailwind CSS \u6838\u5fc3\u6280\u5de7\uff1a\u4ece\u5b9e\u7528\u5de5\u5177\u5230\u9ad8\u6548\u7ec4\u4ef6\u5f00\u53d1\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
\u6784\u5efa\u54cd\u5e94\u5f0f\u9875\u9762\u7ed3\u6784<\/h3>\n\n\n\n
\u6211\u4eec\u4ece\u4e00\u4e2a\u7b80\u5355\u7684\u9875\u9762\u5e03\u5c40\u5f00\u59cb\u3002\u4f7f\u7528 flex<\/code>, grid<\/code>, p-<\/code>\uff08\u5185\u8fb9\u8ddd\uff09, m-<\/code>\uff08\u5916\u8fb9\u8ddd\uff09\u7b49\u7c7b\u53ef\u4ee5\u5feb\u901f\u642d\u5efa\u7ed3\u6784\u3002\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u901a\u8fc7\u6dfb\u52a0\u524d\u7f00\u5b9e\u73b0\uff0c\u4f8b\u5982 md:flex<\/code> \u8868\u793a\u5728\u4e2d\u7b49\u5c4f\u5e55\u4ee5\u4e0a\u91c7\u7528 flex \u5e03\u5c40\u3002<\/p>\n\n\n\n
<div class="min-h-screen bg-gray-50">\n  <header class="bg-white shadow-sm">\n    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">\n      <h1 class="text-2xl font-bold text-gray-900">\u6211\u7684\u5e94\u7528<\/h1>\n    <\/div>\n  <\/header>\n  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">\n    <div class="grid md:grid-cols-3 gap-6">\n      <div class="md:col-span-2 bg-white rounded-lg shadow p-6">\n        <!-- \u4e3b\u5185\u5bb9\u533a -->\n      <\/div>\n      <div class="bg-white rounded-lg shadow p-6">\n        <!-- \u4fa7\u8fb9\u680f -->\n      <\/div>\n    <\/div>\n  <\/main>\n<\/div><\/code><\/pre>\n\n\n\n
\u6837\u5f0f\u4e0e\u4ea4\u4e92\u72b6\u6001\u5904\u7406<\/h3>\n\n\n\n
Tailwind \u63d0\u4f9b\u4e86\u4e30\u5bcc\u7684\u989c\u8272\u3001\u5b57\u53f7\u3001\u5706\u89d2\u7b49\u5de5\u5177\u7c7b\u3002\u4ea4\u4e92\u72b6\u6001\u5982\u60ac\u505c\u3001\u805a\u7126\u901a\u8fc7\u524d\u7f00\u6dfb\u52a0\u3002<\/p>\n\n\n\n
<button class="bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 text-white font-semibold py-2 px-4 rounded-lg transition duration-150 ease-in-out">\n  \u70b9\u51fb\u6211\n<\/button><\/code><\/pre>\n\n\n\n
\u4e0a\u8ff0\u4ee3\u7801\u4e2d\uff0chover:bg-blue-700<\/code> \u5b9a\u4e49\u4e86\u9f20\u6807\u60ac\u505c\u65f6\u7684\u80cc\u666f\u8272\uff0cfocus:ring-2<\/code> \u5b9a\u4e49\u4e86\u83b7\u5f97\u7126\u70b9\u65f6\u7684\u5149\u73af\u6548\u679c\uff0ctransition<\/code> \u548c duration-150<\/code> \u5219\u4e3a\u8fd9\u4e9b\u53d8\u5316\u6dfb\u52a0\u4e86\u5e73\u6ed1\u7684\u8fc7\u6e21\u52a8\u753b\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
\u6df1\u5ea6\u914d\u7f6e\u4e0e\u4e3b\u9898\u5b9a\u5236<\/h2>\n\n\n\n
\u867d\u7136 Tailwind \u63d0\u4f9b\u4e86\u5b8c\u5584\u7684\u9ed8\u8ba4\u8bbe\u8ba1\uff0c\u4f46\u4e3a\u4e86\u4e0e\u4f01\u4e1a\u54c1\u724c\u6216\u8bbe\u8ba1\u89c4\u8303\u4fdd\u6301\u4e00\u81f4\uff0c\u6df1\u5ea6\u5b9a\u5236\u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u3002\u8fd9\u4e3b\u8981\u901a\u8fc7\u4fee\u6539 tailwind.config.js<\/code> \u6587\u4ef6\u5b9e\u73b0\u3002<\/p>\n\n\n\n
\u6269\u5c55\u8bbe\u8ba1\u4ee4\u724c<\/h3>\n\n\n\n
\u4f60\u53ef\u4ee5\u5728\u914d\u7f6e\u6587\u4ef6\u7684 theme.extend<\/code> \u90e8\u5206\u6dfb\u52a0\u6216\u8986\u76d6\u539f\u6709\u7684\u8bbe\u8ba1\u53d8\u91cf\u3002\u4f8b\u5982\uff0c\u6dfb\u52a0\u4e00\u79cd\u54c1\u724c\u8272\u6216\u6269\u5c55\u95f4\u8ddd\u6bd4\u4f8b\u5c3a\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        'brand-primary': '#1a56db',\n        'brand-secondary': '#7e3af2',\n      },\n      spacing: {\n        '128': '32rem',\n        '144': '36rem',\n      },\n      fontFamily: {\n        'sans': ['Inter var', 'system-ui', 'sans-serif'],\n      },\n    },\n  },\n}<\/code><\/pre>\n\n\n\n
\u6269\u5c55\uff08extend<\/code>\uff09\u7684\u65b9\u5f0f\u4f1a\u4fdd\u7559 Tailwind \u7684\u6240\u6709\u9ed8\u8ba4\u503c\uff0c\u53ea\u662f\u5728\u5b83\u4eec\u7684\u57fa\u7840\u4e0a\u65b0\u589e\u3002\u5982\u679c\u4f60\u60f3\u5b8c\u5168\u66ff\u6362\u67d0\u4e2a\u7c7b\u522b\uff08\u5982\u6574\u4e2a\u8c03\u8272\u677f\uff09\uff0c\u5219\u9700\u8981\u76f4\u63a5\u5728 theme<\/code> \u4e0b\u5b9a\u4e49\uff0c\u800c\u4e0d\u662f\u5728 extend<\/code> \u4e2d\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb \u638c\u63e1 Tailwind CSS\uff1a\u4ece\u65b0\u624b\u5230\u9ad8\u624b\u7684\u6838\u5fc3\u6982\u5ff5\u4e0e\u5b9e\u7528\u6280\u5de7\u6307\u5357<\/a>\u3002<\/p>\n\n\n\n\n
\u914d\u7f6e\u5185\u5bb9\u6e90\u4e0e\u4f18\u5316<\/h3>\n\n\n\n
content<\/code> \u914d\u7f6e\u9879\u81f3\u5173\u91cd\u8981\uff0c\u5b83\u544a\u8bc9 Tailwind \u5e94\u8be5\u626b\u63cf\u54ea\u4e9b\u6587\u4ef6\u4e2d\u7684\u7c7b\u540d\uff0c\u4ee5\u4fbf\u5728\u751f\u4ea7\u6784\u5efa\u65f6\u8fdb\u884c\u201c\u6447\u6811\u4f18\u5316\u201d\uff0c\u79fb\u9664\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [\n    '.\/src\/**\/*.{html,js,jsx,ts,tsx,vue}',\n    '.\/public\/index.html',\n  ],\n  \/\/ ... \u5176\u4ed6\u914d\u7f6e\n}<\/code><\/pre>\n\n\n\n
\u5982\u679c\u914d\u7f6e\u4e0d\u6b63\u786e\uff0cTailwind \u5c06\u65e0\u6cd5\u751f\u6210\u4f60\u6b63\u5728\u4f7f\u7528\u7684\u5de5\u5177\u7c7b\uff0c\u5bfc\u81f4\u6837\u5f0f\u4e22\u5931\u3002\u5bf9\u4e8e\u52a8\u6001\u7c7b\u540d\uff08\u5982 class=\u201dtext-${error ? 'red' : 'green'}-600\u201d<\/code>\uff09\uff0c\u9700\u8981\u786e\u4fdd\u5b57\u7b26\u4e32\u7684\u4efb\u610f\u90e8\u5206\u90fd\u51fa\u73b0\u5728\u6e90\u6587\u4ef6\u4e2d\uff0c\u6216\u8005\u4f7f\u7528\u5b89\u5168\u5217\u8868\uff08safelist<\/code>\uff09\u9009\u9879\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
\u9ad8\u7ea7\u6a21\u5f0f\u4e0e\u6027\u80fd\u4f18\u5316<\/h2>\n\n\n\n
\u5f53\u9879\u76ee\u89c4\u6a21\u589e\u957f\u65f6\uff0c\u7ef4\u62a4\u4e00\u5806\u5197\u957f\u7684\u7c7b\u540d\u5b57\u7b26\u4e32\u4f1a\u53d8\u5f97\u56f0\u96be\u3002Tailwind \u63d0\u4f9b\u4e86\u4e00\u4e9b\u9ad8\u7ea7\u529f\u80fd\u548c\u4f18\u5316\u7b56\u7565\u6765\u5e94\u5bf9\u590d\u6742\u573a\u666f\u3002<\/p>\n\n\n\n
\u63d0\u53d6\u7ec4\u4ef6\u4e0e\u4f7f\u7528\u51fd\u6570<\/h3>\n\n\n\n
\u5bf9\u4e8e\u5728\u9879\u76ee\u4e2d\u91cd\u590d\u4f7f\u7528\u7684\u6837\u5f0f\u7ec4\u5408\uff0c\u63a8\u8350\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5728 CSS \u4e2d\u63d0\u53d6\u7ec4\u4ef6\u7c7b\uff0c\u6216\u8005\u4f7f\u7528 JavaScript\/TypeScript \u51fd\u6570\u6765\u751f\u6210\u7c7b\u540d\u5b57\u7b26\u4e32\u3002<\/p>\n\n\n\n
\/* \u5728 input.css \u4e2d\u4f7f\u7528 @apply *\/\n.btn-primary {\n  @apply bg-brand-primary hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition;\n}<\/code><\/pre>\n\n\n\n
\u5728 React \u6216 Vue \u7b49\u6846\u67b6\u4e2d\uff0c\u53ef\u4ee5\u521b\u5efa\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\uff1a<\/p>\n\n\n\n
\/\/ React \u793a\u4f8b\nfunction Button({ children, variant = 'primary' }) {\n  const baseClasses = "font-bold py-2 px-4 rounded transition";\n  const variantClasses = {\n    primary: "bg-blue-600 hover:bg-blue-700 text-white",\n    secondary: "bg-gray-300 hover:bg-gray-400 text-gray-800",\n  };\n  return (\n    <button className={`${baseClasses} ${variantClasses[variant]}`}>\n      {children}\n    <\/button>\n  );\n}<\/code><\/pre>\n\n\n\n
\u751f\u4ea7\u73af\u5883\u6784\u5efa\u4f18\u5316<\/h3>\n\n\n\n
\u4e3a\u4e86\u83b7\u5f97\u6700\u5c0f\u7684 CSS \u6587\u4ef6\u4f53\u79ef\uff0c\u8bf7\u786e\u4fdd\u5728\u6784\u5efa\u751f\u4ea7\u7248\u672c\u65f6\u542f\u7528 PurgeCSS\uff08Tailwind CSS v3 \u53ca\u4ee5\u4e0a\u7248\u672c\u5df2\u96c6\u6210\u5728\u5f15\u64ce\u4e2d\uff09\u3002\u8fd9\u5b8c\u5168\u4f9d\u8d56\u4e8e\u6b63\u786e\u7684 content<\/code> \u914d\u7f6e\u3002\u6b64\u5916\uff0c\u53ef\u4ee5\u7981\u7528\u672a\u4f7f\u7528\u7684\u6838\u5fc3\u63d2\u4ef6\uff0c\u5e76\u901a\u8fc7\u914d\u7f6e corePlugins<\/code> \u6765\u8fdb\u4e00\u6b65\u7cbe\u7b80\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js - \u9ad8\u7ea7\u4f18\u5316\u793a\u4f8b\nmodule.exports = {\n  corePlugins: {\n    \/\/ \u7981\u7528\u4e0d\u9700\u8981\u7684\u63d2\u4ef6\uff0c\u4f8b\u5982\u88c5\u9970\u6027\u529f\u80fd\n    float: false,\n    clear: false,\n  },\n  \/\/ ... \u5176\u4ed6\u914d\u7f6e\n}<\/code><\/pre>\n\n\n\n
\u5728\u6784\u5efa\u811a\u672c\u4e2d\uff0c\u786e\u4fdd\u8bbe\u7f6e NODE_ENV=production<\/code> \u73af\u5883\u53d8\u91cf\uff0cTailwind \u5c06\u81ea\u52a8\u8fdb\u884c\u6700\u5927\u7a0b\u5ea6\u7684\u4f18\u5316\u3002<\/p>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS \u901a\u8fc7\u5176\u6e05\u6670\u7684\u5b9e\u7528\u7c7b\u4f53\u7cfb\u548c\u9ad8\u5ea6\u53ef\u5b9a\u5236\u7684\u914d\u7f6e\uff0c\u4e3a\u73b0\u4ee3 Web \u5f00\u53d1\u63d0\u4f9b\u4e86\u5f3a\u5927\u800c\u7075\u6d3b\u7684\u6837\u5f0f\u89e3\u51b3\u65b9\u6848\u3002\u4ece\u4f7f\u7528\u5b98\u65b9 CLI \u5feb\u901f\u521d\u59cb\u5316\u9879\u76ee\uff0c\u5230\u638c\u63e1\u6838\u5fc3\u5b9e\u7528\u7c7b\u8fdb\u884c\u9ad8\u6548\u5e03\u5c40\uff0c\u518d\u5230\u6df1\u5ea6\u5b9a\u5236\u4e3b\u9898\u4e0e\u8bbe\u8ba1\u4ee4\u724c\uff0c\u6700\u540e\u901a\u8fc7\u63d0\u53d6\u7ec4\u4ef6\u548c\u4f18\u5316\u6784\u5efa\u786e\u4fdd\u5927\u578b\u9879\u76ee\u7684\u53ef\u7ef4\u62a4\u6027\u4e0e\u6027\u80fd\uff0c\u6784\u6210\u4e86\u638c\u63e1 Tailwind CSS \u7684\u5b8c\u6574\u8def\u5f84\u3002\u5176\u6838\u5fc3\u7406\u5ff5\u5728\u4e8e\u5c06\u6837\u5f0f\u7ea6\u675f\u5728\u4e00\u4e2a\u53ef\u63a7\u7684\u8bbe\u8ba1\u7cfb\u7edf\u4e2d\uff0c\u5728\u63d0\u9ad8\u5f00\u53d1\u901f\u5ea6\u7684\u540c\u65f6\uff0c\u4fdd\u8bc1\u4e86\u89c6\u89c9\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n
FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\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\u62fc\u63a5\u7684\u7c7b\u540d\uff08\u4f8b\u5982\uff0c\u6765\u81ea\u6570\u636e\u5e93\u6216\u7528\u6237\u8f93\u5165\u7684\u7c7b\u540d\uff09\uff0cTailwind \u7684 JIT \u5f15\u64ce\u65e0\u6cd5\u63d0\u524d\u9884\u77e5\u3002\u89e3\u51b3\u65b9\u6cd5\u662f\u4f7f\u7528\u5b89\u5168\u5217\u8868\uff08safelist\uff09\u914d\u7f6e\u3002<\/p>\n\n\n\n
\u4f60\u53ef\u4ee5\u5728 tailwind.config.js<\/code> \u7684 safelist<\/code> \u9009\u9879\u4e2d\uff0c\u4f7f\u7528\u5b57\u7b26\u4e32\u3001\u6b63\u5219\u8868\u8fbe\u5f0f\u6216\u6a21\u5f0f\u6570\u7ec4\u6765\u5217\u51fa\u9700\u8981\u59cb\u7ec8\u5305\u542b\u7684\u7c7b\u540d\u3002\u4f8b\u5982\uff0csafelist: ['bg-red-500', 'text-{size}', \/^bg-\/]<\/code> \u4f1a\u59cb\u7ec8\u5305\u542b bg-red-500<\/code>\u3001\u6240\u6709\u4ee5 text-<\/code> \u5f00\u5934\u7684\u7c7b\u4ee5\u53ca\u6240\u6709\u4ee5 bg-<\/code> \u5f00\u5934\u7684\u7c7b\u3002<\/p>\n\n\n\n
\u4e0e\u7ec4\u4ef6\u5e93\uff08\u5982 React\uff0cVue\uff09\u4e00\u8d77\u4f7f\u7528\u65f6\u6709\u4ec0\u4e48\u6ce8\u610f\u4e8b\u9879\uff1f<\/h3>\n\n\n\n
\u5f53\u4e0e UI \u6846\u67b6\u7ed3\u5408\u65f6\uff0c\u6700\u91cd\u8981\u7684\u662f\u6b63\u786e\u914d\u7f6e content<\/code> \u8def\u5f84\uff0c\u4f7f\u5176\u5305\u542b\u4f60\u7684\u7ec4\u4ef6\u6587\u4ef6\uff08\u5982 .jsx<\/code>, .vue<\/code>, .svelte<\/code>\uff09\u3002\u6b64\u5916\uff0c\u5efa\u8bae\u5c06 Tailwind \u7684\u6837\u5f0f\u6307\u4ee4\u5bfc\u5165\u5230\u9879\u76ee\u7684\u4e3b CSS \u6587\u4ef6\u4e2d\uff0c\u800c\u4e0d\u662f\u5355\u4e2a\u7ec4\u4ef6\u6587\u4ef6\u5185\u3002<\/p>\n\n\n\n
\u5bf9\u4e8e\u6846\u67b6\u7279\u5b9a\u7684\u7c7b\u540d\u7ed1\u5b9a\u8bed\u6cd5\uff08\u5982 Vue \u7684 :class<\/code>\uff0c React \u7684\u6761\u4ef6 className<\/code>\uff09\uff0c\u786e\u4fdd\u7c7b\u540d\u5b57\u7b26\u4e32\u7684\u5b8c\u6574\u90e8\u5206\u5728\u6e90\u7801\u4e2d\u662f\u9759\u6001\u5b58\u5728\u7684\uff0c\u8fd9\u6837 PurgeCSS \u624d\u80fd\u6b63\u786e\u8bc6\u522b\u3002\u5bf9\u4e8e\u590d\u6742\u7684\u6761\u4ef6\u7c7b\u540d\uff0c\u4f7f\u7528\u50cf clsx<\/code> \u6216 classnames<\/code> \u8fd9\u6837\u7684\u5de5\u5177\u5e93\u662f\u5f88\u597d\u7684\u5b9e\u8df5\u3002<\/p>\n\n\n\n
\u5982\u4f55\u89e3\u51b3\u5b9e\u7528\u7c7b\u5217\u8868\u8fc7\u957f\u5bfc\u81f4\u7684\u4ee3\u7801\u53ef\u8bfb\u6027\u4e0b\u964d\uff1f<\/h3>\n\n\n\n
\u5bf9\u4e8e\u91cd\u590d\u51fa\u73b0\u7684\u6837\u5f0f\u7ec4\u5408\uff0c\u5f3a\u70c8\u5efa\u8bae\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5c06\u5176\u63d0\u53d6\u4e3a\u8bed\u4e49\u5316\u7684 CSS \u7ec4\u4ef6\u7c7b\uff0c\u6216\u8005\u5c06 UI \u7247\u6bb5\u5c01\u88c5\u6210\u6846\u67b6\u7ec4\u4ef6\uff08\u5982 React\/Vue \u7ec4\u4ef6\uff09\u3002<\/p>\n\n\n\n
\u53e6\u4e00\u79cd\u65b9\u6cd5\u662f\u4f7f\u7528\u7f16\u8f91\u5668\u63d2\u4ef6\uff08\u5982 VS Code \u7684 Tailwind CSS IntelliSense\uff09\u6765\u63d0\u4f9b\u667a\u80fd\u63d0\u793a\u548c\u9884\u89c8\uff0c\u8fd9\u80fd\u6781\u5927\u63d0\u5347\u957f\u7c7b\u540d\u5217\u8868\u7684\u7f16\u5199\u548c\u9605\u8bfb\u4f53\u9a8c\u3002\u4fdd\u6301 HTML \u6216 JSX \u7ed3\u6784\u6e05\u6670\uff0c\u5fc5\u8981\u65f6\u8fdb\u884c\u6362\u884c\u548c\u5206\u7ec4\u6ce8\u91ca\uff0c\u4e5f\u6709\u52a9\u4e8e\u7ef4\u62a4\u3002<\/p>\n\n\n\n
\u81ea\u5b9a\u4e49\u6837\u5f0f\u4f1a\u7834\u574f Tailwind \u7684\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u7cfb\u7edf\u5417\uff1f<\/h3>\n\n\n\n
\u4e0d\u4f1a\u3002Tailwind \u7684\u54cd\u5e94\u5f0f\u524d\u7f00\uff08\u5982 md:<\/code>\uff09\u662f\u4e00\u4e2a\u72ec\u7acb\u4e8e\u5177\u4f53\u5c5e\u6027\u503c\u7684\u7cfb\u7edf\u3002\u5f53\u4f60\u81ea\u5b9a\u4e49\u4e86\u989c\u8272\u3001\u95f4\u8ddd\u7b49\u503c\u65f6\uff0c\u54cd\u5e94\u5f0f\u524d\u7f00\u4f9d\u7136\u53ef\u4ee5\u6b63\u5e38\u5de5\u4f5c\u3002\u4f8b\u5982\uff0c\u81ea\u5b9a\u4e49\u4e86 <code>colors.brand<\/code><\/code> \u540e\uff0c\u4f60\u5b8c\u5168\u53ef\u4ee5\u4f7f\u7528 md:bg-brand<\/code> \u8fd9\u6837\u7684\u7c7b\u540d\u3002<\/p>\n\n\n\n
\u81ea\u5b9a\u4e49\u65f6\u9700\u8981\u6ce8\u610f\uff0c\u5982\u679c\u4f60\u5b8c\u5168\u8986\u76d6\u4e86\u9ed8\u8ba4\u7684 screens<\/code>\uff08\u65ad\u70b9\uff09\u914d\u7f6e\uff0c\u90a3\u4e48\u539f\u6709\u7684\u65ad\u70b9\u524d\u7f00\uff08\u5982 md:<\/code>\uff09\u4f1a\u5931\u6548\uff0c\u53d6\u800c\u4ee3\u4e4b\u7684\u662f\u4f60\u5b9a\u4e49\u7684\u65b0\u65ad\u70b9\u53ca\u5176\u5bf9\u5e94\u7684\u524d\u7f00\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel ini didasarkan pada template proyek resmi Tailwind CSS, dan memberikan penjelasan terperinci tentang proses lengkap mulai dari pengaturan lingkungan, analisis file konfigurasi inti, hingga praktik pengaturan tata letak yang praktis. Kontennya mencakup penggunaan CLI resmi untuk menginisialisasi proyek, mengonfigurasi file tailwind.config.js, serta contoh penanganan tata letak responsif dan status interaktif, yang membantu pengembang memahami secara sistematis konfigurasi inti dan praktik terbaik Tailwind CSS.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,430,2494,2493],"knowledge_category":[281],"class_list":["post-12366051","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-frontend-development","tag-official-tutorial","tag-project-configuration","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, \u5b98\u65b9\u9879\u76ee\u5b9e\u6218, \u6700\u4f73\u914d\u7f6e\u6307\u5357, \u5b9e\u7528\u7c7b\u5e03\u5c40, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u4ece\u96f6\u5230\u7cbe\u901aTailwind, Tailwind CSS\u73af\u5883\u642d\u5efa"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12366051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts"}],"about":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/types\/knowledge_post"}],"author":[{"embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/users\/7"}],"version-history":[{"count":0,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12366051\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/media?parent=12366051"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/tags?post=12366051"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_category?post=12366051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}