TailwindCSS 从零开始 - TailwindCSS 3.0.0-alpha.1 释出

tailwindcss

2021.10.2 於官方 GitHub 公告。

计画赶不上更新

在程序的世界有一个特色，更新速度。

就在不久前 TailwindCSS 释出 3.0.0-alpha.1 的版本，目前尚在测试中，但有预告会在今年稍晚会正式发布 3.0 版本。
相信有在使用 TailwindCSS 的朋友，也相当期待与关注到底更新了哪些东西，就来看一下官方的介绍。

更新消息

  1. JIT 模式：新的 JIT 引擎代替了传统引擎，提供更好的性能与全新功能，例如可以堆叠 variants 与支援 arbitrary value。
  2. JIT CDN：可以直接引入 CDN 并直接使用 JIT 模式(太爽了)。
  3. 预设所有的色彩：包含一些比较特别的颜色。

新的 utility

  • aspect-ratio：可以在图片中直接使用此属性。
  • scroll-snap：适用於 CSS 滚动效果。
  • scroll-behavior：用於浏览器的平滑滚动。
  • text-indent：缩排一行。
  • column 和 break-before/inside/after：多列内容的包装。
  • touch-action：控制触控萤幕的互动。
  • will-change：优化 transition 的效能。
  • border-x 和 border-y：同时设定边框的上下与左右样式。

新的 variants

  • file：上传档案按钮样式。
  • open：给 details 跟 dialog 标签使用的样式。

改变的部分

purge 改为 content

example

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.html' /* ... */],
}

如果想要做更多的设定，会如范例程序码一样：

// tailwind.config.js
module.exports = {
  content: {
    files: ['./src/**/*.html' /* ... */],
    transform: {
      md: (content) => {
        return remark().process(content)
      },
    },
    extract: {
      md: (content) => {
        return content.match(/[^<>"'`\s]*/)
      },
    },
  },
  safelist: [
    'font-bold',
    'text-center',
    { pattern: /bg-(red|blue|green)/, variants: ['hover', 'focus'] },
  ],
  // ...
}

相信看到这边会关心的地方会是如果使用 3.0 版本，原本的 2.0 设定是否也要改成这样？
贴心的官方团队提出他们非常努力使用智能的方式去了解旧的配置，所以如果幸运的话 (代表可能还是会错误?)，旧设定还是会有效的，至於正式版如何就要看官方怎麽更新了。

色彩名称更改

原预设启用的部分颜色，因为名称冲突有做更动。

overflow-clip 已更改为 text-clip

因为浏览器更新加上了 overflow:clip 属性，所以官方已经把此属性改成 text-clip。

不再支援 PostCSS 7

要用 3.0，就要使用 PostCSS 8。

JIT CDN

可以在 head 中直接插入 CDN

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Example</title>
     <script src="https://cdn-tailwindcss.vercel.app/"></script> //加在这里
    </head>
    <body>
      <!-- -->
    </body>
  </html>

或是使用 first-party 套件

<script src="https://cdn-tailwindcss.vercel.app/?plugins=forms,typography,aspect-ratio,line-clamp"></script>

客制你的配置档

不必另外安装配置档，引入 CDN 後即可在 head 中设定配置档，这点满酷的。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn-tailwindcss.vercel.app/"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              tomato: 'tomato',
            },
          },
        },
      }
    </script>
  </head>
  <body>
    <!-- -->
  </body>
</html>

增加自订的 CSS

直接在 CSS 中用 @apply 之类的属性。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Example</title>
    <script src="https://cdn-tailwindcss.vercel.app/"></script>
    <style type="text/tailwindcss">
      body {
        @apply bg-pink-500;
      }
    </style>
  </head>
  <body>
    <!-- -->
  </body>
</html>

结语

看完 TailwindCSS 3.0-alpha.1 的公告满令人兴奋的，未来可以更自由的使用此框架，重点可以透过 CDN 的方式使用 JIT 真的会爽度很高，不用回头去查什麽伪类没有增加真的提高很多效率，至少我自己记不住这麽多的属性是否有增加我想要的伪类，但目前是测试阶段，建议不要直接使用在现行专案上，可以自己开个 side project 来玩玩看喔！

参考资料


<<:  Day 27 PostgreSQL 慢查询提速 50+ 倍?

>>:  Day28｜将 GitHub 的档案抓取下来到自己的本地端 - git pull 指令与冲突时的解决方法

[想试试看JavaScript ] 事件处理

事件处理 事件处理就是当使用者对画面做了一个动作，我们的程序必须侦测这个动作，并且做出反应。 如果事...

广播推送 - day24

目标 从左画面将讯息推送到右边画面，嗯! 就这样。 本示例从主画面推送讯息，其他开启本网的使用者无论...

6. Prototypal inheritance 的运作原理

（这篇会延续Constructor Function的内容，来解释 Prototype 和 Prot...

【Android/Kotlin】拍照/相簿照片上传到Server

前言: 本篇文章内容注重在把照相照片/相簿照片转成上传至Server的 Multipart.Part...

Day29 黑人变白人 (  皮肤上色 )

黑人变白人 (  皮肤上色 ) 教学原文参考：黑人变白人 (  皮肤上色 ) 这篇文章会介绍在 GI...