1import{_ as p,c as l,b as s,d as a,a as t,e as c,r as i,o}from"./app-BgYE7jZN.js";const u={};function r(d,n){const e=i("SocialBlock");return o(),l("div",null,[n[0]||(n[0]=s("h1",{id:"å·®é»é¯éç-tailwindcss-å ¥éå¸ç¿çè¨",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#å·®é»é¯éç-tailwindcss-å ¥éå¸ç¿çè¨"},[s("span",null,"å·®é»é¯éç Tailwindcss å ¥éå¸ç¿çè¨")])],-1)),n[1]||(n[1]=s("h6",{id:"tags-css-tailwindcss-2024",tabindex:"-1"},[s("a",{class:"header-anchor",href:"#tags-css-tailwindcss-2024"},[s("span",null,[a("tags: "),s("code",null,"CSS"),a(),s("code",null,"tailwindcss"),a(),s("code",null,"2024")])])],-1)),t(e,{hashtags:"css,tailwindcss,2024"}),n[2]||(n[2]=c(`<p>æ¬ç¯ä¸»è¦åªè¨è¼ä¸äºæå人覺å¾æ¯è¼ç¹æ®éè¦çè¨çå §å®¹ï½ä¸¦ä¸æ¯æ´ä»½æ件åï¼</p><h2 id="start" tabindex="-1"><a class="header-anchor" href="#start"><span>Start</span></a></h2><h3 id="install" tabindex="-1"><a class="header-anchor" href="#install"><span>Install</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh"><pre><code class="language-bash"><span class="line">$ <span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-D</span> tailwindcss postcss autoprefixer</span> 2<span class="line">$ npx tailwindcss init <span class="token punctuation">[</span>--ts<span class="token operator">|</span>--esm<span class="token punctuation">]</span></span> 3<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="configure" tabindex="-1"><a class="header-anchor" href="#configure"><span>Configure</span></a></h3><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token comment">// for TS</span></span> 4<span class="line"><span class="token keyword">import</span> type <span class="token punctuation">{</span> Config <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'tailwindcss'</span></span> 5<span class="line"></span> 6<span class="line"><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span></span> 7<span class="line"> <span class="token literal-property property">content</span><span class="token operator">:</span> <span class="token punctuation">[</span></span> 8<span class="line"> <span class="token string">'./index.html'</span><span class="token punctuation">,</span></span> 9<span class="line"> <span class="token string">'./src/**/*.{vue,js,ts,jsx,tsx,mdx}'</span><span class="token punctuation">,</span></span> 10<span class="line"> <span class="token punctuation">]</span><span class="token punctuation">,</span></span> 11<span class="line"> <span class="token literal-property property">theme</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 12<span class="line"> <span class="token literal-property property">extend</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 13<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 14<span class="line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span></span> 15<span class="line"><span class="token punctuation">}</span> satisfies Config</span> 16<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token comment">// postcss.config</span></span> 17<span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span> 18<span class="line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 19<span class="line"> <span class="token literal-property property">tailwindcss</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 20<span class="line"> <span class="token literal-property property">autoprefixer</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 21<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 22<span class="line"><span class="token punctuation">}</span></span> 23<span class="line"></span> 24<span class="line"><span class="token comment">// use with preprocessor</span></span> 25<span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span> 26<span class="line"> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">{</span></span> 27<span class="line"> <span class="token string-property property">'postcss-import'</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 28<span class="line"> <span class="token string-property property">'tailwindcss/nesting'</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 29<span class="line"> <span class="token literal-property property">tailwindcss</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 30<span class="line"> <span class="token literal-property property">autoprefixer</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span></span> 31<span class="line"> <span class="token punctuation">}</span><span class="token punctuation">,</span></span> 32<span class="line"><span class="token punctuation">}</span></span> 33<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="import" tabindex="-1"><a class="header-anchor" href="#import"><span>
33Import</span></a></h3><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token comment">/* global.css */</span></span> 34<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span></span> 35<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span></span> 36<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> utilities<span class="token punctuation">;</span></span></span> 37<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line"><span class="token comment">/* entrypoint of your js file */</span></span> 38<span class="line"><span class="token keyword">import</span> <span class="token string">'./global.css'</span></span> 39<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="core-concepts" tabindex="-1"><a class="header-anchor" href="#core-concepts"><span>Core Concepts</span></a></h2><h3 id="states" tabindex="-1"><a class="header-anchor" href="#states"><span>States</span></a></h3><h4 id="pseudo-classes" tabindex="-1"><a class="header-anchor" href="#pseudo-classes"><span>Pseudo-classes</span></a></h4><ul><li><code>hover</code>, <code>active</code>, <code>focus</code></li><li><code>first</code>, <code>last</code>, <code>odd</code>, <code>even</code></li><li><code>focus</code>, <code>disabled</code>, <code>invalid</code>, <code>checked</code></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-descendants" target="_blank" rel="noopener noreferrer"><code>has</code>, <code>group-has-*</code>, <code>peer-has-*</code></a></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state" target="_blank" rel="noopener noreferrer"><code>group</code>, <code>group-hover</code>...</a></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-sibling-state" target="_blank" rel="noopener noreferrer"><code>peer</code>, <code>peer-invalid</code>...</a></li></ul><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>first:pt-0 last:pb-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span></span> 40<span class="line"></span> 41<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>has-[:checked]:bg-indigo-50 has-[:checked]:text-indigo-900 has-[:checked]:ring-indigo-200 ..<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 42<span class="line"> Google Pay</span> 43<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>radio<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checked:border-indigo-500 ...<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span> 44<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span></span> 45<span class="line"></span> 46<span class="line"><span class="token comment"><!-- å¯ä»¥èç± group æé group-has-* åå°ï¼ç¶å group å §éæç¹å®æ¢ä»¶å¾å¥ç¨æ¨£å¼ --></span></span> 47<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 48<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span> 49<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h4</span><span class="token punctuation">></span></span>Spencer Sharp<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h4</span><span class="token punctuation">></span></span></span> 50<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hidden group-has-[a]:block ...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 51<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>my-icon.svg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span></span> 52<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 53<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Product Designer at <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>planeteria.tech<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></span> 54<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 55<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="pseudo-elements" tabindex="-1"><a class="header-anchor" href="#pseudo-elements"><span>Pseudo-elements</span></a></h4><ul><li><code>before</code>, <code>after</code></li><li><code>placeholder</code></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#file-input-buttons" target="_blank" rel="noopener noreferrer"><code>file</code></a></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#list-markers" target="_blank" rel="noopener noreferrer"><code>marker</code></a></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#highlighted-text" target="_blank" rel="noopener noreferrer"><code>selection</code></a></li></ul><h4 id="media-queries" tabindex="-1"><a class="header-anchor" href="#media-queries"><span>Media queries</span></a></h4><ul><li><code>md</code>, <code>lg</code>...</li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-color-scheme" target="_blank" rel="noopener noreferrer"><code>dark</code></a></li><li><a href="https://tailwindcss.com/docs/hover-focus-and-other-states#prefers-reduced-motion" target="_blank" rel="noopener noreferrer"><code>motion-reduce</code>, <code>motion-safe</code></a></li><li><code>portrait</code>, <code>landscape</code></li><li><code>print</code></li></ul><h3 id="responsive-design" tabindex="-1"><a class="header-anchor" href="#responsive-design"><span>Responsive Design</span></a></h3><ul><li><a href="https://tailwindcss.com/docs/responsive-design" target="_blank" rel="noopener noreferrer">Ref</a></li></ul><table><thead><tr><th>
55Breakpoint prefix</th><th>Minimum width</th></tr></thead><tbody><tr><td><code>sm</code></td><td>640px</td></tr><tr><td><code>md</code></td><td>768px</td></tr><tr><td><code>lg</code></td><td>1024px</td></tr><tr><td><code>xl</code></td><td>1280px</td></tr><tr><td><code>2xl</code></td><td>1536px</td></tr></tbody></table><h3 id="dark-mode" tabindex="-1"><a class="header-anchor" href="#dark-mode"><span>Dark Mode</span></a></h3><p>By default this uses the <code>prefers-color-scheme</code> CSS media feature, but you can also build sites that support toggling dark mode manually using the <code>class</code> strategy.</p><ul><li><a href="https://tailwindcss.com/docs/dark-mode" target="_blank" rel="noopener noreferrer">Ref</a></li></ul><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code class="language-javascript"><span class="line">module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span></span> 56<span class="line"> <span class="token literal-property property">darkMode</span><span class="token operator">:</span> <span class="token string">'class'</span><span class="token punctuation">,</span></span> 57<span class="line"> <span class="token comment">// ...</span></span> 58<span class="line"><span class="token punctuation">}</span></span> 59<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token comment"><!-- Dark mode not enabled --></span></span> 60<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span></span> 61<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></span> 62<span class="line"> <span class="token comment"><!-- Will be white --></span></span> 63<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white dark:bg-black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 64<span class="line"> <span class="token comment"><!-- ... --></span></span> 65<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 66<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></span> 67<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span> 68<span class="line"></span> 69<span class="line"><span class="token comment"><!-- Dark mode enabled --></span></span> 70<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 71<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span></span> 72<span class="line"> <span class="token comment"><!-- Will be black --></span></span> 73<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-white dark:bg-black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 74<span class="line"> <span class="token comment"><!-- ... --></span></span> 75<span class="line"> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 76<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span></span> 77<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span></span> 78<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="reusing-styles" tabindex="-1"><a class="header-anchor" href="#reusing-styles"><span>Reusing Styles</span></a></h3><p>Extracting classes with <code>@apply</code></p><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token comment"><!-- Before extracting a custom class --></span></span> 79<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 80<span class="line"> Save changes</span> 81<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span> 82<span class="line"></span> 83<span class="line"><span class="token comment"><!-- After extracting a custom class --></span></span> 84<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>btn-primary<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 85<span class="line"> Save changes</span> 86<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></span> 87<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span></span> 88<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span></span> 89<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span>
89 utilities<span class="token punctuation">;</span></span></span> 90<span class="line"></span> 91<span class="line"><span class="token atrule"><span class="token rule">@layer</span> components</span> <span class="token punctuation">{</span></span> 92<span class="line"> <span class="token selector">.btn-primary</span> <span class="token punctuation">{</span></span> 93<span class="line"> <span class="token atrule"><span class="token rule">@apply</span> py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md <span class="token property">hover</span><span class="token punctuation">:</span>bg-blue-700 <span class="token property">focus</span><span class="token punctuation">:</span>outline-none <span class="token property">focus</span><span class="token punctuation">:</span>ring-2 <span class="token property">focus</span><span class="token punctuation">:</span>ring-blue-400 <span class="token property">focus</span><span class="token punctuation">:</span>ring-opacity-75<span class="token punctuation">;</span></span></span> 94<span class="line"> <span class="token punctuation">}</span></span> 95<span class="line"><span class="token punctuation">}</span></span> 96<span class="line"></span> 97<span class="line"><span class="token atrule"><span class="token rule">@layer</span> utilities</span> <span class="token punctuation">{</span></span> 98<span class="line"> <span class="token selector">.content-auto</span> <span class="token punctuation">{</span></span> 99<span class="line"> <span class="token property">content-visibility</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span></span> 100<span class="line"> <span class="token punctuation">}</span></span> 101<span class="line"><span class="token punctuation">}</span></span> 102<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="css-variable-without-var" tabindex="-1"><a class="header-anchor" href="#css-variable-without-var"><span>CSS Variable without var()</span></a></h4><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token comment"><!-- old --></span></span> 103<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span></span> 104<span class="line"><span class="token comment"><!-- now --></span></span> 105<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-[--brand-color] hover:bg-[--brand-hover-color]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 106<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="custom-styles" tabindex="-1"><a class="header-anchor" href="#custom-styles"><span>Custom Styles</span></a></h3><ul><li><a href="https://tailwindcss.com/docs/adding-custom-styles" target="_blank" rel="noopener noreferrer">Ref</a></li></ul><h4 id="using-arbitrary-values" tabindex="-1"><a class="header-anchor" href="#using-arbitrary-values"><span>Using arbitrary values</span></a></h4><div class="language-html line-numbers-mode" data-highlighter="prismjs" data-ext="html"><pre><code class="language-html"><span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-[#bada55] text-[22px] before:content-['Festivus']<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 107<span class="line"> <span class="token comment"><!-- ... --></span></span> 108<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 109<span class="line"></span> 110<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-[url('/what_a_rush.png')]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 111<span class="line"> <span class="token comment"><!-- ... --></span></span> 112<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 113<span class="line"></span> 114<span class="line"><span class="token comment"><!-- white space --></span></span> 115<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>grid grid-cols-[1fr_500px_2fr]<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></span> 116<span class="line"> <span class="token comment"><!-- ... --></span></span> 117<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></span> 118<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>What is Layer?</p><ul><li><code>base</code>: for things like reset rules or default styles applied to plain HTML elements.</li><li><code>components</code>: for class-based styles that you want to be able to override with utilities.</li><li><code>utilities</code>: for small, single-purpose classes that should always take precedence over any other styles.</li></ul></blockquote><h4 id="removing-unused-custom-css" tabindex="-1"><a class="header-anchor" href="#removing-unused-custom-css"><span>Removing unused custom CSS</span></a></h4><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span></span> 119<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span></span> 120<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span>
120 utilities<span class="token punctuation">;</span></span></span> 121<span class="line"></span> 122<span class="line"><span class="token atrule"><span class="token rule">@layer</span> components</span> <span class="token punctuation">{</span></span> 123<span class="line"> <span class="token comment">/* This won't be included in your compiled CSS unless you actually use it */</span></span> 124<span class="line"> <span class="token selector">.card</span> <span class="token punctuation">{</span></span> 125<span class="line"> <span class="token comment">/* ... */</span></span> 126<span class="line"> <span class="token punctuation">}</span></span> 127<span class="line"><span class="token punctuation">}</span></span> 128<span class="line"></span> 129<span class="line"><span class="token comment">/* This will always be included in your compiled CSS */</span></span> 130<span class="line"><span class="token selector">.card</span> <span class="token punctuation">{</span></span> 131<span class="line"> <span class="token comment">/* ... */</span></span> 132<span class="line"><span class="token punctuation">}</span></span> 133<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>In under-the-hood, frameworks like Vue and Svelte are processing every single <code><style></code> block independently, and running your PostCSS plugin chain against each one in isolation. That means if you have 10 components that each have a <code><style></code> block, Tailwind is being run 10 separate times, and each run has zero knowledge about the other runs. Because of this, Tailwind canât take the styles you define in a <code>@layer</code> and move them to the corresponding <code>@tailwind</code> directive</p></blockquote><h3 id="functions-directives" tabindex="-1"><a class="header-anchor" href="#functions-directives"><span>Functions & Directives</span></a></h3><h4 id="directives" tabindex="-1"><a class="header-anchor" href="#directives"><span>Directives</span></a></h4><ul><li><code>@tailwind</code></li><li><code>@layer</code></li><li><code>@apply</code></li></ul><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> base<span class="token punctuation">;</span></span></span> 134<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> components<span class="token punctuation">;</span></span></span> 135<span class="line"><span class="token atrule"><span class="token rule">@tailwind</span> utilities<span class="token punctuation">;</span></span></span> 136<span class="line"></span> 137<span class="line"><span class="token atrule"><span class="token rule">@layer</span> base</span> <span class="token punctuation">{</span></span> 138<span class="line"> <span class="token selector">h1</span> <span class="token punctuation">{</span></span> 139<span class="line"> <span class="token atrule"><span class="token rule">@apply</span> text-2xl<span class="token punctuation">;</span></span></span> 140<span class="line"> <span class="token punctuation">}</span></span> 141<span class="line"> <span class="token selector">h2</span> <span class="token punctuation">{</span></span> 142<span class="line"> <span class="token atrule"><span class="token rule">@apply</span> text-xl<span class="token punctuation">;</span></span></span> 143<span class="line"> <span class="token punctuation">}</span></span> 144<span class="line"><span class="token punctuation">}</span></span> 145<span class="line"></span> 146<span class="line"><span class="token atrule"><span class="token rule">@layer</span> components</span> <span class="token punctuation">{</span></span> 147<span class="line"> <span class="token selector">.btn-blue</span> <span class="token punctuation">{</span></span> 148<span class="line"> <span class="token atrule"><span class="token rule">@apply</span> bg-blue-500 <span class="token property">hover</span><span class="token punctuation">:</span>
148bg-blue-700 text-white font-bold py-2 px-4 rounded<span class="token punctuation">;</span></span></span> 149<span class="line"> <span class="token punctuation">}</span></span> 150<span class="line"><span class="token punctuation">}</span></span> 151<span class="line"></span> 152<span class="line"><span class="token atrule"><span class="token rule">@layer</span> utilities</span> <span class="token punctuation">{</span></span> 153<span class="line"> <span class="token selector">.filter-none</span> <span class="token punctuation">{</span></span> 154<span class="line"> <span class="token property">filter</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span> 155<span class="line"> <span class="token punctuation">}</span></span> 156<span class="line"> <span class="token selector">.filter-grayscale</span> <span class="token punctuation">{</span></span> 157<span class="line"> <span class="token property">filter</span><span class="token punctuation">:</span> <span class="token function">grayscale</span><span class="token punctuation">(</span>100%<span class="token punctuation">)</span><span class="token punctuation">;</span></span> 158<span class="line"> <span class="token punctuation">}</span></span> 159<span class="line"><span class="token punctuation">}</span></span> 160<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>Any rules inlined with @apply will have !important removed by default to avoid specificity issues:</p></blockquote><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token comment">/* Input */</span></span> 161<span class="line"><span class="token selector">.foo</span> <span class="token punctuation">{</span></span> 162<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> blue <span class="token important">!important</span><span class="token punctuation">;</span></span> 163<span class="line"><span class="token punctuation">}</span></span> 164<span class="line"></span> 165<span class="line"><span class="token selector">.bar</span> <span class="token punctuation">{</span></span> 166<span class="line"> <span class="token atrule"><span class="token rule">@apply</span> foo<span class="token punctuation">;</span></span></span> 167<span class="line"><span class="token punctuation">}</span></span> 168<span class="line"></span> 169<span class="line"><span class="token comment">/* Output */</span></span> 170<span class="line"><span class="token selector">.foo</span> <span class="token punctuation">{</span></span> 171<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> blue <span class="token important">!important</span><span class="token punctuation">;</span></span> 172<span class="line"><span class="token punctuation">}</span></span> 173<span class="line"></span> 174<span class="line"><span class="token selector">.bar</span> <span class="token punctuation">{</span></span> 175<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span></span> 176<span class="line"><span class="token punctuation">}</span></span> 177<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="functions" tabindex="-1"><a class="header-anchor" href="#functions"><span>Functions</span></a></h4><ul><li><code>theme</code>, <code>screen</code></li></ul><div class="language-css line-numbers-mode" data-highlighter="prismjs" data-ext="css"><pre><code class="language-css"><span class="line"><span class="token comment">/* use dot in number */</span></span> 178<span class="line"><span class="token selector">.content-area</span> <span class="token punctuation">{</span></span> 179<span class="line"> <span class="token property">height</span><span class="token punctuation">:</span> <span class="token function">calc</span><span class="token punctuation">(</span>100vh - <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'spacing[2.5]'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 180<span class="line"><span class="token punctuation">}</span></span> 181<span class="line"></span> 182<span class="line"><span class="token selector">.btn-blue</span> <span class="token punctuation">{</span></span> 183<span class="line"> <span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.blue.500'</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span> 184<span class="line"><span class="token punctuation">}</span></span> 185<span class="line"></span> 186<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token function">screen</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span></span> <span class="token punctuation">{</span></span> 187<span class="line"> <span class="token comment">/* ... */</span></span> 188<span class="line"><span class="token punctuation">}</span></span> 189<span class="line"><span class="token comment">/* equal to */</span></span> 190<span class="line"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 640px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span></span> 191<span class="line"> <span class="token comment">/* ... */</span></span> 192<span class="line"><span class="token punctuation">}</span></span> 193<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>å¦ææåä¸éå¨ç¨ sass åéè¦ä½¿ç¨ <code>screen</code> é種åè½ç話ï¼å¯ä»¥åä¸é¢é樣çµå sass mixin èç</p><div class="language-scss line-numbers-mode" data-highlighter="prismjs" data-ext="scss"><pre><code class="language-scss"><span class="line"><span class="token keyword">@mixin</span> <span class="token function">rwd</span><span class="token punctuation">(</span><span class="token variable">$size</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 194<span class="line"> @media <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">"screens.#{$size}"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 195<span class="line"> <span class="token keyword">@content</span><span class="token punctuation">;</span></span> 196<span class="line"> <span class="token punctuation">}</span></span> 197<span class="line"><span class="token punctuation">}</span></span> 198<span class="line"></span> 199<span class="line"><span class="token comment">// é樣æåå°±å¯ä»¥å¨ nested çµæ§ä¸ä½¿ç¨ tailwind çè®æ¸äº</span></span> 200<span class="line"><span class="token selector">h1 </span><span class="token punctuation">{</span></span> 201<span class="line"> <span class="token keyword">@include</span> <span class="token function">rwd</span><span class="token punctuation">(</span>sm<span class="token punctuation">)</span> <span class="token punctuation">{</span></span> 202<span class="line"> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span></span> 203<span class="line"> <span class="token punctuation">}</span></span> 204<span class="line"><span class="token punctuation">}</span></span> 205<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,52)),t(e,{hashtags:"css,tailwindcss,2022"})])}const m=p(u,[["render",r]]),v=JSON.parse('{"path":"/articles/css/learn-tailwindcss.html","title":"å·®é»é¯éç Tailwindcss å ¥éå¸ç¿çè¨","lang":"zh-TW","frontmatter":{}
205,"git":{"updatedTime":1748788505000,"contributors":[{"name":"johnnywang1994","username":"johnnywang1994","email":"[email protected]","commits":2,"url":"https://github.com/johnnywang1994"},{"name":"johnnywang","username":"johnnywang","email":"[email protected]","commits":9,"url":"https://github.com/johnnywang"},{"name":"JohnnyWang","username":"JohnnyWang","email":"[email protected]","commits":3,"url":"https://github.com/JohnnyWang"},{"name":"Lindy Liao","username":"","email":"[email protected]","commits":1}],"changelog":[{"hash":"f01bfa128b4d33fbeddb8abb1697b5391b273d28","time":1748788505000,"email":"[email protected]","author":"Lindy Liao","message":"UPD"},{"hash":"4e8b29c5a84b2c1f65f747a0221c74ccb00a52b2","time":1713517902000,"email":"[email protected]","author":"johnnywang","message":"UPD"},{"hash":"19ca78bf291fca56fe7e392524923775549f779c","time":1710772220000,"email":"[email protected]","author":"johnnywang","message":"⨠UPD"},{"hash":"b38ce0de9a5a727edf42006e665818677481bf64","time":1709902936000,"email":"[email protected]","author":"johnnywang","message":"UPD"},{"hash":"485a42005213f6724c9b210e8f9c9d59e950113a","time":1706619219000,"email":"[email protected]","author":"johnnywang","message":"ð§ updare"},{"hash":"05130fb3c05e2122288c5024834dd8dff3c27120","time":1704630173000,"email":"[email protected]","author":"johnnywang","message":"UPD: add astro-theme-flash-issue"},{"hash":"d918375ea95adeb84d4429d7b3615e50f6d8e9a6","time":1690461705000,"email":"[email protected]","author":"Johnny","message":"Develop (#11)","coAuthors":[{"name":"johnnywang","email":"[email protected]"}]},{"hash":"5b65a916a3283374e8f0786f8795805cbbe86676","time":1662693866000,"email":"[email protected]","author":"JohnnyWang","message":"UPD: update sonarcube memo"},{"hash":"38ab8687092ea20fcda95f2504fdd7a5be74aabe","time":1660306990000,"email":"[email protected]","author":"JohnnyWang","message":"UPD: add vue react state compare"},{"hash":"28b405a579026b66500f99e1b33a7e5dce48deff","time":1659156892000,"email":"[email protected]","author":"JohnnyWang","message":"UPD"},{"hash":"397d28ec1d3beab4b951899804abd7337ad16899","time":1650967141000,"email":"[email protected]","author":"johnnywang","message":"UPD: update tailwind"},{"hash":"2287a5e44df7f0da34e58048e2f8a4a2842dc157","time":1649426726000,"email":"[email protected]","author":"johnnywang","message":"UPD: update tailwindcss"},{"hash":"253baea042cc914a59f5bec9500cfa2d53d3418f","time":1649425524000,"email":"[email protected]","author":"johnnywang","message":"UPD: update tailwindcss"},{"hash":"b5e237626958145f9b102c9d9fe6bfd8f986d47a","time":1648811257000,"email":"[email protected]","author":"johnnywang1994","message":"UPD: add tailwind-basic"}]},"filePathRelative":"articles/css/learn-tailwindcss.md"}');export{m as comp,v as data};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.