{"id":12391118,"date":"2026-04-14T17:03:06","date_gmt":"2026-04-14T09:03:06","guid":{"rendered":"https:\/\/www.likacloud.com\/knowledge\/tailwind-css-%e6%a0%b8%e5%bf%83%e6%a6%82%e5%bf%b5%e8%a7%a3%e6%9e%90\/"},"modified":"2026-04-14T17:40:00","modified_gmt":"2026-04-14T09:40:00","slug":"tailwind-css-core-concepts-explained","status":"publish","type":"knowledge_post","link":"https:\/\/www.likacloud.com\/id\/knowledge\/website-building\/tailwind-css-core-concepts-explained\/","title":{"rendered":"Pemahaman Konsep Inti Tailwind CSS"},"content":{"rendered":"\n

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

\u5728\u4f17\u591a\u7684 CSS \u6846\u67b6\u4e2d\uff0cTailwind CSS<\/code> \u51ed\u501f\u5176\u72ec\u7279\u7684\u5b9e\u7528\u7c7b\u4f18\u5148\uff08Utility-First\uff09\u7406\u5ff5\u8131\u9896\u800c\u51fa\u3002\u5b83\u4e0e\u4f20\u7edf\u63d0\u4f9b\u9884\u5b9a\u4e49\u7ec4\u4ef6\u7684\u6846\u67b6\u4e0d\u540c\uff0c\u901a\u8fc7\u539f\u5b50\u5316\u7c7b\u540d\u76f4\u63a5\u6784\u5efa\u6837\u5f0f\u3002<\/p>\n\n\n\n

\u5176\u6838\u5fc3\u5de5\u4f5c\u539f\u7406\u662f\u4ece\u914d\u7f6e\u6587\u4ef6\u4e2d\u8bfb\u53d6\u8bbe\u8ba1\u4ee4\u724c\uff0c\u5e76\u751f\u6210\u6d77\u91cf\u7684\u5b9e\u7528\u7c7b\u3002\u5f00\u53d1\u8005\u901a\u8fc7\u5728 HTML \u5143\u7d20\u4e0a\u7ec4\u5408\u8fd9\u4e9b\u7c7b\uff0c\u5b9e\u73b0\u9ad8\u5ea6\u5b9a\u5236\u7684\u8bbe\u8ba1\u3002\u8fd9\u79cd\u6a21\u5f0f\u6781\u5927\u5730\u63d0\u5347\u4e86\u5f00\u53d1\u6548\u7387\uff0c\u51cf\u5c11\u4e86\u4e0a\u4e0b\u6587\u5207\u6362\uff0c\u5e76\u4fdd\u8bc1\u4e86\u6837\u5f0f\u7684\u4e00\u81f4\u6027\u3002<\/p>\n\n\n\n

\u5982\u4f55\u5b89\u88c5\u4e0e\u914d\u7f6e<\/h2>\n\n\n\n

\u5f00\u59cb\u4f7f\u7528 Tailwind CSS<\/code> \u6709\u591a\u79cd\u65b9\u5f0f\uff0c\u6700\u5e38\u89c1\u7684\u662f\u901a\u8fc7\u5305\u7ba1\u7406\u5668\u8fdb\u884c\u5b89\u88c5\u3002<\/p>\n

\u63a8\u8350\u9605\u8bfb \u4e3a\u4ec0\u4e48\u9009\u62e9 Tailwind CSS\uff1a\u529f\u80fd\u4f18\u5148\u7684\u73b0\u4ee3\u5316 CSS \u6846\u67b6<\/a>\u3002<\/p>\n\n\n\n\n

\u901a\u8fc7 NPM \u6216 Yarn \u5b89\u88c5\u6838\u5fc3\u5305<\/h3>\n\n\n\n

\u9996\u5148\uff0c\u9700\u8981\u5b89\u88c5 Tailwind CSS<\/code> \u53ca\u5176\u4f9d\u8d56\u3002\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff0c\u8fd9\u5c06\u5b89\u88c5 tailwindcss<\/code>\u3001postcss<\/code> \u548c autoprefixer<\/code>\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
npm install -D tailwindcss postcss autoprefixer\nnpx tailwindcss init<\/code><\/pre>\n\n\n\n
\u6267\u884c\u521d\u59cb\u5316\u547d\u4ee4\u4f1a\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a tailwind.config.js<\/code> \u7684\u914d\u7f6e\u6587\u4ef6\u3002\u8fd9\u4e2a\u6587\u4ef6\u662f\u5b9a\u5236 Tailwind CSS<\/code> \u7684\u67a2\u7ebd\uff0c\u4f60\u53ef\u4ee5\u5728\u8fd9\u91cc\u5b9a\u4e49\u4e3b\u9898\u8272\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u65ad\u70b9\u7b49\u5185\u5bb9\u3002<\/p>\n\n\n\n
\u914d\u7f6e\u6587\u4ef6\u7684\u7ed3\u6784\u4e0e\u4e3b\u8981\u9009\u9879<\/h3>\n\n\n\n
tailwind.config.js<\/code> \u6587\u4ef6\u5bfc\u51fa\u4e00\u4e2a JavaScript \u5bf9\u8c61\u3002\u5173\u952e\u7684\u914d\u7f6e\u9009\u9879\u5305\u62ec content<\/code>\uff0c\u5b83\u7528\u4e8e\u6307\u5b9a\u9879\u76ee\u4e2d\u4f7f\u7528 Tailwind \u7c7b\u540d\u7684\u6a21\u677f\u6587\u4ef6\u8def\u5f84\uff0c\u4ee5\u9632\u6b62\u751f\u6210\u672a\u4f7f\u7528\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\nmodule.exports = {\n  content: [".\/src\/**\/*.{html,js,jsx,ts,tsx,vue}"],\n  theme: {\n    extend: {\n      colors: {\n        'brand-blue': '#1992d4',\n      }\n    },\n  },\n  plugins: [],\n}<\/code><\/pre>\n\n\n\n
\u5f15\u5165\u6837\u5f0f\u5230\u9879\u76ee\u4e2d<\/h3>\n\n\n\n
\u914d\u7f6e\u5b8c\u6210\u540e\uff0c\u9700\u8981\u5728\u9879\u76ee\u7684\u5165\u53e3 CSS \u6587\u4ef6\u4e2d\u5f15\u5165 Tailwind \u7684\u6307\u4ee4\u3002\u901a\u5e38\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a src\/styles.css<\/code> \u6216 globals.css<\/code> \u7684\u6587\u4ef6\u3002<\/p>\n\n\n\n
@tailwind base;\n@tailwind components;\n@tailwind utilities;<\/code><\/pre>\n\n\n\n
\u6700\u540e\uff0c\u901a\u8fc7\u6784\u5efa\u5de5\u5177\u5904\u7406\u8fd9\u4e2a CSS \u6587\u4ef6\u3002\u5982\u679c\u4f60\u4f7f\u7528 Vite \u6216 Webpack\uff0c\u9700\u8981\u786e\u4fdd PostCSS \u914d\u7f6e\u6b63\u786e\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS \u5165\u95e8\u6307\u5357\uff1a\u4ece\u96f6\u5f00\u59cb\u6784\u5efa\u73b0\u4ee3\u54cd\u5e94\u5f0f\u7528\u6237\u754c\u9762<\/a>\u3002<\/p>\n\n\n\n\n
\u7f16\u5199\u6837\u5f0f\u7684\u57fa\u672c\u65b9\u6cd5<\/h2>\n\n\n\n
\u4f7f\u7528 Tailwind CSS<\/code> \u6784\u5efa\u754c\u9762\uff0c\u672c\u8d28\u4e0a\u662f\u5c06\u54cd\u5e94\u5f0f\u3001\u72b6\u6001\u548c\u5e03\u5c40\u7684\u7c7b\u540d\u76f4\u63a5\u5199\u5728 HTML \u6216 JSX \u6a21\u677f\u4e2d\u3002<\/p>\n\n\n\n
\u4f7f\u7528\u539f\u5b50\u5316\u7c7b\u540d\u7ec4\u5408\u6837\u5f0f<\/h3>\n\n\n\n
\u6bcf\u4e2a Tailwind CSS<\/code> \u7c7b\u540d\u901a\u5e38\u53ea\u5bf9\u5e94\u4e00\u4e2a CSS \u58f0\u660e\u3002\u4f8b\u5982\uff0ctext-lg<\/code> \u5bf9\u5e94 font-size: 1.125rem;<\/code>\uff0cfont-bold<\/code> \u5bf9\u5e94 font-weight: 700;<\/code>\u3002\u901a\u8fc7\u7ec4\u5408\u8fd9\u4e9b\u7c7b\uff0c\u53ef\u4ee5\u5feb\u901f\u6784\u5efa\u51fa\u590d\u6742\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n
<button class="px-4 py-2 bg-blue-600 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">\n  \u70b9\u51fb\u6309\u94ae\n<\/button><\/code><\/pre>\n\n\n\n
\u54cd\u5e94\u5f0f\u8bbe\u8ba1\u4e0e\u72b6\u6001\u53d8\u4f53<\/h3>\n\n\n\n
\u6846\u67b6\u5185\u7f6e\u4e86\u5f3a\u5927\u7684\u54cd\u5e94\u5f0f\u524d\u7f00\u3002\u5728\u7c7b\u540d\u524d\u52a0\u4e0a\u65ad\u70b9\u524d\u7f00\uff08\u5982 md:<\/code>\u3001lg:<\/code>\uff09\uff0c\u8be5\u6837\u5f0f\u5c31\u4f1a\u5728\u8be5\u65ad\u70b9\u53ca\u4ee5\u4e0a\u751f\u6548\u3002\u72b6\u6001\u53d8\u4f53\u5982 hover:<\/code>\u3001focus:<\/code>\u3001active:<\/code> \u5219\u7528\u6765\u5b9a\u4e49\u5143\u7d20\u5728\u4e0d\u540c\u72b6\u6001\u4e0b\u7684\u6837\u5f0f\u3002<\/p>\n\n\n  
\n\n      
\n        Bluehost\u5efa\u7ad9\u52a9\u624b<\/strong>\n        
\u63d0\u4f9b AI \u7f51\u7ad9\u521b\u5efa\u5de5\u5177\uff0c24\/7 \u5728\u7ebf\u804a\u5929\u4e0e\u7535\u8bdd\u652f\u6301\uff0c\u4e00\u5e74\u514d\u8d39\u57df\u540d\uff0c\u514d\u8d39CDN\uff0c99.99% \u6b63\u5e38\u8fd0\u884c\u65f6\u95f4 SLA<\/div>\n      <\/div>\n\n      
\n                  \n                          \n              \"\u5efa\u7ad9\u52a9\u624b\n                      <\/a>\n          \n        \n          \u8bbf\u95eeBluehost        <\/a>\n      <\/div>\n    <\/div>\n\n    \n\n\n\n\n\n\n
<div class="text-base md:text-lg lg:text-xl bg-gray-100 hover:bg-gray-200">\n  \u54cd\u5e94\u5f0f\u5e76\u4e14\u6709\u60ac\u505c\u6548\u679c\u7684\u6587\u5b57\u5bb9\u5668\u3002\n<\/div><\/code><\/pre>\n\n\n\n
\u9ad8\u7ea7\u529f\u80fd\u4e0e\u5b9a\u5236\u5316<\/h2>\n\n\n\n
\u57fa\u7840\u7684\u5b9e\u7528\u7c7b\u4e4b\u5916\uff0cTailwind CSS<\/code> \u8fd8\u63d0\u4f9b\u4e86\u4e00\u7cfb\u5217\u9ad8\u7ea7\u529f\u80fd\uff0c\u4ee5\u6ee1\u8db3\u590d\u6742\u9879\u76ee\u7684\u9700\u6c42\u3002<\/p>\n\n\n\n
\u521b\u5efa\u53ef\u590d\u7528\u7ec4\u4ef6\u7c7b<\/h3>\n\n\n\n
\u867d\u7136\u9f13\u52b1\u76f4\u63a5\u4f7f\u7528\u5b9e\u7528\u7c7b\uff0c\u4f46\u4e5f\u53ef\u4ee5\u901a\u8fc7 @layer components<\/code> \u6307\u4ee4\u6765\u63d0\u53d6\u548c\u5c01\u88c5\u91cd\u590d\u7684\u7c7b\u540d\u7ec4\u5408\uff0c\u521b\u5efa\u81ea\u5b9a\u4e49\u7684\u7ec4\u4ef6\u7c7b\u3002<\/p>\n\n\n\n
@layer components {\n  .btn-primary {\n    @apply px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400;\n  }\n}<\/code><\/pre>\n\n\n\n
\u4e4b\u540e\u5728 HTML \u4e2d\u76f4\u63a5\u4f7f\u7528 btn-primary<\/code> \u7c7b\u5373\u53ef\u3002<\/p>\n
\u63a8\u8350\u9605\u8bfb Tailwind CSS \u7ec8\u6781\u6307\u5357\uff1a\u4ece\u5165\u95e8\u5230\u7cbe\u901a\u7684\u73b0\u4ee3 CSS \u6846\u67b6\u5b9e\u6218<\/a>\u3002<\/p>\n\n\n\n\n
\u6df1\u5ea6\u5b9a\u5236\u8bbe\u8ba1\u7cfb\u7edf<\/h3>\n\n\n\n
\u901a\u8fc7\u4fee\u6539 tailwind.config.js<\/code> \u4e2d\u7684 theme<\/code> \u90e8\u5206\uff0c\u4f60\u53ef\u4ee5\u5b8c\u5168\u8986\u76d6\u6216\u6269\u5c55\u9ed8\u8ba4\u7684\u6837\u5f0f\u3002\u4f8b\u5982\uff0c\u53ef\u4ee5\u5b9a\u4e49\u81ea\u5df1\u7684\u989c\u8272\u8c03\u8272\u677f\u3001\u95f4\u8ddd\u6bd4\u4f8b\u3001\u5b57\u4f53\u65cf\u3001\u5706\u89d2\u5c3a\u5bf8\u7b49\u3002<\/p>\n\n\n\n
\/\/ tailwind.config.js\ntheme: {\n  extend: {\n    spacing: {\n      '128': '32rem',\n    },\n    animation: {\n      'spin-slow': 'spin 3s linear infinite',\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
\u4f7f\u7528\u51fd\u6570\u4e0e\u6307\u4ee4\u5b9e\u73b0\u52a8\u6001\u503c<\/h3>\n\n\n\n
\u5bf9\u4e8e\u65e0\u6cd5\u901a\u8fc7\u9759\u6001\u7c7b\u540d\u5b9e\u73b0\u7684\u60c5\u51b5\uff08\u5982\u5bbd\u5ea6\u968f\u6570\u636e\u53d8\u5316\uff09\uff0c\u53ef\u4ee5\u4f7f\u7528\u65b9\u62ec\u53f7\u8bed\u6cd5\u6765\u751f\u6210\u4efb\u610f\u503c\u3002\u6b64\u5916\uff0c\u50cf @apply<\/code> \u8fd9\u6837\u7684\u6307\u4ee4\u53ef\u4ee5\u7528\u4e8e\u5728 CSS \u6587\u4ef6\u4e2d\u5185\u8054\u5b9e\u7528\u7c7b\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="w-[calc(100%-1rem)] top-[117px]">\n  <!-- \u52a8\u6001\u8ba1\u7b97\u7684\u5bbd\u5ea6\u548c\u5b9a\u4f4d\u503c -->\n<\/div><\/code><\/pre>\n\n\n\n
\u603b\u7ed3<\/h2>\n\n\n\n
Tailwind CSS<\/code> \u63d0\u4f9b\u4e86\u4e00\u79cd\u9ad8\u6548\u3001\u7075\u6d3b\u7684\u73b0\u4ee3 CSS \u5f00\u53d1\u8303\u5f0f\u3002\u5176\u6838\u5fc3\u7684\u5b9e\u7528\u7c7b\u4f18\u5148\u65b9\u6cd5\uff0c\u901a\u8fc7\u6d88\u9664\u5728 HTML \u548c CSS \u6587\u4ef6\u4e4b\u95f4\u7684\u9891\u7e41\u5207\u6362\uff0c\u663e\u8457\u63d0\u5347\u4e86\u5f00\u53d1\u901f\u5ea6\u4e0e\u4f53\u9a8c\u3002\u4ece\u5176\u4fbf\u6377\u7684\u5b89\u88c5\u914d\u7f6e\u6d41\u7a0b\u3001\u76f4\u89c2\u7684\u539f\u5b50\u5316\u7c7b\u540d\u4f7f\u7528\u65b9\u5f0f\uff0c\u5230\u6df1\u5ea6\u5b9a\u5236\u7684\u4e3b\u9898\u914d\u7f6e\u548c\u7ec4\u4ef6\u63d0\u53d6\u529f\u80fd\uff0c\u5b83\u90fd\u5c55\u73b0\u51fa\u5f3a\u5927\u7684\u9002\u5e94\u6027\u548c\u53ef\u6269\u5c55\u6027\u3002<\/p>\n\n\n\n
\u638c\u63e1\u6b64\u6846\u67b6\u4e0d\u4ec5\u80fd\u5e2e\u52a9\u4f60\u5feb\u901f\u5b9e\u73b0\u7cbe\u51c6\u7684\u8bbe\u8ba1\u7a3f\uff0c\u66f4\u80fd\u5efa\u7acb\u8d77\u4e00\u5957\u6613\u4e8e\u7ef4\u62a4\u3001\u6837\u5f0f\u4e00\u81f4\u7684\u8bbe\u8ba1\u7cfb\u7edf\u3002\u5bf9\u4e8e\u8ffd\u6c42\u5f00\u53d1\u6548\u7387\u548c\u8bbe\u8ba1\u8fd8\u539f\u5ea6\u7684\u56e2\u961f\u800c\u8a00\uff0c\u5b83\u65e0\u7591\u662f\u4e00\u4e2a\u6781\u5177\u4ef7\u503c\u7684\u5de5\u5177\u3002<\/p>\n\n\n\n
FAQ \u5e38\u89c1\u95ee\u9898<\/h2>\n\n\n\n
Tailwind CSS \u7684\u7c7b\u540d\u592a\u591a\u5bfc\u81f4 HTML \u6df7\u4e71\u600e\u4e48\u529e\uff1f<\/h3>\n\n\n\n
\u53ef\u4ee5\u901a\u8fc7\u4ee5\u4e0b\u51e0\u79cd\u65b9\u5f0f\u4fdd\u6301\u4ee3\u7801\u6574\u6d01\uff1a\u4e00\u662f\u4f7f\u7528 @apply<\/code> \u6307\u4ee4\u5c06\u5e38\u7528\u7684\u5b9e\u7528\u7c7b\u7ec4\u5408\u63d0\u53d6\u4e3a\u81ea\u5b9a\u4e49 CSS \u7c7b\uff1b\u4e8c\u662f\u5728\u73b0\u4ee3\u7684\u7ec4\u4ef6\u5316\u6846\u67b6\u4e2d\uff0c\u53ef\u4ee5\u5c06\u5e26\u6709\u5927\u91cf\u7c7b\u540d\u7684\u5143\u7d20\u5c01\u88c5\u6210\u72ec\u7acb\u7684\u7ec4\u4ef6\uff1b\u4e09\u662f\u5408\u7406\u4f7f\u7528\u7f16\u8f91\u5668\u6216 IDE \u7684\u4ee3\u7801\u6298\u53e0\u529f\u80fd\uff0c\u6216\u8005\u5c06\u8f83\u957f\u7684\u7c7b\u540d\u5b57\u7b26\u4e32\u8fdb\u884c\u591a\u884c\u6392\u7248\u4ee5\u589e\u5f3a\u53ef\u8bfb\u6027\u3002<\/p>\n\n\n\n
Tailwind \u7684\u6837\u5f0f\u4e0e\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u5e93\u51b2\u7a81\u5982\u4f55\u89e3\u51b3\uff1f<\/h3>\n\n\n\n
Tailwind CSS<\/code> \u901a\u8fc7 Preflight \u529f\u80fd\u5bf9\u9ed8\u8ba4\u6837\u5f0f\u8fdb\u884c\u91cd\u7f6e\uff0c\u8fd9\u53ef\u80fd\u4f1a\u5f71\u54cd\u67d0\u4e9b\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u3002\u53ef\u4ee5\u901a\u8fc7\u5728 tailwind.config.js<\/code> \u4e2d\u914d\u7f6e corePlugins<\/code> \u6765\u7981\u7528 Preflight \u6216\u5176\u5b50\u96c6\u3002\u66f4\u7cbe\u7ec6\u7684\u505a\u6cd5\u662f\uff0c\u4f7f\u7528 @layer base<\/code> \u4e3a\u7b2c\u4e09\u65b9\u7ec4\u4ef6\u6216\u7279\u5b9a\u5143\u7d20\u91cd\u65b0\u5b9a\u4e49\u4e00\u4e9b\u57fa\u7840\u6837\u5f0f\uff0c\u6216\u4f7f\u7528\u66f4\u5177\u4f53\u7684\u9009\u62e9\u5668\u6765\u8986\u76d6\u6837\u5f0f\u3002<\/p>\n\n\n\n
\u751f\u6210\u7684\u751f\u4ea7\u73af\u5883 CSS \u6587\u4ef6\u4f53\u79ef\u4f1a\u5f88\u5927\u5417\uff1f<\/h3>\n\n\n\n
\u4e0d\u4f1a\u3002\u901a\u8fc7\u6b63\u786e\u914d\u7f6e content<\/code> \u9009\u9879\uff0cTailwind CSS<\/code> \u5728\u6784\u5efa\u65f6\u4f1a\u4f7f\u7528 PurgeCSS\uff08\u73b0\u96c6\u6210\u5728\u5f15\u64ce\u4e2d\uff09\u8fdb\u884c Tree Shaking\uff0c\u53ea\u4fdd\u7559\u9879\u76ee\u4e2d\u5b9e\u9645\u4f7f\u7528\u5230\u7684\u7c7b\u540d\uff0c\u4ece\u800c\u751f\u6210\u6781\u5c0f\u7684 CSS \u6587\u4ef6\u3002\u5728\u5178\u578b\u7684\u9879\u76ee\u4e2d\uff0c\u6700\u7ec8\u7684\u751f\u4ea7\u73af\u5883 CSS \u901a\u5e38\u53ef\u4ee5\u63a7\u5236\u5728 10kB \u4ee5\u4e0b\u3002<\/p>\n\n\n\n
\u662f\u5426\u53ef\u4ee5\u5728 Vue \u6216 React \u7b49\u6846\u67b6\u4e2d\u4f7f\u7528\uff1f<\/h3>\n\n\n\n
\u5b8c\u5168\u53ef\u4ee5\u3002Tailwind CSS<\/code> \u4e0e\u6240\u6709\u4e3b\u6d41\u7684\u524d\u7aef\u6846\u67b6\u548c\u65e0\u6846\u67b6\u7684 HTML \u90fd\u80fd\u5b8c\u7f8e\u96c6\u6210\u3002\u5728 React\u3001Vue\u3001Svelte\u3001Angular \u7b49\u9879\u76ee\u4e2d\uff0c\u914d\u7f6e\u8fc7\u7a0b\u57fa\u672c\u4e00\u81f4\uff1a\u5b89\u88c5\u5305\u3001\u521b\u5efa\u914d\u7f6e\u6587\u4ef6\u3001\u5f15\u5165\u57fa\u7840\u6837\u5f0f\uff0c\u7136\u540e\u5728\u7ec4\u4ef6\u7684\u6a21\u677f\u6216 JSX \u4e2d\u4f7f\u7528\u5b9e\u7528\u7c7b\u540d\u5373\u53ef\uff0c\u5f00\u53d1\u4f53\u9a8c\u975e\u5e38\u6d41\u7545\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Artikel ini secara sistematis menganalisis konsep-konsep inti dari Tailwind CSS. Pertama-tama, artikel tersebut memperkenalkan konsep unik Tailwind CSS yang mengutamakan penggunaan kelas-kelas praktis (practical classes) beserta cara kerjanya. Selanjutnya, dijelaskan secara rinci langkah-langkah untuk menginstal Tailwind CSS melalui npm, mengatur konfigurasinya, serta memasukkan gaya (styles) ke dalam proyek. Setelah itu, diuraikan cara menggunakan nama kelas yang terstruktur (atomic class names) untuk menggabungkan gaya, menerapkan desain responsif (responsive design), dan mengelola variasi kondisi (state variations). Akhirnya, dibahas pula fitur-fitur kustomisasi tingkat lanjut seperti pembuatan kelas komponen yang dapat digunakan kembali (reusable component classes), dengan tujuan membantu para pengembang memahami dan menggunakan framework ini dengan lebih efisien.<\/p>","protected":false},"author":7,"featured_media":0,"template":"","meta":{"_acf_changed":false,"footnotes":""},"tags":[2257,2256,430,2318,3307],"knowledge_category":[281],"class_list":["post-12391118","knowledge_post","type-knowledge_post","status-publish","hentry","tag-css-frameworks","tag-tailwind-css","tag-frontend-development","tag-2318","tag-style-building","knowledge_category-website-building"],"acf":{"site_seo_keywords":"Tailwind CSS, \u5b9e\u7528\u7c7b\u4f18\u5148, \u539f\u5b50\u5316CSS, \u5b89\u88c5\u914d\u7f6e, \u54cd\u5e94\u5f0f\u8bbe\u8ba1, \u72b6\u6001\u53d8\u4f53, \u5b9a\u5236\u5316\u7ec4\u4ef6, Tailwind\u6838\u5fc3\u6982\u5ff5\u89e3\u6790"},"_links":{"self":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12391118","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":3,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12391118\/revisions"}],"predecessor-version":[{"id":12391137,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_posts\/12391118\/revisions\/12391137"}],"wp:attachment":[{"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/media?parent=12391118"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/tags?post=12391118"},{"taxonomy":"knowledge_category","embeddable":true,"href":"https:\/\/www.likacloud.com\/id\/wp-json\/wp\/v2\/knowledge_category?post=12391118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}