TailwindCSS 从零开始 - Just In Time 模式的有趣功能

未来更新趋势

从官方文件可以看到在 JIT 模式中的 CSS 写法可以非常的多样且直觉，而未来 TailwindCSS 更新的核心与发展都会围绕着 JIT 模式来开发。

在 JIT 底下有趣的功能

除了上篇说到的改尺寸跟颜色的写法外，还有支持很多种原本要另外自己制定样式的样式，但在 TailwindCSS 中可以透过几个 class 就能达成。

对於伪元素的支持

在传统写 CSS 使用伪元素可以完成许多样式的设定，例如：

demo: https://codepen.io/hnzxewqw/pen/WNOoRrw

使用 TailwindCSS 可以这样写：

  <div class="
       text-gray-700
       before:text-white
       after:text-white
       before:p-2
       after:p-2
       before:content-['before'] before:block before:bg-blue-500
       after:flex after:bg-pink-300 after:content-['after']
      "
 >----</div>

画面呈现会是：

而官方文件也提供以下伪元素可以使用的 variants

透明度

在没有使用 JIT 模式下，如果要设定一个背景透明度要这样写，

   <div class="bg-red-500 bg-opacity-25 w-20 h-20 flex justify-center items-center">透明度</div>

但如果有使用 JIT 模式的话，可以这样写，效果也相同，直接在颜色上算数学，把设定的颜色直接去除想要的透明度数值，这点真是超方便的。

   <div class="bg-red-500/25 w-20 h-20 flex justify-center items-center">透明度</div>

使用变数来变更字体、颜色或是任何属性值

这边很有趣，有点像是 SCSS 可以命名变数的方式，但又更加弹性，有两种可以改变样式的方法。

定义变数并直接使用在 template 上

在 tailwind.css 的 base 上方，先给一个 :root{} 的区块，并且可以自订义样式名称与值，比如说我要自订字体大小、背景与颜色，可以这样写。

tailwind.css

:root {
    --color: #fff;
    --bgc: #3e3e3e;
    --fontSize: 24px;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

.title {
    color: var(--color);
    background-color: var(--bgc);
    font-size: var(--fontSize);
}

html

  <h2 class="title">使用变数</h2>

变数前面要使用 --，没办法使用 $ 或是 _ 等符号，会无法成功命名变数。

完成效果：

直接在 template 上使用变数

还有另一个方式是使用定义好的变数，因为 template 无法直接知道变数是什麽东西，所以在不同属性的变数前面，要加上以下的类型。

以原本的变数为例，直接使用在 template 上可以这样写，

   <h2 class="bg-[color:var(--bgc)] text-[color:var(--color)] text-[length:var(--fontSize)]">使用变数2</h2>

如同前面有提到可以自订样式的写法，但这边是使用 color 的类型去指定颜色相关的样式，文字就要使用 length 的类型，并且後面再加上定义好的变数样式，就可以直接使用了。

得到的效果会与第一个相同。

虽然看起来比较麻烦，但好处是，当今天接手前人专案，当今天专案又大样式又深的时候，没时间研究的话，可以使用第二种方式达到修改样式的效果喔！

至於哪一种比较好用就见仁见智了。

修改 input 游标

<input> 标签不管在前後台都会频繁使用的标签，预设就是万年不变的黑色闪烁游标

demo: https://codepen.io/hnzxewqw/pen/mdwOWEO

而 TailwindCSS 可以透过 JIT 模式去修改其游标样式。

  <input type="text" class="caret-red-400 p-2 border-2 focus:border-blue-300 focus:outline-none" />

小结

本篇就是纪录一些在 JIT 模式中新增以及有趣的功能，跟着官方的示范跟练习，真的觉得 JIT 模式相当强大，也节省非常多的时间，真是太厉害了！

参考资料

• Just-in-Time Mode