tailwindcss 官网（七）定制：断点（设备分辨率）、自定义颜色、定制间距（p-6）

tailwindcss 官网（七）定制：断点（设备分辨率）、自定义颜色、定制间距（p-6）文章目录tailwindcss 官网（七）定制：断点（设备分辨率）、自定义颜色、定制间距（p-6）1. 断点（设备分辨率）基础的定制最大宽度断点多范围断点自定义媒体查询为打印设置风格2. 自定义颜色概述策划颜色自定义颜色颜色对象语法扩展默认颜色禁用一个默认颜色为您的颜色命名生成颜色调色板参考3. 定制间距扩展

ChrisP3616

1079人浏览 · 2021-09-14 15:49:02

ChrisP3616 · 2021-09-14 15:49:02 发布

tailwindcss 官网（七）定制：断点（设备分辨率）、自定义颜色、定制间距（p-6）

官网：安装 - Tailwind CSS 中文文档

Tailwind 是一个构建定制用户界面的框架，所以从开始设计时便考虑了定制。
!important
这个属性可以让浏览器优选执行这个语句，加上!importanrt可以覆盖父级的样式。

1. 断点（设备分辨率）

自定义项目的默认断点。

基础的定制

您的 tailwind.config.js 文件的 theme.screens 部分定义您项目的断点。键是您的屏幕名称（用于 Tailwind 生成的响应功能类变体的前缀，如md:text-center），值是 min-width，该断点应该开始的地方。

默认断点的设置来自于常见的设备分辨率。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '640px',
      // => @media (min-width: 640px) { ... }

      'md': '768px',
      // => @media (min-width: 768px) { ... }

      'lg': '1024px',
      // => @media (min-width: 1024px) { ... }

      'xl': '1280px',
      // => @media (min-width: 1280px) { ... }

      '2xl': '1536px',
      // => @media (min-width: 1536px) { ... }
    }
  }
}

您可以自由地拥有您想要的多的屏幕，以任何您喜欢的方式为他们命名。

例如，您可以使用设备名称代替尺寸。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'tablet': '640px',
      // => @media (min-width: 640px) { ... }

      'laptop': '1024px',
      // => @media (min-width: 1024px) { ... }

      'desktop': '1280px',
      // => @media (min-width: 1280px) { ... }
    },
  }
}

这些屏幕名称将反映在您的功能类中，所以您的 text-center 功能类现在看起来像这样：

.text-center { text-align: center }

@media (min-width: 640px) {
  .tablet\:text-center { text-align: center }
}

@media (min-width: 1024px) {
  .laptop\:text-center { text-align: center }
}

@media (min-width: 1280px) {
  .desktop\:text-center { text-align: center }
}

最大宽度断点

如果您想使用最大宽度断点而不是最小宽度断点，您可以指定您的屏幕为具有 max 键的对象。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      '2xl': {'max': '1535px'},
      // => @media (max-width: 1535px) { ... }

      'xl': {'max': '1279px'},
      // => @media (max-width: 1279px) { ... }

      'lg': {'max': '1023px'},
      // => @media (max-width: 1023px) { ... }

      'md': {'max': '767px'},
      // => @media (max-width: 767px) { ... }

      'sm': {'max': '639px'},
      // => @media (max-width: 639px) { ... }
    }
  }
}

与最小宽度断点相比，确保以相反的顺序列出它们，以便它们按照预期的方式相互覆盖。

例如，如果有必要，您甚至可以同时用 min-width 和 max-width 定义创建断点。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}

多范围断点

有时，一个断点定义适用于多个范围可能很有用。

例如，假设您有一个侧边栏，并希望您的断点是基于内容区域的宽度，而不是整个视口。您可以模拟这种情况，当侧边栏变得可见并缩小内容区域时，您的一个断点会回到一个较小的断点。

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': '500px',
      'md': [
        // Sidebar appears at 768px, so revert to `sm:` styles between 768px
        // and 868px, after which the main content area is wide enough again to
        // apply the `md:` styles.
        {'min': '668px', 'max': '767px'},
        {'min': '868px'}
      ],
      'lg': '1100px',
      'xl': '1400px',
    }
  }
}

自定义媒体查询

如果您需要为断点提供一个完全自定义的媒体查询，您可以使用一个带有 raw 键的对象来实现。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'portrait': {'raw': '(orientation: portrait)'},
        // => @media (orientation: portrait) { ... }
      }
    }
  }
}

