Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="select-none antialiased text-gray-900">
  <div class="px-4 py-10 max-w-3xl mx-auto sm:px-6 sm:py-12 lg:max-w-4xl lg:py-16 lg:px-8 xl:max-w-6xl">
    <article class="prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto">
      <h1>Tailwind 導入 Google Fonts</h1>
      <p class="lead">昨天講了文字使用,今天來講講字體。在默認情況下,Tailwind 提供了三種字體系列:<code>font-sans (無襯線字體)</code>,<code>font-serif (襯線字體)</code> 和 <code>font-mono (等寬字體)</code> 供我們使用,使用方式為 class="font-sans,以此類推。 以下為預設的 font-family:</p>
      <ul>
        <li>
          <p>
            <strong>font-sans (無襯線字體):</strong>
            ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
          </p>
        </li>
        <li>
          <p>
            <strong>font-serif (襯線字體):</strong>
            ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
          </p>
        </li>
        <li>
          <p>
            <strong>font-mono (等寬字體):</strong>
            ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
          </p>
        </li>
      </ul>
      <p>一般預設都為無襯線字體,如果想變為襯線字體,只需使用 class 為 font-serif,以此類推,範例比較如下:</p>
      <pre>
        <code class="language-html">
&lt;p class="font-sans">Hello Tailwind!&lt;/p&gt; 
&lt;p class="font-serif">Hello Tailwind!&lt;/p&gt;  
&lt;p class="font-mono">Hello Tailwind!&lt;/p&gt; 
        </code>
      </pre>
      <figure>
        <img src="https://ithelp.ithome.com.tw/upload/images/20210908/20141250gX6SBlOw5Q.png" alt="">
        <figcaption>實作無襯線字體、襯線字體、等寬字體比較。</figcaption>
      </figure>
      <p>但這不是威爾豬今天要講的重點,我們要來搭配 Google Fonts 使用,很多時候,設計師為了配合項目或版型設計,好看的字體不可少,而字體不一定會使用電腦內建的字體,可能付費或線上免費字體,Google Fonts 上就有許多優秀的免費字體。</p>
      <h2>載入 Google Fonts</h2>
      <p>到 <a href="https://fonts.google.com/">Google Fonts</a> 上選擇字體,威爾豬來選個可愛的圓體字好了,跟系統預設字體差別較大,這邊使用 <code>Fredoka One</code> 字型,可以看到右側有 <code>+ select thus style</code>,勇敢的把它點下去。</p>
      <figure>
        <img src="https://ithelp.ithome.com.tw/upload/images/20210907/201412509FyDR0F26K.jpg" alt="">
        <figcaption>Fredoka One 字型。</figcaption>
      </figure>
      <p>之後我們就會看到右側面板跳出畫面</p>
      <figure>
        <img src="https://ithelp.ithome.com.tw/upload/images/20210907/20141250w5mGA3VLFr.jpg" alt="">
      </figure>
      <p>複製 link 的代碼並放到 HTML 的 裡,如下:</p>
      <pre>
        <code class="language-html">
&lt;link rel="preconnect" href="https://fonts.googleapis.com"&gt; 
&lt;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;  
&lt;link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet"&gt; 
        </code>
      </pre>
      <h2>在 Tailwind 中設定 Google Fonts</h2>
      <p>複製 Google Fonts 右側面板的 font-family,<code>'Fredoka One', cursive</code>,並開啟 <code>tailwind.config.js</code>, 在 theme 的 extend 上加入 fontFamily 並自訂名稱,如下:</p>
      <pre>
        <code class="language-javascript">
module.exports = {
  theme: {
    ... ,
    extend: {
      fontFamily: {
        'fredoka-one': ['"Fredoka One"', 'cursive'],
      },
    },
    ... ,
  },
  ... ,
}
        </code>
      </pre>
      <blockquote>如果字體像這個例子一樣中間有空格,最好使用雙引號包住,確保 Google Fonts 不會出錯。</blockquote>
      <p>好啦,現在 Tailwind 已經認識 Fredoka One,我們可以使用它了。使用方式:<code>font-{自訂字體名稱}</code>,威爾豬這邊的例子就是 <code>font-fredoka-one</code>,我們代入 class,如下:</p>
      <pre>
        <code class="language-html">
&lt;h1 class="text-5xl text-blue-300 font-fredoka-one">Hello Tailwind!&lt;/h1&gt; 
        </code>
      </pre>
      <figure>
        <img src="https://ithelp.ithome.com.tw/upload/images/20210907/2014125093QoBug016.jpg" alt="">
        <figcaption></figcaption>
      </figure>
      <p>耶~看到這畫面代表你成功使用 Google Fonts 啦,給自己來點掌聲吧!那咱們明天見。</p>
    </article>
  </div>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console