TailwindCSS之样式层级TailwindCSS 将样式分为了三个层级：base、components、utili

如果果你使用过 TailwindCSS，你一定会见过这样的代码

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

TailwindCSS 将样式分为了三个层级：base、components、utilities

基础层包含的样式是应用于 HTML 元素的基础样式，用来统一统一各个平台差异的默认样式

看个例子🌰，默认按钮的样式是这样的：

可以看到默认按钮和普通的文本没什么两样，很不符合直觉假如你想让按钮默认有个边框，你就可以使用 @layer 来对基础样式进行拓展了

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

@layer base {
	button {
		@apply border border-gray-200;
	}
}

拓展之后我们的 html 没有任何改动可以看到按钮的边框生效了

TailwindCSS 支持将若干样式组合成一个样式类，变成可重新用的样式，默认 TailwindCSS 是没有包含任何 components 层级的样式的，但是 TailwindCSS 支持插件导入

// tailwind.config.js
export default {
  theme: {
    extend: {
      // …
    },
  },
  plugins: [require('daisyui')],
}

导入后我们就可以通过✅调用插件提供的样式类名啦

同时你会发现上面定义的 base 层级样式没有生效，这是因为在 TailwindCSS 中 components 的样式优先级高于 base 层的

原子类式是指 TailwindCSS 提供的工具样式类名，如 ml-5 、px-5 等等

为什么 TailwindCSS 要将样式分为这三层呢？

主要是为了更好的管理样式的优先级，在 TailwindCSS 中 base、components、utilities 三个层级的优先级如下：utilities > components > base，有了这三个层级的区分， TailwindCSS 有了较强的拓展性

TailwindCSS 使用到 CSS 最新的 @layer 特性来实现不同级别样式的优先级，你同样可以使用 @layer 定义不同层级的拓展样式类

如果你还没使用过 TailwindCSS 不妨来 TailwindCSS play 来上手试试