Day 13：「谁还在背字典？」- Tailwind IntelliSense 插件

嗨大家好，昨天建立的如何呢！
我想应该不会遇到太多的困难吧～

虽然上次没有明讲，
但我想应该大部分人都是用 VS Code 在开发吧？

既然如此我们就来介绍个好用的东西！
 

Tailwind CSS IntelliSense

Tailwind CSS IntelliSense 是一个 VS Code 的扩充套件，它可以让你在 Tailwind 的开发体验急速上升，这样说你一定不明白，让我们直接列出来看看各项特色功能吧。

语法自动完成

智慧提示可以使用 class 名称，以及 class 实际上所代表的功能，语法提示的话就像是这样：

那除了语法提示之外，可以看到语法提示的右侧也会简略的显示出内容，让你快速了解这个功能的用途。

那在图示上也可以发现，一般的功能都是属性的符号，而如果是可以被加在前面当前缀词的变化模式那类，就会是 {} 的符号。

颜色则会直接显示颜色本身，改变颜色用的功能会显示为调色盘。

在 css 档案之中，撰写指令也有自动提示：

语法检查 (Linting)

语法检查功能可以显示出潜在的错误及 bug，例如像是相同用途的 class 不得放在同个元素，上图举例：

以这个例子来说，因为 flex 和 block 是同一个 css 属性的不同参数而已，如果你同时写了 flex 和 block，看起来就会是：

div {
  display: flex;
  display: block;
}

这样的属性设定是毫无意义的，而在 Tailwind CSS 之中，只会使第一个写的属性生效，会忽略後面相同属性的功能，所以这个例子之中也就是只会具有 flex 的效果，而不会是 blcok。

同时滑鼠悬停时也会跳出错误提示：

还有你如果在 css 当中撰写语法，若有错误及 bug 也会显示：

悬停预览

如果你熟悉 CSS 功能，但对 Tailwind 语法不熟悉，这个功能肯定可以大大的帮上你。 把滑鼠悬停在 class 上，会跳出这个 class 的内部实际上实现的功能以及在 css 中真正的 class 名称：

语法强调

提供语法定义来正确地强调 Tailwind 功能。
 

安装

安装方法其实非常简单，就如同在 VS Code 中安装其他扩充套件一般。

STEP 1

首先，搜寻 Tailwind

STEP 2

没错，就是第一个，你没看错。
名称一样的也只有它了XD
安装给它按下去！

STEP 3

你还期待有 Step 3？
花不到几秒的时间就安装好了！
既然安装好就快去用了啦 XD
 

业障小蚯蚓

假设你在 css 档中发现这个警告 ...

其实不要紧，一样都是正常提示语法的，不过因为 @tailwind、@screen、@apply 这些爆出警告的 CSS @规则都是 Tailwind 自订的指令，必须透过安装 VS Code 的 PostCSS Language Support 扩充套件或是其他可以帮助解析 PostCSS 语法的扩充套件才能消除业障的小蚯蚓。

搜寻一下，然後安装第二个那个就可以罗～
 

补充

虽然没什麽好补充的，不过以下这边有几个要点要注意一下哦！

语法没提示

要使语法可以提示，可以检查以下三点：

• 专案根目录中是否有 tailwind.config.js
• 是否在专案中有安装 Tailwind。
• tailwind.config.js 中是否存在错误

某些语法在提示视窗中找不到

在预设没有开启 JIT 模式的情况下，语法提示的详细程度是根据配置档的详细程度，Tailwind CSS IntelliSense 并不会提供你没有设定或无法使用的语法。

若开启 JIT 模式则会全部语法都提示，但别为了能够提示全部的语法而开启 JIT。

还是不跳提示？

如果上面这些方法在你的档案中都没办法解决问题，可以开启 Tailwind CSS IntelliSense 中的扩充套件设定：

在 Include Languages 里面增加你所使用的档案类型。

只有 VS Code 能用吗？

JetBrains IDEs 也可以支援相关的语法功能，
但还是推荐你使用 VS Code 就好。
 

呼！ 今天的图片好多。

因为啊其实官方也没有介绍的很详细，
所以如果这篇有错误的地方请不要害羞～
大力的在下面留言告诉我哦！

使用上应该是不太会遇到问题，
下个篇章，我们就要来拆阿嬷的裹脚布罗～
(啊 ... 臭！)
 

给你们的回家作业：

• 作业实施要点：
  • 试着安装 Tailwind CSS IntelliSense，然後写了几句跳出提示後再解除安装，大约重复五十次
     

关於兔兔们：

• Tailwind CSS 台湾官网
• Tailwind CSS 台湾 (脸书粉丝专页)
• 兔兔教 × Tailwind CSS Taiwan (脸书社群)
• 兔兔教大本营

( # 兔兔小声说 )

兔兔给认真看到这里的人一点小福利哟！
只要有看到这里，只要装一次就好而且不用解除安装。

如果没有追踪每篇的兔兔小声说，
就让他们重复练习 100 次吧！！！

(咦 ... 作业上说好的 50 次呢 ...)