{"id":260,"date":"2026-01-25T00:13:50","date_gmt":"2026-01-24T16:13:50","guid":{"rendered":"https:\/\/skwp.zeabur.app\/2026\/01\/25\/%e3%80%90tailwind-css-%e6%95%99%e5%ad%b8%e3%80%9104-%e5%ae%a2%e8%a3%bd%e5%8c%96%e9%85%8d%e7%bd%ae%e8%88%87%e6%9c%80%e4%bd%b3%e5%af%a6%e8%b8%90\/"},"modified":"2026-01-25T00:13:50","modified_gmt":"2026-01-24T16:13:50","slug":"%e3%80%90tailwind-css-%e6%95%99%e5%ad%b8%e3%80%9104-%e5%ae%a2%e8%a3%bd%e5%8c%96%e9%85%8d%e7%bd%ae%e8%88%87%e6%9c%80%e4%bd%b3%e5%af%a6%e8%b8%90","status":"publish","type":"post","link":"https:\/\/blog.itsmygo.uk\/wordpress\/2026\/01\/25\/%e3%80%90tailwind-css-%e6%95%99%e5%ad%b8%e3%80%9104-%e5%ae%a2%e8%a3%bd%e5%8c%96%e9%85%8d%e7%bd%ae%e8%88%87%e6%9c%80%e4%bd%b3%e5%af%a6%e8%b8%90\/","title":{"rendered":"\u3010Tailwind CSS \u6559\u5b78\u3011#04 \u5ba2\u88fd\u5316\u914d\u7f6e\u8207\u6700\u4f73\u5be6\u8e10"},"content":{"rendered":"\n<div id=\"quiz-basic\">\n<style>\n#quiz-basic .quiz-container {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 20px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            border-radius: 16px;\n            box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);\n        }#quiz-basic .quiz-header {\n            text-align: center;\n            color: white;\n            margin-bottom: 24px;\n        }#quiz-basic .quiz-header h2 {\n            margin: 0 0 8px 0;\n            font-size: 24px;\n            font-weight: 700;\n        }#quiz-basic .quiz-header p {\n            margin: 0;\n            opacity: 0.9;\n            font-size: 14px;\n        }#quiz-basic .question-card {\n            background: white;\n            border-radius: 12px;\n            padding: 24px;\n            margin-bottom: 16px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n            transition: transform 0.2s ease;\n        }#quiz-basic .question-card:hover {\n            transform: translateY(-2px);\n        }#quiz-basic .question-number {\n            display: inline-block;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            text-align: center;\n            line-height: 28px;\n            font-size: 14px;\n            font-weight: 600;\n            margin-right: 12px;\n        }#quiz-basic .question-text {\n            display: inline;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a202c;\n            line-height: 1.6;\n        }#quiz-basic .options {\n            margin-top: 16px;\n        }#quiz-basic .option {\n            display: block;\n            padding: 12px 16px;\n            margin: 8px 0;\n            background: #f7fafc;\n            border: 2px solid #e2e8f0;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 14px;\n            color: #4a5568;\n        }#quiz-basic .option:hover {\n            background: #edf2f7;\n            border-color: #cbd5e0;\n        }#quiz-basic .option.selected {\n            background: #ebf4ff;\n            border-color: #667eea;\n            color: #5a67d8;\n        }#quiz-basic .option.correct {\n            background: #f0fff4;\n            border-color: #48bb78;\n            color: #276749;\n        }#quiz-basic .option.incorrect {\n            background: #fff5f5;\n            border-color: #fc8181;\n            color: #c53030;\n        }#quiz-basic .option.show-correct {\n            background: #f0fff4;\n            border-color: #48bb78;\n            color: #276749;\n        }#quiz-basic .feedback {\n            margin-top: 12px;\n            padding: 12px 16px;\n            border-radius: 8px;\n            font-size: 14px;\n            display: none;\n            line-height: 1.6;\n        }#quiz-basic .feedback.correct {\n            background: #f0fff4;\n            color: #276749;\n            border-left: 4px solid #48bb78;\n            display: block;\n        }#quiz-basic .feedback.incorrect {\n            background: #fff5f5;\n            color: #c53030;\n            border-left: 4px solid #fc8181;\n            display: block;\n        }#quiz-basic .submit-btn {\n            display: block;\n            width: 100%;\n            padding: 16px;\n            background: white;\n            color: #667eea;\n            border: none;\n            border-radius: 12px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            margin-top: 8px;\n        }#quiz-basic .submit-btn:hover {\n            background: #f7fafc;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }#quiz-basic .submit-btn:disabled {\n            background: #e2e8f0;\n            color: #a0aec0;\n            cursor: not-allowed;\n            transform: none;\n            box-shadow: none;\n        }#quiz-basic .results {\n            background: white;\n            border-radius: 12px;\n            padding: 24px;\n            text-align: center;\n            display: none;\n        }#quiz-basic .results.show {\n            display: block;\n        }#quiz-basic .score {\n            font-size: 48px;\n            font-weight: 700;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }#quiz-basic .score-text {\n            font-size: 18px;\n            color: #4a5568;\n            margin-top: 8px;\n        }#quiz-basic .retry-btn {\n            margin-top: 20px;\n            padding: 12px 32px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }#quiz-basic .retry-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        }\n<\/style>\n<div class=\"quiz-container\" id=\"quiz-basic\">\n        <div class=\"quiz-header\">\n            <h2>Tailwind CSS \u5ba2\u88fd\u5316\u914d\u7f6e\u8207\u6700\u4f73\u5be6\u8e10 &#8211; \u57fa\u790e\u6e2c\u9a57<\/h2>\n            <p>\u6e2c\u8a66\u4f60\u5c0d Tailwind \u914d\u7f6e\u548c\u6700\u4f73\u5be6\u8e10\u7684\u7406\u89e3<\/p>\n        <\/div>\n\n        <form id=\"quizForm\">\n            <div class=\"question-card\" data-question=\"1\">\n                <span class=\"question-number\">1<\/span>\n                <span class=\"question-text\">\u5728 Tailwind v3 \u7684 <code>tailwind.config.js<\/code> \u4e2d\uff0c\u5982\u679c\u60f3\u8981\u65b0\u589e\u81ea\u8a02\u984f\u8272\u4f46\u4fdd\u7559\u6240\u6709\u9810\u8a2d\u984f\u8272\uff0c\u61c9\u8a72\u628a\u8a2d\u5b9a\u653e\u5728\u54ea\u88e1\uff1f<\/span>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"a\">\n                        A. <code>theme.colors<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"b\">\n                        B. <code>theme.extend.colors<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"c\">\n                        C. <code>plugins.colors<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"d\">\n                        D. <code>content.colors<\/code>\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"2\">\n                <span class=\"question-number\">2<\/span>\n                <span class=\"question-text\">\u5728 Tailwind v4 \u4e2d\uff0c\u5ba2\u88fd\u5316\u8a2d\u8a08\u7cfb\u7d71\u4e3b\u8981\u4f7f\u7528\u54ea\u500b CSS \u6307\u4ee4\uff1f<\/span>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"a\">\n                        A. <code>@config<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"b\">\n                        B. <code>@tailwind<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"c\">\n                        C. <code>@theme<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"d\">\n                        D. <code>@extend<\/code>\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"3\">\n                <span class=\"question-number\">3<\/span>\n                <span class=\"question-text\">\u95dc\u65bc <code>@apply<\/code> \u6307\u4ee4\uff0c\u4ee5\u4e0b\u54ea\u500b\u662f\u63a8\u85a6\u7684\u4f7f\u7528\u60c5\u5883\uff1f<\/span>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"a\">\n                        A. \u628a\u6240\u6709\u5143\u4ef6\u7684\u6a23\u5f0f\u90fd\u7528 @apply \u62bd\u51fa\u4f86\uff0c\u8b93 HTML \u66f4\u4e7e\u6de8\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"b\">\n                        B. \u53ea\u5728\u55ae\u4e00\u5730\u65b9\u4f7f\u7528\u7684\u6a23\u5f0f\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"c\">\n                        C. \u7121\u6cd5\u7528 React\/Vue \u5143\u4ef6\u62bd\u8c61\u3001\u4f46\u9700\u8981\u8de8\u591a\u8655\u91cd\u7528\u7684\u6a23\u5f0f\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"d\">\n                        D. \u5b8c\u5168\u4e0d\u61c9\u8a72\u4f7f\u7528 @apply\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"4\">\n                <span class=\"question-number\">4<\/span>\n                <span class=\"question-text\">\u4f7f\u7528 <code>@tailwindcss\/typography<\/code> \u63d2\u4ef6\u6642\uff0c\u8981\u8b93\u5167\u5bb9\u5957\u7528\u6392\u7248\u6a23\u5f0f\uff0c\u9700\u8981\u52a0\u4e0a\u54ea\u500b class\uff1f<\/span>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"a\">\n                        A. <code>typography<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"b\">\n                        B. <code>article<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"c\">\n                        C. <code>prose<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"d\">\n                        D. <code>content<\/code>\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"5\">\n                <span class=\"question-number\">5<\/span>\n                <span class=\"question-text\">\u4ee5\u4e0b\u7a0b\u5f0f\u78bc\u70ba\u4ec0\u9ebc\u6703\u5c0e\u81f4\u6a23\u5f0f\u7121\u6cd5\u6b63\u5e38\u986f\u793a\uff1f<br><code>const color = 'red'; &lt;div className={`bg-${color}-500`} \/&gt;<\/code><\/span>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"a\">\n                        A. Tailwind \u4e0d\u652f\u63f4 template literal \u8a9e\u6cd5\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"b\">\n                        B. JIT \u6a21\u5f0f\u6383\u63cf\u6642\u627e\u4e0d\u5230\u5b8c\u6574\u7684 class \u540d\u7a31\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"c\">\n                        C. red \u4e0d\u662f\u6709\u6548\u7684\u984f\u8272\u540d\u7a31\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"d\">\n                        D. \u5fc5\u9808\u4f7f\u7528 class \u800c\u975e className\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\u63d0\u4ea4\u7b54\u6848<\/button>\n        <\/form>\n\n        <div class=\"results\" id=\"results\">\n            <div class=\"score\" id=\"score\">0\/5<\/div>\n            <div class=\"score-text\" id=\"scoreText\">\u7e7c\u7e8c\u52a0\u6cb9\uff01<\/div>\n            <button class=\"retry-btn\" onclick=\"resetQuiz()\">\u518d\u8a66\u4e00\u6b21<\/button>\n        <\/div>\n    <\/div>\n<script>\n\n        const answers = {\n            q1: { correct: 'b', explanation: '\u6b63\u78ba\uff01\u4f7f\u7528 theme.extend.colors \u53ef\u4ee5\u65b0\u589e\u81ea\u8a02\u984f\u8272\uff0c\u540c\u6642\u4fdd\u7559 Tailwind \u6240\u6709\u9810\u8a2d\u984f\u8272\u3002\u5982\u679c\u76f4\u63a5\u8a2d\u5b9a\u5728 theme.colors\uff0c\u6703\u8986\u84cb\u6389\u6240\u6709\u9810\u8a2d\u503c\u3002' },\n            q2: { correct: 'c', explanation: '\u6b63\u78ba\uff01Tailwind v4 \u63a1\u7528 CSS-first \u914d\u7f6e\uff0c\u4f7f\u7528 @theme \u6307\u4ee4\u5728 CSS \u6a94\u6848\u4e2d\u5b9a\u7fa9\u8a2d\u8a08\u7cfb\u7d71\uff0c\u4f8b\u5982 --color-brand: #5046e5\u3002' },\n            q3: { correct: 'c', explanation: '\u6b63\u78ba\uff01@apply \u6700\u9069\u5408\u7528\u65bc\u7121\u6cd5\u900f\u904e\u5143\u4ef6\u62bd\u8c61\u3001\u4f46\u78ba\u5be6\u9700\u8981\u8de8\u591a\u8655\u91cd\u7528\u7684\u6a23\u5f0f\uff0c\u4f8b\u5982\u5168\u57df\u7684\u8868\u55ae\u8f38\u5165\u6846\u6a23\u5f0f\u3002\u904e\u5ea6\u4f7f\u7528\u6703\u5931\u53bb Tailwind \u7684\u512a\u52e2\u3002' },\n            q4: { correct: 'c', explanation: '\u6b63\u78ba\uff01typography \u63d2\u4ef6\u4f7f\u7528 prose class \u4f86\u5957\u7528\u6392\u7248\u6a23\u5f0f\uff0c\u4f8b\u5982 <article class=\"prose\">\u3002\u9084\u53ef\u4ee5\u642d\u914d lg:prose-xl \u8abf\u6574\u5927\u5c0f\uff0c\u6216 dark:prose-invert \u652f\u63f4\u6df1\u8272\u6a21\u5f0f\u3002' },\n            q5: { correct: 'b', explanation: '\u6b63\u78ba\uff01JIT \u6a21\u5f0f\u900f\u904e\u975c\u614b\u6383\u63cf\u6a94\u6848\u4f86\u7522\u751f CSS\uff0c\u52d5\u614b\u7d44\u5408\u7684 class \u540d\u7a31\uff08\u5982 bg-${color}-500\uff09\u7121\u6cd5\u88ab\u6383\u63cf\u5230\u3002\u61c9\u8a72\u4f7f\u7528\u5b8c\u6574\u7684 class \u540d\u7a31\u5c0d\u61c9\u8868\u4f86\u89e3\u6c7a\u3002' }\n        };\n\n        document.getElementById('quizForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n\n            let score = 0;\n            const totalQuestions = 5;\n\n            for (let i = 1; i <= totalQuestions; i++) {\n                const questionCard = document.querySelector(`[data-question=\"${i}\"]`);\n                const selected = document.querySelector(`input[name=\"q${i}\"]:checked`);\n                const feedback = questionCard.querySelector('.feedback');\n                const options = questionCard.querySelectorAll('.option');\n\n                options.forEach(opt => {\n                    opt.classList.remove('selected', 'correct', 'incorrect', 'show-correct');\n                    const input = opt.querySelector('input');\n                    if (input.value === answers[`q${i}`].correct) {\n                        opt.classList.add('show-correct');\n                    }\n                });\n\n                if (selected) {\n                    const selectedOption = selected.closest('.option');\n                    if (selected.value === answers[`q${i}`].correct) {\n                        score++;\n                        selectedOption.classList.add('correct');\n                        feedback.className = 'feedback correct';\n                        feedback.textContent = answers[`q${i}`].explanation;\n                    } else {\n                        selectedOption.classList.add('incorrect');\n                        feedback.className = 'feedback incorrect';\n                        feedback.textContent = `\u7b54\u932f\u4e86\uff01${answers['q' + i].explanation}`;\n                    }\n                } else {\n                    feedback.className = 'feedback incorrect';\n                    feedback.textContent = '\u672a\u4f5c\u7b54\u3002' + answers[`q${i}`].explanation;\n                }\n            }\n\n            document.getElementById('score').textContent = `${score}\/${totalQuestions}`;\n\n            let scoreText = '';\n            if (score === totalQuestions) {\n                scoreText = '\u592a\u53b2\u5bb3\u4e86\uff01\u6eff\u5206\uff01';\n            } else if (score >= 4) {\n                scoreText = '\u5f88\u68d2\uff01\u638c\u63e1\u5f97\u5f88\u597d\uff01';\n            } else if (score >= 3) {\n                scoreText = '\u4e0d\u932f\uff0c\u518d\u8907\u7fd2\u4e00\u4e0b\u5427\uff01';\n            } else {\n                scoreText = '\u5efa\u8b70\u91cd\u65b0\u95b1\u8b80\u6587\u7ae0\u5f8c\u518d\u8a66\u4e00\u6b21';\n            }\n            document.getElementById('scoreText').textContent = scoreText;\n\n            document.getElementById('results').classList.add('show');\n            document.getElementById('submitBtn').disabled = true;\n        });\n\n        document.querySelectorAll('.option').forEach(option => {\n            option.addEventListener('click', function() {\n                const name = this.querySelector('input').name;\n                document.querySelectorAll(`input[name=\"${name}\"]`).forEach(input => {\n                    input.closest('.option').classList.remove('selected');\n                });\n                this.classList.add('selected');\n                this.querySelector('input').checked = true;\n            });\n        });\n\n        function resetQuiz() {\n            document.getElementById('quizForm').reset();\n            document.querySelectorAll('.option').forEach(opt => {\n                opt.classList.remove('selected', 'correct', 'incorrect', 'show-correct');\n            });\n            document.querySelectorAll('.feedback').forEach(fb => {\n                fb.className = 'feedback';\n                fb.textContent = '';\n            });\n            document.getElementById('results').classList.remove('show');\n            document.getElementById('submitBtn').disabled = false;\n        }\n    \n<\/script>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u7576\u4f60\u958b\u59cb\u5728\u771f\u5be6\u5c08\u6848\u4e2d\u4f7f\u7528 Tailwind CSS \u6642\uff0c\u5f88\u5feb\u5c31\u6703\u9047\u5230\u300c\u9810\u8a2d\u7684\u8a2d\u8a08\u7cfb\u7d71\u4e0d\u5b8c\u5168\u7b26\u5408\u9700\u6c42\u300d\u7684\u60c5\u6cc1\u3002\u9019\u6642\u5019\uff0c\u4f60\u9700\u8981\u77e5\u9053\u5982\u4f55\u5ba2\u88fd\u5316 Tailwind \u7684\u914d\u7f6e\u3002\u672c\u7bc7\u5c07\u5e36\u4f60\u4e86\u89e3\u914d\u7f6e\u6a94\u6848\u7684\u67b6\u69cb\u3001\u5982\u4f55\u81ea\u8a02\u8a2d\u8a08\u7cfb\u7d71\uff0c\u4ee5\u53ca\u64b0\u5beb Tailwind CSS \u5c08\u6848\u7684\u6700\u4f73\u5be6\u8e10\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u914d\u7f6e\u6a94\u6848\uff1av3 vs v4 \u7684\u5dee\u7570<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728\u958b\u59cb\u4e4b\u524d\uff0c\u5148\u4e86\u89e3 Tailwind CSS \u5728 v4.0 \u6709\u91cd\u5927\u8b8a\u5316\uff1a\u5f9e JavaScript \u914d\u7f6e\u8f49\u5411 CSS-first \u914d\u7f6e\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Tailwind v3\uff1atailwind.config.js<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5728 v3 \u4e2d\uff0c\u6240\u6709\u5ba2\u88fd\u5316\u90fd\u5728 <code>tailwind.config.js<\/code> \u9032\u884c\uff1a<\/p>\n\n\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">content<\/span>: &#91;<span class=\"hljs-string\">'.\/src\/**\/*.{html,js,jsx,ts,tsx}'<\/span>],\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">colors<\/span>: {\n        <span class=\"hljs-attr\">brand<\/span>: <span class=\"hljs-string\">'#5046e5'<\/span>,\n      },\n    },\n  },\n  <span class=\"hljs-attr\">plugins<\/span>: &#91;],\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">Tailwind v4\uff1aCSS-first \u914d\u7f6e<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">v4.0 \u6539\u70ba\u5728 CSS \u6a94\u6848\u4e2d\u76f4\u63a5\u914d\u7f6e\uff0c\u4f7f\u7528 <code>@theme<\/code> \u6307\u4ee4\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css (v4) *\/<\/span>\n<span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"tailwindcss\"<\/span>;\n\n<span class=\"hljs-keyword\">@theme<\/span> {\n  <span class=\"hljs-selector-tag\">--color-brand<\/span>: <span class=\"hljs-selector-id\">#5046e5<\/span>;\n  <span class=\"hljs-selector-tag\">--font-display<\/span>: \"<span class=\"hljs-selector-tag\">Inter<\/span>\", <span class=\"hljs-selector-tag\">sans-serif<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u8b80\u7a0b\u5f0f\u78bc\u6642\uff0c\u5982\u679c\u770b\u5230 <code>tailwind.config.js<\/code>\uff0c\u9019\u662f v3 \u5c08\u6848\uff1b\u5982\u679c\u770b\u5230 CSS \u4e2d\u7684 <code>@theme<\/code>\uff0c\u9019\u662f v4 \u5c08\u6848\u3002\u5169\u7a2e\u65b9\u5f0f\u90fd\u9084\u88ab\u652f\u63f4\uff0c\u4f46 v4 \u63a8\u85a6\u4f7f\u7528 CSS-first \u65b9\u5f0f\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u6587\u6703\u540c\u6642\u4ecb\u7d39\u5169\u7a2e\u65b9\u5f0f\uff0c\u8b93\u4f60\u80fd\u8b80\u61c2\u4e0d\u540c\u7248\u672c\u7684\u5c08\u6848\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u81ea\u8a02\u984f\u8272\uff1a\u64f4\u5c55 vs \u8986\u84cb<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u5e38\u898b\u7684\u5ba2\u88fd\u5316\u9700\u6c42\u662f\u6dfb\u52a0\u54c1\u724c\u984f\u8272\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u64f4\u5c55\u9810\u8a2d\u8abf\u8272\u76e4\uff08\u63a8\u85a6\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 <code>extend<\/code> \u53ef\u4ee5\u4fdd\u7559 Tailwind \u9810\u8a2d\u7684\u6240\u6709\u984f\u8272\uff0c\u53ea\u65b0\u589e\u4f60\u9700\u8981\u7684\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">colors<\/span>: {\n        <span class=\"hljs-attr\">brand<\/span>: {\n          <span class=\"hljs-number\">50<\/span>: <span class=\"hljs-string\">'#eff6ff'<\/span>,\n          <span class=\"hljs-number\">100<\/span>: <span class=\"hljs-string\">'#dbeafe'<\/span>,\n          <span class=\"hljs-number\">500<\/span>: <span class=\"hljs-string\">'#3b82f6'<\/span>,\n          <span class=\"hljs-number\">600<\/span>: <span class=\"hljs-string\">'#2563eb'<\/span>,\n          <span class=\"hljs-number\">700<\/span>: <span class=\"hljs-string\">'#1d4ed8'<\/span>,\n        },\n      },\n    },\n  },\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css (v4) *\/<\/span>\n<span class=\"hljs-keyword\">@theme<\/span> {\n  <span class=\"hljs-selector-tag\">--color-brand-50<\/span>: <span class=\"hljs-selector-id\">#eff6ff<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-100<\/span>: <span class=\"hljs-selector-id\">#dbeafe<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-500<\/span>: <span class=\"hljs-selector-id\">#3b82f6<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-600<\/span>: <span class=\"hljs-selector-id\">#2563eb<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-700<\/span>: <span class=\"hljs-selector-id\">#1d4ed8<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u9019\u6a23\u4f60\u5c31\u53ef\u4ee5\u4f7f\u7528 <code>bg-brand-500<\/code>\u3001<code>text-brand-700<\/code> \u7b49 class\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8986\u84cb\u9810\u8a2d\u8abf\u8272\u76e4<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u4f60\u60f3\u5b8c\u5168\u63a7\u5236\u53ef\u7528\u7684\u984f\u8272\uff0c\u53ef\u4ee5\u8986\u84cb\u6574\u500b <code>colors<\/code>\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3) - \u8986\u84cb\u6a21\u5f0f<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-comment\">\/\/ \u6ce8\u610f\uff1a\u4e0d\u5728 extend \u88e1\u9762\uff01<\/span>\n    <span class=\"hljs-attr\">colors<\/span>: {\n      <span class=\"hljs-attr\">black<\/span>: <span class=\"hljs-string\">'#000'<\/span>,\n      <span class=\"hljs-attr\">white<\/span>: <span class=\"hljs-string\">'#fff'<\/span>,\n      <span class=\"hljs-attr\">primary<\/span>: <span class=\"hljs-string\">'#5046e5'<\/span>,\n      <span class=\"hljs-attr\">secondary<\/span>: <span class=\"hljs-string\">'#64748b'<\/span>,\n    },\n  },\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u8986\u84cb\u5f8c\uff0c\u9810\u8a2d\u7684 <code>red<\/code>\u3001<code>blue<\/code>\u3001<code>green<\/code> \u7b49\u984f\u8272\u90fd\u4e0d\u80fd\u7528\u4e86\uff0c\u53ea\u80fd\u4f7f\u7528\u4f60\u5b9a\u7fa9\u7684\u984f\u8272\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5224\u65b7\u65b9\u5f0f\uff1a<\/strong> \u770b\u8a2d\u5b9a\u662f\u5728 <code>theme.extend<\/code> \u9084\u662f\u76f4\u63a5\u5728 <code>theme<\/code> \u4e0b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>theme.extend.colors<\/code>\uff1a\u64f4\u5c55\uff0c\u4fdd\u7559\u9810\u8a2d<\/li>\n<li><code>theme.colors<\/code>\uff1a\u8986\u84cb\uff0c\u53d6\u4ee3\u9810\u8a2d<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u81ea\u8a02\u9593\u8ddd\u7cfb\u7d71<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9593\u8ddd\uff08spacing\uff09\u5f71\u97ff padding\u3001margin\u3001gap\u3001width\u3001height \u7b49\u591a\u500b\u5c6c\u6027\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b0\u589e\u7279\u5b9a\u9593\u8ddd\u503c<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">spacing<\/span>: {\n        <span class=\"hljs-string\">'18'<\/span>: <span class=\"hljs-string\">'4.5rem'<\/span>,    <span class=\"hljs-comment\">\/\/ 72px<\/span>\n        <span class=\"hljs-string\">'128'<\/span>: <span class=\"hljs-string\">'32rem'<\/span>,    <span class=\"hljs-comment\">\/\/ 512px<\/span>\n      },\n    },\n  },\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css (v4) *\/<\/span>\n<span class=\"hljs-keyword\">@theme<\/span> {\n  <span class=\"hljs-selector-tag\">--spacing-18<\/span>: 4<span class=\"hljs-selector-class\">.5rem<\/span>;\n  <span class=\"hljs-selector-tag\">--spacing-128<\/span>: 32<span class=\"hljs-selector-tag\">rem<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u73fe\u5728\u53ef\u4ee5\u4f7f\u7528 <code>p-18<\/code>\u3001<code>w-128<\/code>\u3001<code>mt-18<\/code> \u7b49 class\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u9593\u8ddd\u7684\u8a08\u7b97\u908f\u8f2f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind \u9810\u8a2d\u9593\u8ddd\u662f 4px \u70ba\u57fa\u6e96\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>spacing-1<\/code> = 0.25rem = 4px<\/li>\n<li><code>spacing-4<\/code> = 1rem = 16px<\/li>\n<li><code>spacing-8<\/code> = 2rem = 32px<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">\u7576\u4f60\u770b\u5230 <code>p-4<\/code>\uff0c\u77e5\u9053\u9019\u662f 16px\uff1b\u770b\u5230 <code>m-8<\/code>\uff0c\u77e5\u9053\u9019\u662f 32px\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u81ea\u8a02\u5b57\u578b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b0\u589e\u5b57\u578b\u5bb6\u65cf<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">fontFamily<\/span>: {\n        <span class=\"hljs-attr\">display<\/span>: &#91;<span class=\"hljs-string\">'Inter'<\/span>, <span class=\"hljs-string\">'sans-serif'<\/span>],\n        <span class=\"hljs-attr\">body<\/span>: &#91;<span class=\"hljs-string\">'Noto Sans TC'<\/span>, <span class=\"hljs-string\">'sans-serif'<\/span>],\n      },\n    },\n  },\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-9\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/* app.css (v4) *\/<\/span>\n@theme {\n  --font-display: <span class=\"hljs-string\">\"Inter\"<\/span>, sans-serif;\n  --font-body: <span class=\"hljs-string\">\"Noto Sans TC\"<\/span>, sans-serif;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-9\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528\u65b9\u5f0f\uff1a<code>font-display<\/code>\u3001<code>font-body<\/code>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u81ea\u8a02\u5b57\u578b\u5927\u5c0f<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-10\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">fontSize<\/span>: {\n        <span class=\"hljs-string\">'xxs'<\/span>: <span class=\"hljs-string\">'0.625rem'<\/span>,     <span class=\"hljs-comment\">\/\/ 10px<\/span>\n        <span class=\"hljs-string\">'display'<\/span>: <span class=\"hljs-string\">'4.5rem'<\/span>,   <span class=\"hljs-comment\">\/\/ 72px<\/span>\n      },\n    },\n  },\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-10\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">\u81ea\u8a02\u65b7\u9ede\uff08Breakpoints\uff09<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u9810\u8a2d\u65b7\u9ede\uff1a<code>sm: 640px<\/code>\u3001<code>md: 768px<\/code>\u3001<code>lg: 1024px<\/code>\u3001<code>xl: 1280px<\/code>\u3001<code>2xl: 1536px<\/code>\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b0\u589e\u6216\u4fee\u6539\u65b7\u9ede<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-11\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">screens<\/span>: {\n        <span class=\"hljs-string\">'xs'<\/span>: <span class=\"hljs-string\">'475px'<\/span>,      <span class=\"hljs-comment\">\/\/ \u65b0\u589e\u66f4\u5c0f\u7684\u65b7\u9ede<\/span>\n        <span class=\"hljs-string\">'3xl'<\/span>: <span class=\"hljs-string\">'1920px'<\/span>,    <span class=\"hljs-comment\">\/\/ \u65b0\u589e\u8d85\u5927\u87a2\u5e55<\/span>\n      },\n    },\n  },\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-11\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-12\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css (v4) *\/<\/span>\n<span class=\"hljs-keyword\">@theme<\/span> {\n  <span class=\"hljs-selector-tag\">--breakpoint-xs<\/span>: 475<span class=\"hljs-selector-tag\">px<\/span>;\n  <span class=\"hljs-selector-tag\">--breakpoint-3xl<\/span>: 1920<span class=\"hljs-selector-tag\">px<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-12\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">@apply \u6307\u4ee4\uff1a\u63d0\u53d6\u91cd\u8907\u6a23\u5f0f<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><code>@apply<\/code> \u8b93\u4f60\u5728 CSS \u4e2d\u4f7f\u7528 Tailwind \u7684 utility class\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-13\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/* components.css *\/<\/span>\n.btn {\n  @apply px<span class=\"hljs-number\">-4<\/span> py<span class=\"hljs-number\">-2<\/span> rounded-lg font-medium transition-colors;\n}\n\n.btn-primary {\n  @apply btn bg-blue<span class=\"hljs-number\">-600<\/span> text-white hover:bg-blue<span class=\"hljs-number\">-700<\/span>;\n}\n\n.btn-secondary {\n  @apply btn bg-gray<span class=\"hljs-number\">-200<\/span> text-gray<span class=\"hljs-number\">-800<\/span> hover:bg-gray<span class=\"hljs-number\">-300<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-13\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">\u4f55\u6642\u4f7f\u7528 @apply<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u9069\u5408\u4f7f\u7528\u7684\u60c5\u6cc1\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8de8\u591a\u500b\u5143\u4ef6\u7684\u91cd\u8907\u6a23\u5f0f<\/strong>\uff1a\u7576\u76f8\u540c\u7684 class \u7d44\u5408\u5728\u591a\u8655\u51fa\u73fe\u4e14\u7121\u6cd5\u7528\u5143\u4ef6\u62bd\u8c61<\/li>\n<li><strong>\u7b2c\u4e09\u65b9\u5143\u4ef6\u7684\u57fa\u790e\u6a23\u5f0f<\/strong>\uff1a\u7121\u6cd5\u63a7\u5236 HTML \u7d50\u69cb\u6642<\/li>\n<li><strong>\u5168\u57df\u8868\u55ae\u5143\u7d20\u6a23\u5f0f<\/strong>\uff1a\u5982 input\u3001button \u7684\u57fa\u790e\u6a23\u5f0f<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-14\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/* \u9069\u5408\uff1a\u5168\u57df\u7684 input \u6a23\u5f0f *\/<\/span>\n.form-input {\n  @apply w-full px<span class=\"hljs-number\">-3<\/span> py<span class=\"hljs-number\">-2<\/span> border border-gray<span class=\"hljs-number\">-300<\/span> rounded-md\n         <span class=\"hljs-attr\">focus<\/span>:outline-none focus:ring<span class=\"hljs-number\">-2<\/span> focus:ring-blue<span class=\"hljs-number\">-500<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-14\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">\u4f55\u6642\u907f\u514d @apply<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4e0d\u5efa\u8b70\u4f7f\u7528\u7684\u60c5\u6cc1\uff1a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u53ea\u662f\u70ba\u4e86\u8b93 HTML \u770b\u8d77\u4f86\u66f4\u4e7e\u6de8<\/strong>\uff1a\u9019\u6a23\u505a\u6703\u5931\u53bb Tailwind \u7684\u512a\u52e2<\/li>\n<li><strong>\u53ea\u5728\u55ae\u4e00\u5730\u65b9\u4f7f\u7528\u7684\u6a23\u5f0f<\/strong>\uff1a\u76f4\u63a5\u5beb\u5728 HTML \u66f4\u76f4\u89c0<\/li>\n<li><strong>\u53ef\u4ee5\u7528\u5143\u4ef6\u62bd\u8c61\u7684\u60c5\u6cc1<\/strong>\uff1aReact\/Vue \u5143\u4ef6\u6bd4 CSS class \u66f4\u597d\u7dad\u8b77<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-15\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/* \u4e0d\u63a8\u85a6\uff1a\u55ae\u4e00\u7528\u9014\u7684\u6a23\u5f0f *\/<\/span>\n.hero-title {\n  @apply text<span class=\"hljs-number\">-4<\/span>xl font-bold text-center mb<span class=\"hljs-number\">-8<\/span>;  <span class=\"hljs-comment\">\/* \u53ea\u7528\u5728\u4e00\u500b\u5730\u65b9 *\/<\/span>\n}\n\n<span class=\"hljs-comment\">\/* \u4e0d\u63a8\u85a6\uff1a\u904e\u5ea6\u62bd\u8c61 *\/<\/span>\n.card {\n  @apply bg-white rounded-lg shadow-md p<span class=\"hljs-number\">-6<\/span>;\n}\n.card-header {\n  @apply text-xl font-semibold mb<span class=\"hljs-number\">-4<\/span>;\n}\n.card-body {\n  @apply text-gray<span class=\"hljs-number\">-600<\/span>;\n}\n<span class=\"hljs-comment\">\/* \u9019\u4e9b\u61c9\u8a72\u7528 React\/Vue \u5143\u4ef6\u4f86\u8655\u7406 *\/<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-15\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">@apply \u7684\u6700\u4f73\u5be6\u8e10<\/h3>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-16\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/* \u597d\u7684\u505a\u6cd5\uff1a\u771f\u6b63\u9700\u8981\u91cd\u7528\u7684\u57fa\u790e\u6a23\u5f0f *\/<\/span>\n@layer components {\n  .btn {\n    @apply inline-flex items-center justify-center\n           px<span class=\"hljs-number\">-4<\/span> py<span class=\"hljs-number\">-2<\/span> rounded-lg font-medium\n           transition-colors duration<span class=\"hljs-number\">-200<\/span>\n           <span class=\"hljs-attr\">focus<\/span>:outline-none focus:ring<span class=\"hljs-number\">-2<\/span> focus:ring-offset<span class=\"hljs-number\">-2<\/span>;\n  }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-16\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 <code>@layer components<\/code> \u78ba\u4fdd\u6a23\u5f0f\u653e\u5728\u6b63\u78ba\u7684\u5c64\u7d1a\uff0c\u53ef\u4ee5\u88ab utility class \u8986\u84cb\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u5b98\u65b9\u63d2\u4ef6<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Tailwind \u63d0\u4f9b\u5e7e\u500b\u5b98\u65b9\u63d2\u4ef6\u4f86\u64f4\u5c55\u529f\u80fd\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">@tailwindcss\/typography<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u70ba\u6587\u7ae0\u5167\u5bb9\u63d0\u4f9b\u512a\u7f8e\u7684\u6392\u7248\u6a23\u5f0f\uff0c\u7279\u5225\u9069\u5408 Markdown \u8f49\u63db\u7684\u5167\u5bb9\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>v3 \u5b89\u88dd\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-17\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">plugins<\/span>: &#91;\n    <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'@tailwindcss\/typography'<\/span>),\n  ],\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-17\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><strong>v4 \u5b89\u88dd\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-18\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css *\/<\/span>\n<span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"tailwindcss\"<\/span>;\n<span class=\"hljs-keyword\">@plugin<\/span> <span class=\"hljs-string\">\"@tailwindcss\/typography\"<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-18\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4f7f\u7528\u65b9\u5f0f\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-19\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">article<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"prose lg:prose-xl dark:prose-invert\"<\/span>&gt;<\/span>\n  <span class=\"hljs-comment\">&lt;!-- Markdown \u5167\u5bb9\u6703\u81ea\u52d5\u5957\u7528\u6392\u7248\u6a23\u5f0f --&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\u6587\u7ae0\u6a19\u984c<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">h1<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">p<\/span>&gt;<\/span>\u9019\u662f\u6bb5\u843d\u5167\u5bb9...<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">p<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\u9805\u76ee\u4e00<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">li<\/span>&gt;<\/span>\u9805\u76ee\u4e8c<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">li<\/span>&gt;<\/span>\n  <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">ul<\/span>&gt;<\/span>\n<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">article<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-19\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><code>prose<\/code> class \u6703\u81ea\u52d5\u70ba\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6a19\u984c\u8a2d\u5b9a\u9069\u7576\u7684\u5b57\u7d1a\u548c\u9593\u8ddd<\/li>\n<li>\u6bb5\u843d\u8a2d\u5b9a\u8212\u9069\u7684\u884c\u9ad8<\/li>\n<li>\u6e05\u55ae\u3001\u5f15\u7528\u5340\u584a\u3001\u7a0b\u5f0f\u78bc\u5340\u584a\u90fd\u6709\u5408\u9069\u7684\u6a23\u5f0f<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">@tailwindcss\/forms<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u70ba\u8868\u55ae\u5143\u7d20\u63d0\u4f9b\u57fa\u790e\u6a23\u5f0f\u91cd\u7f6e\uff1a<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>v3 \u5b89\u88dd\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-20\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">plugins<\/span>: &#91;\n    <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'@tailwindcss\/forms'<\/span>),\n  ],\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-20\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\"><strong>v4 \u5b89\u88dd\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-21\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css *\/<\/span>\n<span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"tailwindcss\"<\/span>;\n<span class=\"hljs-keyword\">@plugin<\/span> <span class=\"hljs-string\">\"@tailwindcss\/forms\"<\/span>;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-21\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u5b89\u88dd\u5f8c\uff0c<code>&lt;input&gt;<\/code>\u3001<code>&lt;select&gt;<\/code>\u3001<code>&lt;textarea&gt;<\/code> \u6703\u6709\u4e00\u81f4\u7684\u57fa\u790e\u6a23\u5f0f\uff0c\u66f4\u5bb9\u6613\u7528 Tailwind class \u5ba2\u88fd\u5316\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u7b56\u7565\u9078\u9805\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-22\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* v4 - \u53ea\u5728\u6709 class \u6642\u5957\u7528 *\/<\/span>\n<span class=\"hljs-keyword\">@plugin<\/span> <span class=\"hljs-string\">\"@tailwindcss\/forms\"<\/span> {\n  <span class=\"hljs-selector-tag\">strategy<\/span>: \"<span class=\"hljs-selector-tag\">class<\/span>\";\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-22\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ul class=\"wp-block-list\">\n<li><code>strategy: \"base\"<\/code>\uff1a\u5168\u57df\u5957\u7528\uff08\u9810\u8a2d\uff09<\/li>\n<li><code>strategy: \"class\"<\/code>\uff1a\u9700\u8981\u52a0\u4e0a <code>form-input<\/code>\u3001<code>form-select<\/code> \u7b49 class \u624d\u5957\u7528<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u6548\u80fd\u512a\u5316<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u81ea\u52d5 Tree Shaking\uff08JIT \u6a21\u5f0f\uff09<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f9e Tailwind v3 \u958b\u59cb\uff0cJIT\uff08Just-in-Time\uff09\u6a21\u5f0f\u6210\u70ba\u9810\u8a2d\u3002\u5b83\u53ea\u6703\u7522\u751f\u4f60\u5be6\u969b\u4f7f\u7528\u5230\u7684 CSS class\uff0c\u4e0d\u9700\u8981\u624b\u52d5\u914d\u7f6e PurgeCSS\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u4f60\u9700\u8981\u505a\u7684\u662f\u78ba\u4fdd content \u914d\u7f6e\u6b63\u78ba\uff1a<\/strong><\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-23\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">content<\/span>: &#91;\n    <span class=\"hljs-string\">'.\/src\/**\/*.{js,ts,jsx,tsx}'<\/span>,\n    <span class=\"hljs-string\">'.\/pages\/**\/*.{js,ts,jsx,tsx}'<\/span>,\n    <span class=\"hljs-string\">'.\/components\/**\/*.{js,ts,jsx,tsx}'<\/span>,\n  ],\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-23\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">\u6ce8\u610f\u52d5\u614b class \u540d\u7a31<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">JIT \u900f\u904e\u6383\u63cf\u6a94\u6848\u4f86\u6c7a\u5b9a\u8981\u7522\u751f\u54ea\u4e9b class\uff0c\u6240\u4ee5\u52d5\u614b\u7d44\u5408\u7684 class \u540d\u7a31\u6703\u5931\u6548\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-24\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ \u932f\u8aa4\uff1aJIT \u6383\u63cf\u4e0d\u5230\u5b8c\u6574\u7684 class \u540d\u7a31<\/span>\n<span class=\"hljs-keyword\">const<\/span> color = <span class=\"hljs-string\">'red'<\/span>;\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">bg-<\/span>${<span class=\"hljs-attr\">color<\/span>}<span class=\"hljs-attr\">-500<\/span>`} \/&gt;<\/span><\/span>\n\n<span class=\"hljs-comment\">\/\/ \u6b63\u78ba\uff1a\u4f7f\u7528\u5b8c\u6574\u7684 class \u540d\u7a31<\/span>\n<span class=\"hljs-keyword\">const<\/span> colorClass = {\n  <span class=\"hljs-attr\">red<\/span>: <span class=\"hljs-string\">'bg-red-500'<\/span>,\n  <span class=\"hljs-attr\">blue<\/span>: <span class=\"hljs-string\">'bg-blue-500'<\/span>,\n};\n<span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{colorClass&#91;color]}<\/span> \/&gt;<\/span><\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-24\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">\u6700\u4f73\u5be6\u8e10\u7e3d\u7d50<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Class \u6392\u5e8f<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528 <code>prettier-plugin-tailwindcss<\/code> \u81ea\u52d5\u6392\u5e8f class\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\"><span><code class=\"hljs\">npm install -D prettier prettier-plugin-tailwindcss\n<\/code><\/span><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u6392\u5e8f\u5f8c\u7684 class \u66f4\u5bb9\u6613\u95b1\u8b80\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-25\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-comment\">&lt;!-- \u6392\u5e8f\u524d\uff1a\u96dc\u4e82 --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"p-4 flex bg-white items-center rounded-lg shadow-md justify-between\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- \u6392\u5e8f\u5f8c\uff1a\u6709\u908f\u8f2f\u9806\u5e8f --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"flex items-center justify-between rounded-lg bg-white p-4 shadow-md\"<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-25\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">2. \u5143\u4ef6\u5316\u601d\u7dad<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u512a\u5148\u4f7f\u7528\u6846\u67b6\u5143\u4ef6\u4f86\u8655\u7406\u91cd\u8907\u7684 UI\uff0c\u800c\u975e <code>@apply<\/code>\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-26\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ React \u5143\u4ef6 - \u63a8\u85a6<\/span>\n<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title\">Button<\/span>(<span class=\"hljs-params\">{ variant = <span class=\"hljs-string\">'primary'<\/span>, children, ...props }<\/span>) <\/span>{\n  <span class=\"hljs-keyword\">const<\/span> variants = {\n    <span class=\"hljs-attr\">primary<\/span>: <span class=\"hljs-string\">'bg-blue-600 text-white hover:bg-blue-700'<\/span>,\n    <span class=\"hljs-attr\">secondary<\/span>: <span class=\"hljs-string\">'bg-gray-200 text-gray-800 hover:bg-gray-300'<\/span>,\n  };\n\n  <span class=\"hljs-keyword\">return<\/span> (\n    <span class=\"xml\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">button<\/span>\n      <span class=\"hljs-attr\">className<\/span>=<span class=\"hljs-string\">{<\/span>`<span class=\"hljs-attr\">px-4<\/span> <span class=\"hljs-attr\">py-2<\/span> <span class=\"hljs-attr\">rounded-lg<\/span> <span class=\"hljs-attr\">font-medium<\/span> ${<span class=\"hljs-attr\">variants<\/span>&#91;<span class=\"hljs-attr\">variant<\/span>]}`}\n      {<span class=\"hljs-attr\">...props<\/span>}\n    &gt;<\/span>\n      {children}\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">button<\/span>&gt;<\/span><\/span>\n  );\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-26\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h3 class=\"wp-block-heading\">3. \u907f\u514d\u904e\u5ea6\u62bd\u8c61<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u4e0d\u8981\u70ba\u4e86\u300c\u770b\u8d77\u4f86\u4e7e\u6de8\u300d\u800c\u62bd\u8c61\u51fa\u4e00\u5806\u81ea\u8a02 class\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-27\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/* \u904e\u5ea6\u62bd\u8c61 - \u4e0d\u63a8\u85a6 *\/<\/span>\n.container-main { @apply max-w<span class=\"hljs-number\">-7<\/span>xl mx-auto px<span class=\"hljs-number\">-4<\/span>; }\n.title-lg { @apply text<span class=\"hljs-number\">-2<\/span>xl font-bold; }\n.mt-section { @apply mt<span class=\"hljs-number\">-8<\/span>; }\n.text-muted { @apply text-gray<span class=\"hljs-number\">-500<\/span>; }\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-27\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<p class=\"wp-block-paragraph\">\u9019\u6a23\u505a\u6703\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u589e\u52a0\u5b78\u7fd2\u6210\u672c\uff08\u5718\u968a\u6210\u54e1\u8981\u5b78\u7fd2\u4f60\u7684\u81ea\u8a02 class\uff09<\/li>\n<li>\u5931\u53bb Tailwind \u7684\u53ef\u9810\u6e2c\u6027<\/li>\n<li>\u589e\u52a0\u7dad\u8b77\u8ca0\u64d4<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. \u5408\u7406\u4f7f\u7528 arbitrary values<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u7576\u5167\u5efa\u503c\u4e0d\u5920\u7528\u6642\uff0c\u4f7f\u7528\u65b9\u62ec\u865f\u8a9e\u6cd5\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-28\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml\"><span class=\"hljs-comment\">&lt;!-- \u5076\u723e\u4f7f\u7528 - OK --&gt;<\/span>\n<span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"w-&#91;327px] h-&#91;180px]\"<\/span>&gt;<\/span>\n\n<span class=\"hljs-comment\">&lt;!-- \u983b\u7e41\u4f7f\u7528\u540c\u6a23\u7684\u503c - \u61c9\u8a72\u52a0\u5230\u914d\u7f6e\u4e2d --&gt;<\/span>\n<span class=\"hljs-comment\">&lt;!-- \u6539\u70ba\u5728 config \u4e2d\u5b9a\u7fa9 spacing \u6216 size --&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-28\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">\u5be6\u4f5c\u7df4\u7fd2\uff1a\u5efa\u7acb\u5c08\u6848\u8a2d\u8a08\u7cfb\u7d71<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4ee5\u4e0b\u662f\u4e00\u500b\u5b8c\u6574\u7684\u5ba2\u88fd\u5316\u914d\u7f6e\u7bc4\u4f8b\uff1a<\/p>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-29\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript\"><span class=\"hljs-comment\">\/\/ tailwind.config.js (v3)<\/span>\n<span class=\"hljs-built_in\">module<\/span>.exports = {\n  <span class=\"hljs-attr\">content<\/span>: &#91;<span class=\"hljs-string\">'.\/src\/**\/*.{js,ts,jsx,tsx}'<\/span>],\n  <span class=\"hljs-attr\">theme<\/span>: {\n    <span class=\"hljs-attr\">extend<\/span>: {\n      <span class=\"hljs-attr\">colors<\/span>: {\n        <span class=\"hljs-attr\">brand<\/span>: {\n          <span class=\"hljs-number\">50<\/span>: <span class=\"hljs-string\">'#f0f9ff'<\/span>,\n          <span class=\"hljs-number\">100<\/span>: <span class=\"hljs-string\">'#e0f2fe'<\/span>,\n          <span class=\"hljs-number\">200<\/span>: <span class=\"hljs-string\">'#bae6fd'<\/span>,\n          <span class=\"hljs-number\">300<\/span>: <span class=\"hljs-string\">'#7dd3fc'<\/span>,\n          <span class=\"hljs-number\">400<\/span>: <span class=\"hljs-string\">'#38bdf8'<\/span>,\n          <span class=\"hljs-number\">500<\/span>: <span class=\"hljs-string\">'#0ea5e9'<\/span>,\n          <span class=\"hljs-number\">600<\/span>: <span class=\"hljs-string\">'#0284c7'<\/span>,\n          <span class=\"hljs-number\">700<\/span>: <span class=\"hljs-string\">'#0369a1'<\/span>,\n          <span class=\"hljs-number\">800<\/span>: <span class=\"hljs-string\">'#075985'<\/span>,\n          <span class=\"hljs-number\">900<\/span>: <span class=\"hljs-string\">'#0c4a6e'<\/span>,\n        },\n      },\n      <span class=\"hljs-attr\">fontFamily<\/span>: {\n        <span class=\"hljs-attr\">sans<\/span>: &#91;<span class=\"hljs-string\">'Inter'<\/span>, <span class=\"hljs-string\">'Noto Sans TC'<\/span>, <span class=\"hljs-string\">'sans-serif'<\/span>],\n      },\n      <span class=\"hljs-attr\">spacing<\/span>: {\n        <span class=\"hljs-string\">'18'<\/span>: <span class=\"hljs-string\">'4.5rem'<\/span>,\n        <span class=\"hljs-string\">'88'<\/span>: <span class=\"hljs-string\">'22rem'<\/span>,\n      },\n      <span class=\"hljs-attr\">borderRadius<\/span>: {\n        <span class=\"hljs-string\">'4xl'<\/span>: <span class=\"hljs-string\">'2rem'<\/span>,\n      },\n    },\n  },\n  <span class=\"hljs-attr\">plugins<\/span>: &#91;\n    <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'@tailwindcss\/typography'<\/span>),\n    <span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'@tailwindcss\/forms'<\/span>),\n  ],\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-29\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-30\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* app.css (v4 \u7b49\u6548\u914d\u7f6e) *\/<\/span>\n<span class=\"hljs-keyword\">@import<\/span> <span class=\"hljs-string\">\"tailwindcss\"<\/span>;\n<span class=\"hljs-keyword\">@plugin<\/span> <span class=\"hljs-string\">\"@tailwindcss\/typography\"<\/span>;\n<span class=\"hljs-keyword\">@plugin<\/span> <span class=\"hljs-string\">\"@tailwindcss\/forms\"<\/span>;\n\n<span class=\"hljs-keyword\">@theme<\/span> {\n  <span class=\"hljs-selector-tag\">--color-brand-50<\/span>: <span class=\"hljs-selector-id\">#f0f9ff<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-100<\/span>: <span class=\"hljs-selector-id\">#e0f2fe<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-200<\/span>: <span class=\"hljs-selector-id\">#bae6fd<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-300<\/span>: <span class=\"hljs-selector-id\">#7dd3fc<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-400<\/span>: <span class=\"hljs-selector-id\">#38bdf8<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-500<\/span>: <span class=\"hljs-selector-id\">#0ea5e9<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-600<\/span>: <span class=\"hljs-selector-id\">#0284c7<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-700<\/span>: <span class=\"hljs-selector-id\">#0369a1<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-800<\/span>: <span class=\"hljs-selector-id\">#075985<\/span>;\n  <span class=\"hljs-selector-tag\">--color-brand-900<\/span>: <span class=\"hljs-selector-id\">#0c4a6e<\/span>;\n\n  <span class=\"hljs-selector-tag\">--font-sans<\/span>: \"<span class=\"hljs-selector-tag\">Inter<\/span>\", \"<span class=\"hljs-selector-tag\">Noto<\/span> <span class=\"hljs-selector-tag\">Sans<\/span> <span class=\"hljs-selector-tag\">TC<\/span>\", <span class=\"hljs-selector-tag\">sans-serif<\/span>;\n\n  <span class=\"hljs-selector-tag\">--spacing-18<\/span>: 4<span class=\"hljs-selector-class\">.5rem<\/span>;\n  <span class=\"hljs-selector-tag\">--spacing-88<\/span>: 22<span class=\"hljs-selector-tag\">rem<\/span>;\n\n  <span class=\"hljs-selector-tag\">--radius-4xl<\/span>: 2<span class=\"hljs-selector-tag\">rem<\/span>;\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-30\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<h2 class=\"wp-block-heading\">\u8b80\u7a0b\u5f0f\u78bc\u6642\u7684\u91cd\u9ede<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u7576\u4f60\u5728\u95b1\u8b80 Tailwind \u5c08\u6848\u6642\uff0c\u6ce8\u610f\u4ee5\u4e0b\u6a21\u5f0f\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u770b\u914d\u7f6e\u6a94\u6848\u4f4d\u7f6e<\/strong>\uff1a\n<ul>\n<li><code>tailwind.config.js<\/code> = v3 \u914d\u7f6e<\/li>\n<li>CSS \u4e2d\u7684 <code>@theme<\/code> = v4 \u914d\u7f6e<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u5224\u65b7\u64f4\u5c55\u9084\u662f\u8986\u84cb<\/strong>\uff1a\n<ul>\n<li><code>theme.extend.xxx<\/code>\uff1a\u65b0\u589e\uff0c\u4fdd\u7559\u9810\u8a2d<\/li>\n<li><code>theme.xxx<\/code>\uff1a\u8986\u84cb\uff0c\u53d6\u4ee3\u9810\u8a2d<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u770b @apply \u4f7f\u7528\u60c5\u6cc1<\/strong>\uff1a\n<ul>\n<li>\u5c11\u91cf\u3001\u6709\u610f\u7fa9\u7684\u62bd\u8c61 = \u597d\u7684\u5be6\u8e10<\/li>\n<li>\u5927\u91cf\u3001\u7463\u788e\u7684\u62bd\u8c61 = \u904e\u5ea6\u4f7f\u7528<\/li>\n<\/ul>\n<\/li>\n<li><strong>\u770b content \u914d\u7f6e<\/strong>\uff1a\n<ul>\n<li>\u78ba\u8a8d\u6240\u6709\u4f7f\u7528 Tailwind \u7684\u6a94\u6848\u90fd\u88ab\u6db5\u84cb<\/li>\n<li>\u6f0f\u6389\u6703\u5c0e\u81f4\u6a23\u5f0f\u4e0d\u751f\u6548<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u7e3d\u7d50<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u672c\u7bc7\u4ecb\u7d39\u4e86 Tailwind CSS \u7684\u5ba2\u88fd\u5316\u914d\u7f6e\u8207\u6700\u4f73\u5be6\u8e10\uff1a<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table>\n<thead>\n<tr>\n<th>\u4e3b\u984c<\/th>\n<th>\u91cd\u9ede<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\u914d\u7f6e\u65b9\u5f0f<\/td>\n<td>v3 \u7528 JS \u914d\u7f6e\u3001v4 \u7528 CSS-first<\/td>\n<\/tr>\n<tr>\n<td>\u64f4\u5c55 vs \u8986\u84cb<\/td>\n<td><code>extend<\/code> \u4fdd\u7559\u9810\u8a2d\u3001\u76f4\u63a5\u8a2d\u5b9a\u5247\u8986\u84cb<\/td>\n<\/tr>\n<tr>\n<td>@apply<\/td>\n<td>\u7528\u65bc\u771f\u6b63\u9700\u8981\u91cd\u7528\u7684\u6a23\u5f0f\uff0c\u907f\u514d\u904e\u5ea6\u4f7f\u7528<\/td>\n<\/tr>\n<tr>\n<td>\u5b98\u65b9\u63d2\u4ef6<\/td>\n<td>typography \u7528\u65bc\u6587\u7ae0\u3001forms \u7528\u65bc\u8868\u55ae<\/td>\n<\/tr>\n<tr>\n<td>\u6700\u4f73\u5be6\u8e10<\/td>\n<td>class \u6392\u5e8f\u3001\u5143\u4ef6\u5316\u3001\u907f\u514d\u904e\u5ea6\u62bd\u8c61<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u9019\u662f Tailwind CSS \u6559\u5b78\u7cfb\u5217\u7684\u6700\u5f8c\u4e00\u7bc7\u3002\u900f\u904e\u9019\u56db\u7bc7\u6587\u7ae0\uff0c\u4f60\u5df2\u7d93\u638c\u63e1\u4e86\u95b1\u8b80 Tailwind \u5c08\u6848\u6240\u9700\u7684\u6838\u5fc3\u77e5\u8b58\uff1a\u57fa\u790e\u8a9e\u6cd5\u3001\u97ff\u61c9\u5f0f\u8a2d\u8a08\u3001Flexbox\/Grid \u5e03\u5c40\uff0c\u4ee5\u53ca\u5ba2\u88fd\u5316\u914d\u7f6e\u3002\u7576\u4f60\u5728\u5be6\u969b\u5c08\u6848\u4e2d\u9047\u5230 Tailwind \u7a0b\u5f0f\u78bc\u6642\uff0c\u9019\u4e9b\u77e5\u8b58\u5c07\u5e6b\u52a9\u4f60\u5feb\u901f\u7406\u89e3\u5c08\u6848\u7684\u8a2d\u8a08\u7cfb\u7d71\u548c\u6a23\u5f0f\u67b6\u69cb\u3002<\/p>\n\n\n\n<div id=\"quiz-advanced\">\n<style>\n#quiz-advanced .quiz-container {\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n            max-width: 800px;\n            margin: 0 auto;\n            padding: 20px;\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            border-radius: 16px;\n            box-shadow: 0 10px 40px rgba(240, 147, 251, 0.3);\n        }#quiz-advanced .quiz-header {\n            text-align: center;\n            color: white;\n            margin-bottom: 24px;\n        }#quiz-advanced .quiz-header h2 {\n            margin: 0 0 8px 0;\n            font-size: 24px;\n            font-weight: 700;\n        }#quiz-advanced .quiz-header p {\n            margin: 0;\n            opacity: 0.9;\n            font-size: 14px;\n        }#quiz-advanced .question-card {\n            background: white;\n            border-radius: 12px;\n            padding: 24px;\n            margin-bottom: 16px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\n            transition: transform 0.2s ease;\n        }#quiz-advanced .question-card:hover {\n            transform: translateY(-2px);\n        }#quiz-advanced .question-number {\n            display: inline-block;\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            color: white;\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            text-align: center;\n            line-height: 28px;\n            font-size: 14px;\n            font-weight: 600;\n            margin-right: 12px;\n        }#quiz-advanced .question-text {\n            display: inline;\n            font-size: 16px;\n            font-weight: 600;\n            color: #1a202c;\n            line-height: 1.6;\n        }#quiz-advanced .question-context {\n            background: #f8f9fa;\n            border-left: 4px solid #f093fb;\n            padding: 12px 16px;\n            margin: 16px 0;\n            font-size: 14px;\n            color: #4a5568;\n            border-radius: 0 8px 8px 0;\n        }#quiz-advanced .question-context \n        .options {\n            margin-top: 16px;\n        }#quiz-advanced .option {\n            display: block;\n            padding: 12px 16px;\n            margin: 8px 0;\n            background: #f7fafc;\n            border: 2px solid #e2e8f0;\n            border-radius: 8px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 14px;\n            color: #4a5568;\n        }#quiz-advanced .option:hover {\n            background: #edf2f7;\n            border-color: #cbd5e0;\n        }#quiz-advanced .option.selected {\n            background: #fef3f8;\n            border-color: #f093fb;\n            color: #d53f8c;\n        }#quiz-advanced .option.correct {\n            background: #f0fff4;\n            border-color: #48bb78;\n            color: #276749;\n        }#quiz-advanced .option.incorrect {\n            background: #fff5f5;\n            border-color: #fc8181;\n            color: #c53030;\n        }#quiz-advanced .option.show-correct {\n            background: #f0fff4;\n            border-color: #48bb78;\n            color: #276749;\n        }#quiz-advanced .feedback {\n            margin-top: 12px;\n            padding: 12px 16px;\n            border-radius: 8px;\n            font-size: 14px;\n            display: none;\n            line-height: 1.6;\n        }#quiz-advanced .feedback.correct {\n            background: #f0fff4;\n            color: #276749;\n            border-left: 4px solid #48bb78;\n            display: block;\n        }#quiz-advanced .feedback.incorrect {\n            background: #fff5f5;\n            color: #c53030;\n            border-left: 4px solid #fc8181;\n            display: block;\n        }#quiz-advanced .submit-btn {\n            display: block;\n            width: 100%;\n            padding: 16px;\n            background: white;\n            color: #f5576c;\n            border: none;\n            border-radius: 12px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            margin-top: 8px;\n        }#quiz-advanced .submit-btn:hover {\n            background: #f7fafc;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n        }#quiz-advanced .submit-btn:disabled {\n            background: #e2e8f0;\n            color: #a0aec0;\n            cursor: not-allowed;\n            transform: none;\n            box-shadow: none;\n        }#quiz-advanced .results {\n            background: white;\n            border-radius: 12px;\n            padding: 24px;\n            text-align: center;\n            display: none;\n        }#quiz-advanced .results.show {\n            display: block;\n        }#quiz-advanced .score {\n            font-size: 48px;\n            font-weight: 700;\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }#quiz-advanced .score-text {\n            font-size: 18px;\n            color: #4a5568;\n            margin-top: 8px;\n        }#quiz-advanced .retry-btn {\n            margin-top: 20px;\n            padding: 12px 32px;\n            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n            color: white;\n            border: none;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n        }#quiz-advanced .retry-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);\n        }pre {\n            background: #1a202c;\n            color: #e2e8f0;\n            padding: 16px;\n            border-radius: 8px;\n            overflow-x: auto;\n            font-size: 13px;\n            line-height: 1.5;\n        }\n        pre\n<\/style>\n<div class=\"quiz-container\" id=\"quiz-advanced\">\n        <div class=\"quiz-header\">\n            <h2>Tailwind CSS \u5ba2\u88fd\u5316\u914d\u7f6e\u8207\u6700\u4f73\u5be6\u8e10 &#8211; \u9032\u968e\u6e2c\u9a57<\/h2>\n            <p>\u60c5\u5883\u984c\u8207\u932f\u8aa4\u8a3a\u65b7\uff0c\u6e2c\u8a66\u4f60\u7684\u5be6\u6230\u80fd\u529b<\/p>\n        <\/div>\n\n        <form id=\"quizForm\">\n            <div class=\"question-card\" data-question=\"1\">\n                <span class=\"question-number\">1<\/span>\n                <span class=\"question-text\">\u3010\u60c5\u5883\u984c\u3011\u4f60\u63a5\u624b\u4e00\u500b\u5c08\u6848\uff0c\u767c\u73fe\u4f7f\u7528 <code>bg-blue-500<\/code> \u6c92\u6709\u6548\u679c\uff0c\u4f46 <code>bg-primary<\/code> \u53ef\u4ee5\u6b63\u5e38\u986f\u793a\u3002\u67e5\u770b\u914d\u7f6e\u6a94\u6848\u5f8c\uff0c\u4f60\u63a8\u6e2c\u6700\u53ef\u80fd\u7684\u539f\u56e0\u662f\u4ec0\u9ebc\uff1f<\/span>\n                <div class=\"question-context\">\n<pre><code>\/\/ tailwind.config.js\nmodule.exports = {\n  theme: {\n    colors: {\n      primary: '#5046e5',\n      secondary: '#64748b',\n      white: '#fff',\n      black: '#000',\n    },\n  },\n}<\/code><\/pre><\/div>\n                <\/div>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"a\">\n                        A. Tailwind \u7248\u672c\u592a\u820a\uff0c\u4e0d\u652f\u63f4 blue \u984f\u8272\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"b\">\n                        B. colors \u8a2d\u5b9a\u5728 theme \u4e0b\u800c\u975e theme.extend\uff0c\u8986\u84cb\u4e86\u6240\u6709\u9810\u8a2d\u984f\u8272\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"c\">\n                        C. \u9700\u8981\u5b89\u88dd\u984d\u5916\u7684\u984f\u8272\u63d2\u4ef6\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q1\" value=\"d\">\n                        D. blue \u662f\u4fdd\u7559\u95dc\u9375\u5b57\uff0c\u4e0d\u80fd\u4f7f\u7528\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"2\">\n                <span class=\"question-number\">2<\/span>\n                <span class=\"question-text\">\u3010\u932f\u8aa4\u8a3a\u65b7\u3011\u4ee5\u4e0b CSS \u6a94\u6848\u70ba\u4ec0\u9ebc\u6703\u5c0e\u81f4 <code>.btn<\/code> \u7684\u6a23\u5f0f\u88ab utility class \u96e3\u4ee5\u8986\u84cb\uff1f<\/span>\n                <div class=\"question-context\">\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre><code>\/* styles.css *\/\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n.btn {\n  @apply px-4 py-2 bg-blue-600 text-white rounded-lg;\n}<\/code><\/pre><\/div>\n                <\/div>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"a\">\n                        A. @apply \u8a9e\u6cd5\u932f\u8aa4\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"b\">\n                        B. .btn \u5b9a\u7fa9\u5728 @tailwind utilities \u4e4b\u5f8c\uff0cCSS \u6b0a\u91cd\u8f03\u9ad8\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"c\">\n                        C. \u61c9\u8a72\u4f7f\u7528 @layer components \u5305\u88f9\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q2\" value=\"d\">\n                        D. @tailwind base \u61c9\u8a72\u653e\u5728\u6700\u5f8c\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"3\">\n                <span class=\"question-number\">3<\/span>\n                <span class=\"question-text\">\u3010\u60c5\u5883\u984c\u3011\u5718\u968a\u6210\u54e1\u5728\u5c08\u6848\u4e2d\u5927\u91cf\u4f7f\u7528 @apply \u5efa\u7acb\u4e86\u4ee5\u4e0b CSS class\u3002\u9019\u7a2e\u505a\u6cd5\u6709\u4ec0\u9ebc\u554f\u984c\uff1f<\/span>\n                <div class=\"question-context\">\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre><code>.page-container { @apply max-w-7xl mx-auto px-4; }\n.section-title { @apply text-2xl font-bold mb-4; }\n.section-subtitle { @apply text-lg text-gray-600 mb-2; }\n.mt-sm { @apply mt-2; }\n.mt-md { @apply mt-4; }\n.mt-lg { @apply mt-8; }\n.text-muted { @apply text-gray-500; }\n.text-primary { @apply text-blue-600; }<\/code><\/pre><\/div>\n                <\/div>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"a\">\n                        A. \u6c92\u6709\u554f\u984c\uff0c\u9019\u662f\u826f\u597d\u7684 DRY \u539f\u5247\u5be6\u8e10\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"b\">\n                        B. \u904e\u5ea6\u62bd\u8c61\uff0c\u7b49\u65bc\u7528 CSS \u91cd\u65b0\u5305\u88dd Tailwind\uff0c\u5931\u53bb\u5176\u512a\u52e2\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"c\">\n                        C. \u61c9\u8a72\u628a\u9019\u4e9b class \u653e\u5728 tailwind.config.js \u4e2d\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q3\" value=\"d\">\n                        D. @apply \u4e0d\u652f\u63f4\u9019\u9ebc\u591a utility class\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"4\">\n                <span class=\"question-number\">4<\/span>\n                <span class=\"question-text\">\u3010\u932f\u8aa4\u8a3a\u65b7\u3011\u4ee5\u4e0b v4 \u914d\u7f6e\u4e2d\uff0c\u81ea\u8a02\u7684 brand \u984f\u8272\u70ba\u4ec0\u9ebc\u7121\u6cd5\u6b63\u5e38\u4f7f\u7528 <code>bg-brand-500<\/code>\uff1f<\/span>\n                <div class=\"question-context\">\n<div class=\"cbc-code-wrapper\"><div class=\"cbc-code-bar\"><button class=\"cbc-copy-button\">Copy<\/button><\/div><pre><code>\/* app.css *\/\n@import \"tailwindcss\";\n\n@theme {\n  --brand-50: #f0f9ff;\n  --brand-500: #0ea5e9;\n  --brand-900: #0c4a6e;\n}<\/code><\/pre><\/div>\n                <\/div>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"a\">\n                        A. v4 \u4e0d\u652f\u63f4\u81ea\u8a02\u984f\u8272\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"b\">\n                        B. CSS \u8b8a\u6578\u540d\u7a31\u61c9\u8a72\u662f <code>--color-brand-500<\/code> \u800c\u975e <code>--brand-500<\/code>\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"c\">\n                        C. \u9700\u8981\u540c\u6642\u8a2d\u5b9a 50 \u5230 900 \u7684\u6240\u6709\u8272\u968e\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q4\" value=\"d\">\n                        D. @theme \u61c9\u8a72\u653e\u5728 @import \u4e4b\u524d\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <div class=\"question-card\" data-question=\"5\">\n                <span class=\"question-number\">5<\/span>\n                <span class=\"question-text\">\u3010\u60c5\u5883\u984c\u3011\u4f60\u9700\u8981\u5728\u591a\u500b React \u5143\u4ef6\u4e2d\u4f7f\u7528\u76f8\u540c\u6a23\u5f0f\u7684\u6309\u9215\u3002\u4ee5\u4e0b\u54ea\u7a2e\u505a\u6cd5\u6700\u7b26\u5408 Tailwind \u6700\u4f73\u5be6\u8e10\uff1f<\/span>\n                <div class=\"options\">\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"a\">\n                        A. \u7528 @apply \u5efa\u7acb .btn-primary class\uff0c\u5728\u5404\u8655\u4f7f\u7528\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"b\">\n                        B. \u5efa\u7acb Button React \u5143\u4ef6\uff0c\u628a Tailwind class \u5c01\u88dd\u5728\u5143\u4ef6\u5167\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"c\">\n                        C. \u8907\u88fd\u8cbc\u4e0a\u76f8\u540c\u7684 Tailwind class \u5230\u6bcf\u500b\u4f7f\u7528\u8655\n                    <\/label>\n                    <label class=\"option\">\n                        <input type=\"radio\" name=\"q5\" value=\"d\">\n                        D. \u5728 tailwind.config.js \u4e2d\u5b9a\u7fa9 button \u63d2\u4ef6\n                    <\/label>\n                <\/div>\n                <div class=\"feedback\"><\/div>\n            <\/div>\n\n            <button type=\"submit\" class=\"submit-btn\" id=\"submitBtn\">\u63d0\u4ea4\u7b54\u6848<\/button>\n        <\/form>\n\n        <div class=\"results\" id=\"results\">\n            <div class=\"score\" id=\"score\">0\/5<\/div>\n            <div class=\"score-text\" id=\"scoreText\">\u7e7c\u7e8c\u52a0\u6cb9\uff01<\/div>\n            <button class=\"retry-btn\" onclick=\"resetQuiz()\">\u518d\u8a66\u4e00\u6b21<\/button>\n        <\/div>\n    <\/div>\n<script>\n\n        const answers = {\n            q1: { correct: 'b', explanation: '\u6b63\u78ba\uff01colors \u76f4\u63a5\u8a2d\u5b9a\u5728 theme \u4e0b\u800c\u975e theme.extend\uff0c\u6703\u8986\u84cb\u6389\u6240\u6709 Tailwind \u9810\u8a2d\u984f\u8272\u3002\u56e0\u6b64\u53ea\u6709\u660e\u78ba\u5b9a\u7fa9\u7684 primary\u3001secondary\u3001white\u3001black \u53ef\u7528\uff0c\u5176\u4ed6\u5982 blue\u3001red\u3001green \u7b49\u90fd\u7121\u6cd5\u4f7f\u7528\u3002\u89e3\u6c7a\u65b9\u6cd5\u662f\u6539\u7528 theme.extend.colors\u3002' },\n            q2: { correct: 'c', explanation: '\u6b63\u78ba\uff01.btn \u5b9a\u7fa9\u5728 @tailwind utilities \u4e4b\u5f8c\uff0c\u6240\u4ee5\u5728 CSS \u5c64\u758a\u9806\u5e8f\u4e2d\u5b83\u7684\u512a\u5148\u7d1a\u6bd4 utilities \u9ad8\u3002\u6b63\u78ba\u505a\u6cd5\u662f\u7528 @layer components { .btn { ... } } \u5305\u88f9\uff0c\u78ba\u4fdd\u6a23\u5f0f\u653e\u5728 components \u5c64\u7d1a\uff0c\u9019\u6a23 utility class \u5c31\u80fd\u6b63\u5e38\u8986\u84cb\u3002' },\n            q3: { correct: 'b', explanation: '\u6b63\u78ba\uff01\u9019\u662f\u5178\u578b\u7684\u904e\u5ea6\u62bd\u8c61\u554f\u984c\u3002\u50cf .mt-sm\u3001.mt-md\u3001.text-muted \u9019\u6a23\u7684 class \u53ea\u662f\u5c0d Tailwind \u539f\u6709 class \u7684\u7c21\u55ae\u5305\u88dd\uff0c\u6c92\u6709\u589e\u52a0\u50f9\u503c\u53cd\u800c\u589e\u52a0\u4e86\u5b78\u7fd2\u6210\u672c\u3002\u5718\u968a\u6210\u54e1\u9700\u8981\u984d\u5916\u8a18\u4f4f\u9019\u4e9b\u81ea\u8a02 class\uff0c\u4e5f\u5931\u53bb\u4e86 Tailwind \u7684\u53ef\u9810\u6e2c\u6027\u3002' },\n            q4: { correct: 'b', explanation: '\u6b63\u78ba\uff01\u5728 Tailwind v4 \u7684 @theme \u4e2d\uff0cCSS \u8b8a\u6578\u9700\u8981\u9075\u5faa\u7279\u5b9a\u7684\u547d\u540d\u7a7a\u9593\u3002\u984f\u8272\u5fc5\u9808\u4ee5 --color- \u958b\u982d\uff0c\u4f8b\u5982 --color-brand-500\uff0c\u9019\u6a23\u624d\u80fd\u751f\u6210\u5c0d\u61c9\u7684 bg-brand-500\u3001text-brand-500 \u7b49 class\u3002' },\n            q5: { correct: 'b', explanation: '\u6b63\u78ba\uff01\u5efa\u7acb React \u5143\u4ef6\u662f Tailwind \u5b98\u65b9\u63a8\u85a6\u7684\u6700\u4f73\u5be6\u8e10\u3002\u5143\u4ef6\u5316\u53ef\u4ee5\uff1a1) \u900f\u904e props \u652f\u63f4\u4e0d\u540c\u8b8a\u9ad4 2) \u4fdd\u6301\u578b\u5225\u5b89\u5168 3) \u66f4\u5bb9\u6613\u7dad\u8b77\u548c\u6e2c\u8a66\u3002@apply \u61c9\u8a72\u4fdd\u7559\u7d66\u7121\u6cd5\u7528\u5143\u4ef6\u62bd\u8c61\u7684\u60c5\u6cc1\uff0c\u4f8b\u5982\u5168\u57df\u8868\u55ae\u6a23\u5f0f\u3002' }\n        };\n\n        document.getElementById('quizForm').addEventListener('submit', function(e) {\n            e.preventDefault();\n\n            let score = 0;\n            const totalQuestions = 5;\n\n            for (let i = 1; i <= totalQuestions; i++) {\n                const questionCard = document.querySelector(`[data-question=\"${i}\"]`);\n                const selected = document.querySelector(`input[name=\"q${i}\"]:checked`);\n                const feedback = questionCard.querySelector('.feedback');\n                const options = questionCard.querySelectorAll('.option');\n\n                options.forEach(opt => {\n                    opt.classList.remove('selected', 'correct', 'incorrect', 'show-correct');\n                    const input = opt.querySelector('input');\n                    if (input.value === answers[`q${i}`].correct) {\n                        opt.classList.add('show-correct');\n                    }\n                });\n\n                if (selected) {\n                    const selectedOption = selected.closest('.option');\n                    if (selected.value === answers[`q${i}`].correct) {\n                        score++;\n                        selectedOption.classList.add('correct');\n                        feedback.className = 'feedback correct';\n                        feedback.textContent = answers[`q${i}`].explanation;\n                    } else {\n                        selectedOption.classList.add('incorrect');\n                        feedback.className = 'feedback incorrect';\n                        feedback.textContent = `\u7b54\u932f\u4e86\uff01${answers['q' + i].explanation}`;\n                    }\n                } else {\n                    feedback.className = 'feedback incorrect';\n                    feedback.textContent = '\u672a\u4f5c\u7b54\u3002' + answers[`q${i}`].explanation;\n                }\n            }\n\n            document.getElementById('score').textContent = `${score}\/${totalQuestions}`;\n\n            let scoreText = '';\n            if (score === totalQuestions) {\n                scoreText = '\u592a\u53b2\u5bb3\u4e86\uff01\u4f60\u5df2\u7d93\u7cbe\u901a Tailwind \u914d\u7f6e\u4e86\uff01';\n            } else if (score >= 4) {\n                scoreText = '\u5f88\u68d2\uff01\u5c0d\u6700\u4f73\u5be6\u8e10\u6709\u6df1\u5165\u7406\u89e3\uff01';\n            } else if (score >= 3) {\n                scoreText = '\u4e0d\u932f\uff0c\u518d\u6df1\u5165\u7814\u7a76\u4e00\u4e0b\u914d\u7f6e\u7d30\u7bc0\uff01';\n            } else {\n                scoreText = '\u5efa\u8b70\u91cd\u65b0\u95b1\u8b80\u6587\u7ae0\uff0c\u7279\u5225\u6ce8\u610f\u914d\u7f6e\u548c\u6700\u4f73\u5be6\u8e10\u90e8\u5206';\n            }\n            document.getElementById('scoreText').textContent = scoreText;\n\n            document.getElementById('results').classList.add('show');\n            document.getElementById('submitBtn').disabled = true;\n        });\n\n        document.querySelectorAll('.option').forEach(option => {\n            option.addEventListener('click', function() {\n                const name = this.querySelector('input').name;\n                document.querySelectorAll(`input[name=\"${name}\"]`).forEach(input => {\n                    input.closest('.option').classList.remove('selected');\n                });\n                this.classList.add('selected');\n                this.querySelector('input').checked = true;\n            });\n        });\n\n        function resetQuiz() {\n            document.getElementById('quizForm').reset();\n            document.querySelectorAll('.option').forEach(opt => {\n                opt.classList.remove('selected', 'correct', 'incorrect', 'show-correct');\n            });\n            document.querySelectorAll('.feedback').forEach(fb => {\n                fb.className = 'feedback';\n                fb.textContent = '';\n            });\n            document.getElementById('results').classList.remove('show');\n            document.getElementById('submitBtn').disabled = false;\n        }\n    \n<\/script>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Tailwind CSS \u5ba2\u88fd\u5316\u914d\u7f6e\u8207\u6700\u4f73\u5be6\u8e10 &#8211; \u57fa\u790e\u6e2c\u9a57 \u6e2c\u8a66\u4f60\u5c0d Tailwind \u914d\u7f6e\u548c\u6700 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rolpb_likes":0,"footnotes":""},"categories":[183],"tags":[266],"class_list":["post-260","post","type-post","status-publish","format-standard","hentry","category-tailwind-css","tag-tailwind-css"],"blocksy_meta":{"styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":7}},"_links":{"self":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/260","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/comments?post=260"}],"version-history":[{"count":0,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/posts\/260\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/media?parent=260"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/categories?post=260"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.itsmygo.uk\/wordpress\/wp-json\/wp\/v2\/tags?post=260"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}