Tailwind CSS的@tailwindcss base指令导入了哪些基础样式？

Question

@tailwindcss base导入了哪些基础样式？从哪里（代码库中的哪个或哪些文件）可以获知？还是说它并没有导入任何样式，但是我们可以通过以下方式声明一些样式，然后这些样式按照@tailwindcss的声明顺序来应用。

@tailwindcss base;
@tailwindcss components;
@tailwindcss utilities;
@layer base{
    ...
}
@layer component {
    ....
}

Answer 1

base 里的都是 reset 样式，具体来说就是 prelight 那部分。v3.0+ 之后 :root 里定义的那些 CSS 变量也在这层。

components 里目前只有一个 .container。

utilities 里的才是你用到那些所谓原子化样式类。

此外还有一个 variants 你没提到，这层里的带媒体查询的。

当然这都是说 tailwindcss 自带的部分，你要是自己往相应的 layer 里添加自定义的内容另当别论。

P.S. 其实这些 layer 本质上没有什么区别，不同的 layer 只是用来控制编译后的 CSS 顺序的。但如果真有自定义的需要，还是建议按照官方给出的建议来做，它是约定俗成的。