为打印设置风格

如果您需要专门为打印应用不同的风格，raw 选项可能特别有用。

您需要做的就是在 theme.extend.screens 下添加一个 print 屏幕：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
        // => @media print { ... }
      }
    }
  }
}

然后，您可以使用像 print:text-black 这样的类来指定只有当有人试图打印您正在处理的页面时才会应用的样式：

<div class="text-gray-700 print:text-black">
  <!-- ... -->
</div>

2. 自定义颜色

为您的项目定制默认调色盘。

概述

Tailwind 包含一个专业制作的开箱即用的默认调色板，如果您没有自己的特定品牌，这是一个很好的起点。

在这里插入图片描述

但是当您需要定制您的调色板时，您可以在您的 tailwind.config.js 文件的 theme 部分的 colors 键下配置您的颜色。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      // Configure your color palette here
    }
  }
}

当涉及到建立一个自定义调色板时，您可以从我们丰富的调色板中策划您的颜色，或者通过直接添加您的特定颜色值 [配置您自己的自定义颜色] (#custom-colors)。

策划颜色

如果您没有一套完全自定义的颜色，您可以从我们完整的调色板中策划您的颜色，只需要将 'tailwindcss/colors' 导入您的配置文件中，然后选择您喜欢的颜色。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      gray: colors.trueGray,
      indigo: colors.indigo,
      red: colors.rose,
      yellow: colors.amber,
    }
  }
}

虽然每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。我们甚至在默认配置中也是这样做的，给 coolGray 起别名为 gray，给 violet 起别名为 purple，给 amber 起别名为 yellow，给 emerald 起别名为 green。

请参阅我们的完整调色板参考，查看默认可供选择的颜色。

自定义颜色

您可以添加自己的颜色值来建立一个完全自定义的调色板。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      blue: {
        light: '#85d7ff',
        DEFAULT: '#1fb6ff',
        dark: '#009eeb',
      },
      pink: {
        light: '#ff7ce5',
        DEFAULT: '#ff49db',
        dark: '#ff16d1',
      },
      gray: {
        darkest: '#1f2d3d',
        dark: '#3c4858',
        DEFAULT: '#c0ccda',
        light: '#e0e6ed',
        lightest: '#f9fafc',
      }
    }
  }
}

默认情况下，这些颜色会被所有颜色驱动的功能类自动共享，如 textColor、backgroundColor、borderColor 等。

颜色对象语法

您可以看到，上面我们使用嵌套对象符号来定义我们的颜色，其中嵌套键作为修饰符添加到基础颜色名称中：

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        light: '#b3bcf5',
        DEFAULT: '#5c6ac4',
        dark: '#202e78',
      }
    }
  }
}

颜色名称的不同分段组合成类名，如 bg-indigo-light。

和 Tailwind 的很多地方一样，DEFAULT 键很特殊，意思是"没有修饰符"，所以这个配置会生成 text-indigo 和 bg-indigo 这样的类，而不是 text-indigo-DEFAULT 或 bg-indigo-DEFAULT。

您也可以将颜色定义为简单的字符串而不是对象。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      'indigo-lighter': '#b3bcf5',
      'indigo': '#5c6ac4',
      'indigo-dark': '#202e78',
    }
  }
}

请注意，当使用 theme() 函数访问颜色时，您需要使用与定义颜色相同的符号。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      indigo: {
        // theme('colors.indigo.light')
        light: '#b3bcf5',

        // theme('colors.indigo.DEFAULT')
        DEFAULT: '#5c6ac4',
      },

      // theme('colors.indigo-dark')
      'indigo-dark': '#202e78',
    }
  }
}

扩展默认颜色

正如主题文档中所述，如果您想扩展默认的调色板，而不是覆盖它，您可以使用您的 tailwind.config.js 文件中的 theme.extend.colors 部分来实现。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'regal-blue': '#243c5a',
      }
    }
  }
}

这将生成像 bg-regal-blue 这样的类，除了所有 Tailwind 的默认颜色。

这些扩展是深度合并的，所以如果您想在 Tailwind 的默认颜色中增加一个额外的阴影，您可以这样做：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          450: '#5F99F7'
        },
      }
    }
  }
}

这将增加像 bg-blue-450 这样的类，而不会失去像 bg-blue-400 或 bg-blue-500 这样的现有的类。

