光速入门 Tailwind CSS-基础概念

分层

首先我们要明白，tailwind 能通过类的方式来写样式，是因为它已经提供了这些写好了 css 的类。并且 tailwind 把这些类分成了三层。

Tailwind 将其生成的样式组织成三个不同的 “layers” — 这是 ITCSS 推广的概念。

base 层用于重置规则或应用于纯 HTML 元素的默认样式。
components 层用于你希望能够使用工具覆盖的基于类的样式。
utilities 层用于小型、单一用途的类，这些类应始终优先于任何其他样式。

ITCSS（Inverted Triangle CSS）是一种CSS架构方法，它通过将CSS代码组织成一系列层次来提高CSS的可维护性和可扩展性。这些层次从宽泛的、全局的设置到非常具体、局部的样式，形成一个倒三角形的结构。

每一层都有其明确的职责，如下：

Settings：包含设计中的变量，如颜色、字体和断点。

Tools：包含辅助函数、混合宏和实用工具类。

Generic：包含重置、标准化样式和排版规则。

Base：包含元素的样式，如按钮、表单和网格系统。

Objects：包含设计中的布局模式，如媒体对象和列表。

Components：包含更复杂的功能模块，如按钮组、轮播和导航。

Utilities：包含最具体的设计调整，如间距、文本样式和可见性。

ITCSS的目标是通过限制CSS的特异性、减少依赖性、避免重叠和冲突，以及提供清晰的代码组织结构，来创建一个易于管理和扩展的CSS代码库。这种方法特别适合大型项目和团队协作，因为它有助于确保一致性和减少不必要的复杂性。

指令

tailwind 总共就提供了 4 个指令。

@tailwind

@tailwind 指令就像是导入语句 import，将 Tailwind 提供的 base、components、utilities 和 variants 样式插入到你的 CSS 中。

@layer

自定义样式的时候，我们可能会添加一些自定义类。@layer 指令就是用来告诉 tailwind 这些自定义的类应该属于三层中的哪一层，tailwind 你要按这一层的规矩管理它。

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

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  .filter-none {
    filter: none;
  }
  .filter-grayscale {
    filter: grayscale(100%);
  }
}

@apply

@apply 指令如上所示，就是可以在自定义的 css 中使用 tailwind 提供的类。而且它不仅仅局限于 tailwind 提供的类，自定义的类也可以提取其中的样式进行复用。

不过要注意：从类中提取的样式会删掉 !important。

@layer base {
  h1 {
    @apply text-2xl;
  }
}

.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

还有一点，就是 @apply 指令在 Vue 组件中无法提取应用其他 css 文件中自定义的类。比如在主 css 文件 main.css 中自定义了一个 card 类，在组件中无法 @apply 应用 card 类。

这是因为每个 Vue 组件中

解决办法是在 tailwind 插件中添加自定义的 css 类，这样就能全局共享了。

const plugin = require('tailwindcss/plugin')

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.card': {
          backgroundColor: theme('colors.white'),
          borderRadius: theme('borderRadius.lg'),
          padding: theme('spacing.6'),
          boxShadow: theme('boxShadow.xl'),
        }
      })
    })
  ]
}

但老实说，最好的解决办法就是根本不做这种奇怪的事情。因为你完全可以在 html 模版上写类，压根不需要

@config

@config 指令指定 Tailwind 在编译该 CSS 文件时应使用哪个配置文件。这对于需要为不同的 CSS 入口点使用不同的配置文件的项目很有用。

你提供给 @config 指令的路径是相对于该 CSS 文件的，并且将优先于 PostCSS 配置或 Tailwind CLI 中定义的路径。

@config "./tailwind.admin.config.js";

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

@config "./tailwind.site.config.js";

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

函数

Tailwind 添加了一些自定义函数，用来在自定义样式时，在 css 中获取 tailwind 提供的样式中的一些值。比如使用 tailwind 提供的间距，颜色等。

theme()

theme() 读取 tailwind 类中的样式。使用.表示法读取值。

如果类中就带了点，避免歧义使用[]获取

.content-area {
  height: calc(100vh - theme(spacing.12));
}

.content-area {
  height: calc(100vh - theme(spacing[2.5]));
}

访问嵌套颜色值时不要使用破折号语法，要把破折号换成点

/* 错误 */
.btn-blue {
  background-color: theme(colors.blue-500);
}

/* 正确 */
.btn-blue {
  background-color: theme(colors.blue.500);
}

要调整使用 theme 检索到的颜色的透明度，请使用斜杠后跟你要使用的透明度值：

.btn-blue {
  background-color: theme(colors.blue.500 / 75%);
}

screen()

screen() 复用 tailwind 提供的断点，直接在媒体查询中使用。当想要媒体查询时，不用自己去查看 tailwind 编译的断点结构，然后复制使用。

/* 自己手写 */
@media (min-width: 640px) {
  /* ... */
}

/* 直接用 tailwind 的断点修饰符 */
@media screen(sm) {
  /* ... */
}

秒客网