{"status":1,"code":"essepage_fetched","payload":{"html":"\n\n\n\n\n

({themeIcon:'',async init(){Alpine.store('PageTheme',{});this.themeIcon=localStorage.RichardThinkTheme==='dark'||!('RichardThinkTheme'in localStorage)&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'';if(this.themeIcon==='dark'){this.setThemeDark()}else{this.setThemeLight()}await $nextTick()},setTheme(e='system'){if(e=='light'){localStorage.RichardThinkTheme='';this.setThemeLight()}else if(e=='dark'){localStorage.RichardThinkTheme='dark';this.setThemeDark()}else if(e=='auto'){localStorage.removeItem('RichardThinkTheme');this.setThemeAuto()}else{localStorage.removeItem('RichardThinkTheme');this.setThemeAuto()}},setThemeLight(){document.documentElement.classList.toggle('dark',false);this.themeIcon=''},setThemeDark(){document.documentElement.classList.toggle('dark',true);this.themeIcon='dark'},setThemeAuto(){if(window.matchMedia('(prefers-color-scheme: dark)').matches){this.setThemeDark()}else{this.setThemeLight()}}});;\">\n\t

\n\n

\n\t\t\t

\n \n \n\n

\n \n

\n \n RichardThink\n

\n \n

\n \n About\n \n

\n \n Snipets\n \n

\n \n Diaries\n \n

\n\n \n\n

\n\n \n \n \n \n\n

\n \n

\n \n \n \n

\n\n\n

\n \n

\n \n English\n

\n \n \n

\n \t\t\t\t\t\t\t\n 한국어\n

\n \n \n

\n \n 日本語\n

\n \n

\n\n

\n\n\t\t\t

\n\n \t

\n\t\t\t

\n\t

({Open:false,async init(){await $nextTick();console.log(window.tailwind);const n=twi`bg-blue-700 ${true&&'rounded'}`;console.log(n)}});;\">\n\n

\n\n

Tag: #CSS

\n\n

\n\t\t\t

\n \t

\n\n\t\t\n

\n\t\t\t

\n\n

\n\n RichardThink\n\n \n\n

\n\n

\n\n \n Powered by \n ≶\n Essepage\n \n\n

\n\n

\n\n\t

\n\n\n\n\n\n\n\n\n\n\n\n\n\n","script":"try{document.addEventListener('alpine:init',(()=>{Alpine.store('essepage',Essepage)}),{once:true});if(window.Alpine){console.log(`APLINE UPDATED!!!`);Alpine.store('essepage',Essepage)}else{console.log(`NO APLINE`)}Essepage.afterUpdate((async()=>{console.log(`afterUpdate2`)}));document.addEventListener('essepage-afterUpdate',(async()=>{console.log(`afterUpdate3`)}),{once:true});Essepage.afterUpdate((async()=>{console.log(`afterUpdate1`);hljs.highlightAll();hljs.initLineNumbersOnLoad();hljs.initLangOnLoad({overrideNames:{'language-html':'HTML'}})}))}catch(e){console.error(e)};","css":".markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 {\n font-weight: 600;\n}\n.markdown-content h2 {\n margin-top: 3rem;\n margin-bottom: 2rem;\n font-size: 1.5rem;\n line-height: 2rem;\n}\n.markdown-content h3 {\n margin-bottom: 1.5rem;\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.markdown-content a {\n color: #60a5fa;\n}\n.markdown-content a:hover {\n text-decoration: underline;\n}\n.markdown-content p {\n margin-bottom: 1.5rem;\n}\n.markdown-content p sup {\n display: block;\n line-height: 1.5rem;\n}\n.markdown-content p sup code {\n padding: 0.15rem 0.25rem;\n font-size: 0.75rem;\n vertical-align: baseline;\n font-weight: 600;\n}\n.markdown-content ul, .markdown-content ol {\n margin-bottom: 2rem;\n}\n.markdown-content li {\n list-style-type: disc;\n margin-left: 1.5rem;\n}\n.markdown-content pre code {\n display: block;\n overflow-x: auto;\n padding: 1em;\n padding-left: 0.9em;\n}\n.markdown-content code {\n padding: 3px 5px;\n}\n.markdown-content code {\n background: #e6e6e6;\n font-size: 0.875rem;\n line-height: 1.25rem;\n border-radius: 0.375rem;\n padding: 0.25rem 0.5rem;\n vertical-align: text-bottom;\n}\n.markdown-content h1 code, .markdown-content h2 code, .markdown-content h3 code {\n font-size: 1.2rem;\n vertical-align: middle;\n}\n.markdown-content pre {\n margin-bottom: 2rem;\n overflow: hidden;\n position: relative;\n}\n.markdown-content pre code {\n font-size: 0.875rem;\n line-height: 1.25rem;\n background-color: #fff;\n border-radius: 0.5rem;\n}\n.markdown-content blockquote {\n border-left: 4px #fdba74 solid;\n margin-left: 1rem;\n padding-left: 1rem;\n padding-right: 2rem;\n}\n.markdown-content blockquote p {\n color: #737373;\n}\n.markdown-content .hljs-lang {\n position: absolute;\n right: 0px;\n padding-top: 0.125rem;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.125rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n border-top-right-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n text-align: center;\n user-select: none;\n color: #777;\n background-color: #eee;\n}\nhtml.dark .hljs-lang {\n color: #eee;\n background-color: #777;\n}\nhtml.dark code {\n background: #292929;\n}\n.markdown h1, .markdown h2, .markdown h3, .markdown h4 {\n color: #111111;\n font-weight: 400;\n}\n.markdown h1, .markdown h2, .markdown h3, .markdown h4, .markdown h5, .markdown p {\n margin-bottom: 24px;\n padding: 0;\n}\n.markdown h1 {\n font-size: 48px;\n}\n.markdown h2 {\n font-size: 36px;\n margin: 24px 0 6px;\n}\n.markdown h3 {\n font-size: 24px;\n}\n.markdown h4 {\n font-size: 21px;\n}\n.markdown h5 {\n font-size: 18px;\n}\n.markdown a {\n color: #0099ff;\n margin: 0;\n padding: 0;\n vertical-align: baseline;\n}\n.markdown ul, .markdown ol {\n padding: 0;\n margin: 0;\n}\n.markdown li {\n line-height: 24px;\n}\n.markdown li ul {\n margin-left: 24px;\n}\n.markdown p, .markdown ul, .markdown ol {\n font-size: 16px;\n line-height: 24px;\n max-width: 540px;\n}\n.markdown pre {\n padding: 0px 24px;\n max-width: 800px;\n white-space: pre-wrap;\n}\n.markdown code {\n font-family: Consolas, Monaco, Andale Mono, monospace;\n line-height: 1.5;\n font-size: 13px;\n}\n.markdown aside {\n display: block;\n float: right;\n width: 390px;\n}\n.markdown blockquote {\n margin: 1em 2em;\n max-width: 476px;\n}\n.markdown blockquote p {\n color: #666;\n max-width: 460px;\n}\n.markdown hr {\n width: 540px;\n text-align: left;\n margin: 0 auto 0 0;\n color: #999;\n}\n.markdown table {\n border-collapse: collapse;\n margin: 1em 1em;\n border: 1px solid #CCC;\n}\n.markdown table thead {\n background-color: #EEE;\n}\n.markdown table thead td {\n color: #666;\n}\n.markdown table td {\n padding: 0.5em 1em;\n border: 1px solid #CCC;\n}\n.hljs-ln td.hljs-ln-numbers {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n text-align: right;\n border-right: 1px solid #CCC;\n vertical-align: top;\n padding-right: 10px;\n}\n.hljs-ln td.hljs-ln-numbers .hljs-ln-n:before {\n content: attr(data-line-number);\n}\n.hljs-ln td.hljs-ln-code {\n padding-left: 10px;\n}\n","essepage_head":"Tag: #TailwindCSS · RichardThink - The Developer Richard's Diaries\n\t\n \n \n\t\n\t\n\n \n\n\t\n\t\n\t\n \n \n \n\t\n\t\n\t\n\t\n\t\n\n\t\n\t\n\t\n\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t","page_title":"Tag: #TailwindCSS","page_browser_title":"Tag: #TailwindCSS · RichardThink - The Developer Richard's Diaries","page_datetime":"2025-06-14T00:13:00Z","page_hash_tags":[],"page_meta":{"title":"Tag: #TailwindCSS · RichardThink - The Developer Richard's Diaries","description":"","twitter:card":"summary_large_image","viewport":"width=device-width, initial-scale=1","og:title":"Tag: #TailwindCSS · RichardThink - The Developer Richard's Diaries","og:description":"","og:image":"https://i.esdrop.com/d/f/bh8rwl3bwU/RM98X1lO4f.png"},"progressbar_bg":"linear-gradient(45deg, #FFA297 14%, #FFBCA5 0, #FFBCA5 28%, #FFF5D1 0, #FFF5D1 42%, #80FEE3 0, #80FEE3 56%, #8CD2FA 0,#8CD2FA 70%, #B1BEFF 0, #B1BEFF 84%, #F0CFFF 0)","additional_languages":["ko","ja"],"default_language":"en","file_type":"essepage","page_token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpYXQiOjE3NTIxNzIzOTUsIm5iZiI6MTc1MjE3MjM5NSwiZXhwIjoxNzUyMTc1OTk1LCJmcCI6ImFwaV9lc3NlcGFnZV9jb20iLCJkYXRhIjp7ImVzc2VwYWdlX3N0YXR1cyI6IjEwMCJ9fQ.UeU_cGsY4_7T9b_nsTiVEUNKmPfd85f_JrBGBYr3iwQ","s_fetch":true,"use_ssr_cache":false,"href_path":"/tag/CSS","article_mode":false,"cv":"20250616092128"}}