禁用一个默认颜色

如果您想禁用一个默认颜色，因为您没有在项目中使用它，最简单的方法是建立一个新的调色板，不包括您想禁用的颜色。

例如：这个 tailwind.config.js 文件不包括 teal, orange 和 pink，但包括其余的默认颜色。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      black: '#000',
      white: '#fff',
      gray: colors.coolGray,
      red: colors.red,
      yellow: colors.amber,
      blue: colors.blue,
      pink: colors.pink,
    }
  }
}

另外，您也可以不动调色板，依靠 tree-shaking 未使用的样式来删除您不使用的颜色。

为您的颜色命名

Tailwind 使用字面的颜色名称*(如红色，绿色等)和一个默认的数字比例(其中50为浅色，900为深色)*。这对大多数项目来说是相当实用的，但也有充分的理由使用其他的命名惯例。

例如，如果您正在做一个需要支持多个主题的项目，那么使用 primary 和 secondary 这样更抽象的名称可能是有意义的。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: '#5c6ac4',
      secondary: '#ecc94b',
      // ...
    }
  }
}

您可以像我们上面那样明确地配置这些颜色，也可以从我们完整的调色板中调入颜色，并对给他们起个别名。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      primary: colors.indigo,
      secondary: colors.yellow,
      neutral: colors.gray,
    }
  }
}

您甚至可以使用 CSS 自定义属性（变量）来定义这些颜色，以便于在客户端切换主题。

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      primary: 'var(--color-primary)',
      secondary: 'var(--color-secondary)',
      // ...
    }
  }
}
/* In your CSS */
:root {
  --color-primary: #5c6ac4;
  --color-secondary: #ecc94b;
  /* ... */
}

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

生成颜色

我们常见的一个问题是"如何生成自己自定义颜色的 50-900 种色调？"。

坏消息是，颜色是复杂的，尽管尝试了几十个不同的工具，我们还没有找到一个能很好地生成这种调色板的工具。我们手工挑选了所有 Tailwind 的默认颜色，用眼睛仔细地平衡它们，并在实际设计中测试它们，以确保我们对它们感到满意。

调色板参考

当您把 tailwindcss/colors 导入到您的 tailwind.config.js 文件中时，这是所有可用颜色的列表。

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    colors: {
      // Build your palette here
      gray: colors.trueGray,
      red: colors.red,
      blue: colors.lightBlue,
      yellow: colors.amber,
    }
  }
}

虽然每种颜色都有一个特定的名称，但我们鼓励您在自己的项目中按照自己的喜好给它们起别名。

在这里插入图片描述

3. 定制间距

为您的项目定制默认间距和大小比例。

py,px是padding的竖直方向和左右方向的值。

在您的 tailwind.config.js 文件的 theme 部分使用 spacing 键来定制 Tailwind 的默认间距/大小比例。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      '1': '8px',
      '2': '12px',
      '3': '16px',
      '4': '24px',
      '5': '32px',
      '6': '48px',
    }
  }
}

默认情况下，间距比例由 padding、 margin、 width、 height、 maxHeight、 gap、 inset、 space 和 translate 核心插件继承。

扩展默认的间距比例

正如主题文档中所描述的那样，如果您想扩展默认的间距，您可以使用您的 tailwind.config.js 文件中的 theme.extend.spacing 部分来实现。

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      spacing: {
        '13': '3.25rem',
        '15': '3.75rem',
        '128': '32rem',
        '144': '36rem',
      }
    }
  }
}

这将生成像 p-13、m-15 和 h-128 这样的类，除了所有 Tailwind 的默认间距/大小功能类。

覆盖默认间距比例

正如主题文档中所描述的，如果您想覆盖默认的间距，您可以使用您的 tailwind.config.js 文件中的 theme.spacing 部分来实现。

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      sm: '8px',
      md: '12px',
      lg: '16px',
      xl: '24px',
    }
  }
}

这将禁用 Tailwind 的默认间距比例，并生成像 p-sm、m-md、w-lg 和 h-xl 这样的类。

默认间距比例

默认情况下，Tailwind 包括一个丰富和全面的数字间隔比例。这些值是成比例的，所以 16 是 8 的两倍。一个间距单位等于 0.25rem，在通用浏览器中默认为 4px。

在这里插入图片描述

4. 配置变体

