Tailwind CSS的@tailwindcss base指令导入了哪些基础样式？
站长
· 阅读数 8
@tailwindcss base导入了哪些基础样式？从哪里（代码库中的哪个或哪些文件）可以获知？还是说它并没有导入任何样式，但是我们可以通过以下方式声明一些样式，然后这些样式按照@tailwindcss的声明顺序来应用。
@tailwindcss base;
@tailwindcss components;
@tailwindcss utilities;
@layer base{
...
}
@layer component {
....
}回复
1个回答
test
2024-07-01
base 里的都是 reset 样式，具体来说就是 prelight 那部分。v3.0+ 之后 :root 里定义的那些 CSS 变量也在这层。
components 里目前只有一个 .container。
utilities 里的才是你用到那些所谓原子化样式类。
此外还有一个 variants 你没提到，这层里的带媒体查询的。
当然这都是说 tailwindcss 自带的部分，你要是自己往相应的 layer 里添加自定义的内容另当别论。
P.S. 其实这些 layer 本质上没有什么区别，不同的 layer 只是用来控制编译后的 CSS 顺序的。但如果真有自定义的需要，还是建议按照官方给出的建议来做，它是约定俗成的。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容