配置您的项目中启用哪些功能变体。

概述

tailwind.config.js 文件中的 variants 部分是您控制每个核心插件应该启用哪些变体的地方。

// tailwind.config.js
module.exports = {
  variants: {
    extend: {
      backgroundColor: ['active'],
      // ...
      borderColor: ['focus-visible', 'first'],
      // ...
      textColor: ['visited'],
    }
  },
}

每个属性都是一个核心插件名称，指向一个要为该插件生成的变体数组。

以下是支持的开箱即用的变体：

变体	描述
`responsive`	Responsive variants like `sm`, `md`, `lg`, and `xl`.
`dark`	Targets dark mode.
`motion-safe`	Targets the `prefers-reduced-motion: no-preference` media query.
`motion-reduce`	Targets the `prefers-reduced-motion: reduce` media query.
`first`	Targets the `first-child` pseudo-class.
`last`	Targets the `last-child` pseudo-class.
`odd`	Targets the `odd-child` pseudo-class.
`even`	Targets the `even-child` pseudo-class.
`visited`	Targets the `visited` pseudo-class.
`checked`	Targets the `checked` pseudo-class.
`group-hover`	Targets an element when a marked parent matches the `hover` pseudo-class.
`group-focus`	Targets an element when a marked parent matches the `focus` pseudo-class.
`focus-within`	Targets the `focus-within` pseudo-class.
`hover`	Targets the `hover` pseudo-class.
`focus`	Targets the `focus` pseudo-class.
`focus-visible`	Targets the `focus-visible` pseudo-class.
`active`	Targets the `active` pseudo-class.
`disabled`	Targets the `disabled` pseudo-class.

关于变体如何工作的更多信息，请阅读我们的文档响应式变体、深色模式变体和悬停、焦点和其他状态变体。

启用额外变体

如果您想在默认值之外为插件启用额外的变体，您可以使用 extend 关键字来配置您的变体，类似于您如何在 theme 部分使用 extend。

// tailwind.config.js
module.exports = {
  variants: {
    // The 'active' variant will be generated in addition to the defaults
    extend: {
      backgroundColor: ['active']
    }
  },
}

因为变体的顺序很重要，在 extend 键下添加的任何变体都会使用合理的默认变体顺序自动为您排序。如果有必要，您可以使用 variantOrder 选项自定义这个顺序。

覆盖默认变体

任何直接在 variants 键下配置的变体将覆盖该插件的默认变体。

// tailwind.config.js
module.exports = {
  variants: {
    // Only 'active' variants will be generated
    backgroundColor: ['active'],
  },
}

当覆盖默认变体时，确保您总是指定所有您想启用的变体，而不仅仅是您想添加的新变体。

为变体排序

需要注意的是，当覆盖变体时，变体会按照您指定的顺序生成，因此列表末尾的变体将优先于列表开头的变体。

例如，在这里，focus 变体对 backgroundColor 功能类具有最高优先级，但 hover 变体对 borderColor 功能类具有最高优先级。

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['hover', 'focus'],
    borderColor: ['focus', 'hover'],
  },
}
/* Generated CSS */

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

.border-black { border-color: #000 }
.border-white { border-color: #fff }
/* ... */

.focus\:border-black:focus { border-color: #000 }
.focus\:border-white:focus { border-color: #fff }
/* ... */

.hover\:border-black:hover { border-color: #000 }
.hover\:border-white:hover { border-color: #fff }
/* ... */

这意味着，给定以下HTML：

<input class="focus:bg-white hover:bg-black focus:border-white hover:border-black">

…如果输入框同时悬停和聚焦，背景将是白色的，但边框将是黑色的。

作为终端用户，这样按顺序生成变体能给您带来最大的灵活性，但它也是一个利器，如果您不小心，可能会产生意想不到的后果。我们建议启用额外的变体，而不是尽可能地覆盖默认值，并且只把这个功能作为一个逃生通道。

特殊变体

Responsive

响应式

responsive 变体在 Tailwind 中是一个特殊的情况，并且不会受到您在变体配置中列出的顺序的影响。

这是因为 responsive 变体会自动与其他变体堆叠在一起，这意味着如果您为一个功能指定了 responsive 和 hover 变体，Tailwind 也会生成 responsive hover 变体。

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['responsive', 'hover'],
    borderColor: ['responsive', 'focus'],
  },
}

无论 responsive 出现在您的 variants 列表中的哪个位置，响应式变体都会被归为一组，并默认插入到您的样式表的最后，以避免特定性问题。

如果您出于任何原因想定制这种行为，您可以使用 @tailwind screens 指令来指定响应的变体应该插入的位置。

Dark, motion-safe, and motion-reduce

dark、motion-safe 和 motion-reduce 变体也会与其他变体叠加，但与 responsive 不同的是，它们叠加在同一个 “slot” 中，所以您可以将它们与 responsive 和简单状态变体结合起来，但不能相互结合。

这些变体的顺序相对于他们相互之间来说很重要，但相对于其他变体来说不重要。几乎无法想象到这些变体在实践中会相互冲突的情况，所以无论如何，这最终都不是问题。

您可以在您的 variants 配置中以任何顺序包含这些变种，而且永远不会注意到区别。

默认

您可以使用特殊的 DEFAULT 变体来控制相对于其他变体而言，一个功能的普通、无前缀的版本生成的地方。

这是一个高级特性，只有当您有一个自定义的变体（比如下面例子中的 children），它的优先级应该比普通版本的功能低时才会真正有用。

// tailwind.config.js
module.exports = {
  variants: {
    backgroundColor: ['children', 'DEFAULT', 'hover', 'focus'],
  },
}
/* Generated CSS */

.children\:bg-black > * { background-color: #000; }
.children\:bg-white > * { background-color: #fff; }

.bg-black { background-color: #000 }
.bg-white { background-color: #fff }
/* ... */

.hover\:bg-black:hover { background-color: #000 }
.hover\:bg-white:hover { background-color: #fff }
/* ... */

.focus\:bg-black:focus { background-color: #000 }
.focus\:bg-white:focus { background-color: #fff }
/* ... */

在变体插件文档中了解更多关于创建自定义变体的信息。

使用自定义变体

如果您编写或安装了一个插件，这个插件增加了一个新的变体，您可以通过在您的变体配置中加入它来启用这个变体，就像它是一个内置变体一样。

例如，tailwindcss-interaction-variants 插件增加了一个 group-disabled 变体(其中之一)。

// tailwind.config.js
{
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'group-disabled'],
  },
  plugins: [
    require('tailwindcss-interaction-variants')(),
  ],
}

在变体插件文档中了解更多关于创建自定义变体的信息。

给自定义变体排序

如果您想为一个自定义变量指定一个默认的排序位置，覆盖您的 variantOrder 来包含自定义变体。

// tailwind.config.js
module.exports = {
  // ...
  variantOrder: [
    'first',
    'last',
    'odd',
    'even',
    'visited',
    'checked',
    'group-hover',
    'group-focus',
    'focus-within',
    'hover',
    'focus',
    'focus-visible',
    'active',
    'group-disabled', // Custom variant
    'disabled',
  ],
  variants: {
    extend: {
      backgroundColor: ['group-disabled'],
    }
  }
}

您需要在覆盖 variantOrder 时指定整个列表，以包含任何自定义变体。

默认变体参考

这里是一个 Tailwind 的默认变体配置的完整参考，当您想添加一个新的变体，同时保留默认值时，它会很有用。

// Default configuration
module.exports = {
  // ...
  variants: {
    accessibility: ['responsive', 'focus-within', 'focus'],
    alignContent: ['responsive'],
    alignItems: ['responsive'],
    alignSelf: ['responsive'],
    animation: ['responsive'],
    appearance: ['responsive'],
    backgroundAttachment: ['responsive'],
    backgroundClip: ['responsive'],
    backgroundColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundImage: ['responsive'],
    backgroundOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    backgroundPosition: ['responsive'],
    backgroundRepeat: ['responsive'],
    backgroundSize: ['responsive'],
    borderCollapse: ['responsive'],
    borderColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    borderRadius: ['responsive'],
    borderStyle: ['responsive'],
    borderWidth: ['responsive'],
    boxShadow: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    boxSizing: ['responsive'],
    clear: ['responsive'],
    container: ['responsive'],
    cursor: ['responsive'],
    display: ['responsive'],
    divideColor: ['responsive', 'dark'],
    divideOpacity: ['responsive'],
    divideStyle: ['responsive'],
    divideWidth: ['responsive'],
    fill: ['responsive'],
    flex: ['responsive'],
    flexDirection: ['responsive'],
    flexGrow: ['responsive'],
    flexShrink: ['responsive'],
    flexWrap: ['responsive'],
    float: ['responsive'],
    fontFamily: ['responsive'],
    fontSize: ['responsive'],
    fontSmoothing: ['responsive'],
    fontStyle: ['responsive'],
    fontVariantNumeric: ['responsive'],
    fontWeight: ['responsive'],
    gap: ['responsive'],
    gradientColorStops: ['responsive', 'dark', 'hover', 'focus'],
    gridAutoColumns: ['responsive'],
    gridAutoFlow: ['responsive'],
    gridAutoRows: ['responsive'],
    gridColumn: ['responsive'],
    gridColumnEnd: ['responsive'],
    gridColumnStart: ['responsive'],
    gridRow: ['responsive'],
    gridRowEnd: ['responsive'],
    gridRowStart: ['responsive'],
    gridTemplateColumns: ['responsive'],
    gridTemplateRows: ['responsive'],
    height: ['responsive'],
    inset: ['responsive'],
    justifyContent: ['responsive'],
    justifyItems: ['responsive'],
    justifySelf: ['responsive'],
    letterSpacing: ['responsive'],
    lineHeight: ['responsive'],
    listStylePosition: ['responsive'],
    listStyleType: ['responsive'],
    margin: ['responsive'],
    maxHeight: ['responsive'],
    maxWidth: ['responsive'],
    minHeight: ['responsive'],
    minWidth: ['responsive'],
    objectFit: ['responsive'],
    objectPosition: ['responsive'],
    opacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    order: ['responsive'],
    outline: ['responsive', 'focus-within', 'focus'],
    overflow: ['responsive'],
    overscrollBehavior: ['responsive'],
    padding: ['responsive'],
    placeContent: ['responsive'],
    placeItems: ['responsive'],
    placeSelf: ['responsive'],
    placeholderColor: ['responsive', 'dark', 'focus'],
    placeholderOpacity: ['responsive', 'focus'],
    pointerEvents: ['responsive'],
    position: ['responsive'],
    resize: ['responsive'],
    ringColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'],
    ringOffsetWidth: ['responsive', 'focus-within', 'focus'],
    ringOpacity: ['responsive', 'focus-within', 'focus'],
    ringWidth: ['responsive', 'focus-within', 'focus'],
    rotate: ['responsive', 'hover', 'focus'],
    scale: ['responsive', 'hover', 'focus'],
    skew: ['responsive', 'hover', 'focus'],
    space: ['responsive'],
    stroke: ['responsive'],
    strokeWidth: ['responsive'],
    tableLayout: ['responsive'],
    textAlign: ['responsive'],
    textColor: ['responsive', 'dark', 'group-hover', 'focus-within', 'hover', 'focus'],
    textDecoration: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOpacity: ['responsive', 'group-hover', 'focus-within', 'hover', 'focus'],
    textOverflow: ['responsive'],
    textTransform: ['responsive'],
    transform: ['responsive'],
    transformOrigin: ['responsive'],
    transitionDelay: ['responsive'],
    transitionDuration: ['responsive'],
    transitionProperty: ['responsive'],
    transitionTimingFunction: ['responsive'],
    translate: ['responsive', 'hover', 'focus'],
    userSelect: ['responsive'],
    verticalAlign: ['responsive'],
    visibility: ['responsive'],
    whitespace: ['responsive'],
    width: ['responsive'],
    wordBreak: ['responsive'],
    zIndex: ['responsive', 'focus-within', 'focus']
  }
}

华为开发者联盟HarmonyOS专区

鸿蒙生态一站式服务平台。

更多推荐

【grafana】使用教程

华为开发者联盟HarmonyOS专区

【PX4-AutoPilot教程-开发环境】使用VMware虚拟机安装Ubuntu系统并搭建PX4开发环境（ROS+mavros+jMAVSim+gazebo+QGC+QT）

学习PX4开发需要先配置好开发环境，对于新手推荐使用VMware虚拟机搭建Ubuntu系统，并下载PX4源码，配置好编译环境和工具链（ROS操作系统+mavros通信包+jMAVSim仿真+gazebo仿真+QGC地面站+QT开发平台）。教程中使用的是Ubuntu18.04系统（官方推荐使用版本），PX4固件版本为v1.13.0，飞控板为pixhawk2.4.8版本。