Утилиты добавлены в v3.0 #

Мы добавили больше утилит в 3.0, и у всех утилит есть хорошая встроенная игровая площадка, попробуйте ее и получайте удовольствие.

1. Backface Visibility
2. Isolation
3. Mix Blend Mode
4. Shadow Color
5. Background Blend Mode
6. Background Origin
7. Box Decoration Break
8. Caret Color
9. Caret Opacity
10. Image Rendering
11. List Style Type
12. Stroke DashArray
13. Stroke DashOffset
14. Stroke LineCap
15. Stroke LineJoin
16. Hyphens
17. Tab Size
18. Text Decoration Color
19. Text Decoration Opacity
20. Text Decoration Length
21. Text Decoration Offset
22. Text Indent
23. Text Stroke Width
24. Text Stroke Color
25. Text Shadow
26. Writing Mode
27. Writing Orientation
28. Table Empty Cells
29. Table Caption Side
30. Transform Style
31. Rotate X
32. Rotate Y
33. Rotate Z
34. Scale Z
35. Translate Z
36. Perspective
37. Perspective Origin
38. Filter
39. Backdrop Filter

Backface Visibility #

Утилита backface устанавливает, будет ли видна задняя грань элемента при повороте к пользователю.

Isolation #

Утилиты для управления тем, должен ли элемент явно создавать новый контекст стекирования. Эти утилиты особенно полезны при использовании вместе с mix-blend-mode и z-index.

Mix Blend Mode #

Утилиты для управления тем, как элемент должен сливаться с фоном.

Box Shadow Color #

export default {
  theme: {
    boxShadowColor: {
      gray: '#1c1c1e',
    },
  },
}

Background Blend Mode #

Утилиты для управления тем, как фоновое изображение элемента должно сливаться с его цветом фона.

Background Origin #

Утилиты для управления источником фона фонового изображения элемента.

Box Decoration Break #

Утилиты для управления отображением фрагментов элементов в нескольких строках, столбцах или страницах.

Caret Color #

Утилиты для управления цветом текста вставки.

export default {
  theme: {
    caretColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Caret Opacity #

Утилиты для управления непрозрачностью цвета каретки элемента.

export default {
  theme: {
    extend: {
      caretOpacity: {
        light: '0.1',
      },
    },
  },
}

Image Rendering #

Утилита image-render определяет, как браузер должен отображать изображение, если оно масштабируется вверх или вниз по сравнению с его исходными размерами. По умолчанию каждый браузер будет пытаться применить псевдоним к этому масштабированному изображению, чтобы предотвратить искажение, но иногда это может быть проблемой, если мы хотим, чтобы изображение сохраняло исходную пиксельную форму.

List Style Type #

Утилиты для управления стилем маркера/номера списка.

export default {
  theme: {
    listStyleType: {
      none: 'none',
      disc: 'disc',
      decimal: 'decimal',
      square: 'square',
      roman: 'upper-roman',
    },
  },
}

Stroke DashArray #

Утилита stroke-dash - это служебная программа для презентаций, определяющая образец штрихов и пробелов, используемых для рисования контура фигуры.

Stroke DashOffset #

Утилита stroke-offset - это служебная программа представления, определяющая смещение при отображении связанного массива штрихов.

Stroke LineCap #

Утилита stroke-cap - это служебная программа представления, определяющая форму, которая будет использоваться в конце открытых подпутей при их обводке.

Stroke LineJoin #

Утилита stroke-join - это служебная программа для представления, определяющая форму, которая будет использоваться в углах контуров при их обводке.

Hyphens #

Утилиты дефисов определяют, как слова должны быть расставлены через дефис, когда текст переносится на несколько строк. Он может полностью запретить расстановку переносов, переносить через дефис в заданных вручную точках текста или позволить браузеру автоматически вставлять переносы там, где это необходимо.

Tab Size #

Утилиты размера табуляции используются для настройки ширины символов табуляции (U+0009).

export default {
  theme: {
    tabSize: {
      sm: '2',
      md: '4',
      lg: '8',
    },
  },
}

Text Decoration #

Утилиты для управления оформлением текста.

Text Decoration Type #

Утилиты для управления типом оформления текста.

Text Decoration Color #

Утилиты для управления цветом оформления текста.

export default {
  theme: {
    textDecorationColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Decoration Opacity #

Утилиты для управления непрозрачностью цвета оформления элемента.

export default {
  theme: {
    extend: {
      textDecorationOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Text Decoration Length #

Утилиты для управления длиной оформления текста.

export default {
  theme: {
    extend: {
      textDecorationLength: {
        sm: '1px',
        md: '2px',
        lg: '4px',
      },
    },
  },
}

Text Decoration Offset #

Утилиты для управления смещением оформления текста.

export default {
  theme: {
    textDecorationOffset: {
      sm: '1px',
      md: '2px',
      lg: '4px',
    },
  },
}

Text Indent #

Утилиты для управления отступом текста.

export default {
  theme: {
    extend: {
      textIndent: {
        '4xl': '5rem',
        '5xl': '6rem',
      },
    },
  },
}

Text Stroke #

Утилиты для управления обводкой текстового элемента.

Text Stroke Width #

Утилиты для управления шириной обводки текста.

export default {
  theme: {
    extend: {
      textStrokeWidth: {
        'xl': '6',
        '2xl': '8',
      },
    },
  },
}

Text Stroke Color #

Утилиты для управления цветом обводки текста.

export default {
  theme: {
    textStrokeColor: {
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    },
  },
}

Text Shadow #

Утилиты для управления тенью текстового элемента.

export default {
  theme: {
    textShadow: {
      'DEFAULT': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', // If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility.
      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
      '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
    },
  },
}

Writing Mode #

Утилита writing-mode устанавливает, будут ли строки текста располагаться по горизонтали или вертикали, а также направление, в котором происходит прогресс блоков. При установке для всего документа он должен быть установлен в корневом элементе (элемент html для документов HTML).

Writing Orientation #

Утилита writing-orientation устанавливает ориентацию текстовых символов в строке. Это влияет только на текст в вертикальном режиме (когда writing-mode не horizontal-tb). Это полезно для управления отображением языков, использующих вертикальный сценарий, а также для создания заголовков вертикальных таблиц.

Table Caption Side #

Утилита caption помещает содержимое таблицы <caption> на указанную сторону. Значения относятся к режиму записи таблицы.

Table Empty Cells #

Утилита empty-cells устанавливает, появляются ли границы и фон вокруг ячеек <table>, которые не имеют видимого содержимого. Хорошим вариантом использования пустых ячеек может быть ситуация, когда вы можете не знать, будет ли таблица содержать пустые точки данных или нет, и вы решили их скрыть.

Transform Type #

Утилиты для управления поведением трансформации.

Transform Style #

Утилита в стиле преобразования устанавливает, будут ли дочерние элементы элемента располагаться в трехмерном пространстве или выровнены в плоскости элемента.

Rotate X #

Rotate Y #

Rotate Z #

Scale Z #

export default {
  theme: {
    scale: {
      half: '.5',
      full: '1',
    },
  },
}

Translate Z #

export default {
  theme: {
    extend: {
      spacing: {
        72: '18rem',
        84: '21rem',
        96: '24rem',
      },
    },
  },
}

export default {
  theme: {
    extend: {
      translate: {
        '1/7': '14.2857143%',
        '2/7': '28.5714286%',
        '3/7': '42.8571429%',
        '4/7': '57.1428571%',
        '5/7': '71.4285714%',
        '6/7': '85.7142857%',
      },
    },
  },
}

Perspective #

Утилита perspect определяет расстояние между плоскостью z=0 и пользователем, чтобы придать трехмерному позиционируемому элементу некоторую перспективу.

export default {
  theme: {
    extend: {
      perspective: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
    },
  },
}

Perspective Origin #

Утилита perspect-origin определяет позицию, на которую смотрит зритель. Он используется как точка схода утилитой perspect utility.

export default {
  theme: {
    extend: {
      perspectiveOrigin: {
        tb150: '150% 150%',
        tb200: '200% 200%',
      },
    },
  },
}

Filter #

Утилиты для включения и отключения фильтров на элементе.

Filter Blur #

export default {
  theme: {
    blur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Filter Brightness #

export default {
  theme: {
    brightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Contrast #

export default {
  theme: {
    contrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Filter Drop Shadow #

export default {
  theme: {
    dropShadow: {
      '3xl': 'drop-shadow(0 30px 30px rgba(0, 0, 0, 0.2))',
      '4xl': 'drop-shadow(0 40px 40px rgba(0, 0, 0, 0.3))',
    },
  },
}

Filter Grayscale #

export default {
  theme: {
    grayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

Filter Hue Rotate #

export default {
  theme: {
    hueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Filter Invert #

export default {
  theme: {
    invert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Filter Saturate #

export default {
  theme: {
    saturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Filter Sepia #

export default {
  theme: {
    sepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}

Backdrop Filter #

Утилиты для включения и отключения фоновых фильтров для элемента.

Backdrop Blur #

export default {
  theme: {
    backdropBlur: {
      '4xl': '72px',
      '5xl': '96px',
      '6xl': '128px',
    },
  },
}

Backdrop Brightness #

export default {
  theme: {
    backdropBrightness: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Contrast #

export default {
  theme: {
    backdropContrast: {
      sm: '50',
      md: '100',
      lg: '150',
    },
  },
}

Backdrop Grayscale #

export default {
  theme: {
    backdropGrayscale: {
      50: '0.5',
      80: '0.8',
    },
  },
}

Backdrop Hue Rotate #

export default {
  theme: {
    backdropHueRotate: {
      sm: '60',
      lg: '90',
      xl: '180',
    },
  },
}

Backdrop Invert #

export default {
  theme: {
    backdropInvert: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Opacity #

export default {
  theme: {
    backdropOpacity: {
      sm: '0.5',
      lg: '0.8',
    },
  },
}

Backdrop Saturate #

export default {
  theme: {
    backdropSaturate: {
      sm: '0.5',
      md: '1',
      lg: '1.5',
    },
  },
}

Backdrop Sepia #

export default {
  theme: {
    backdropSepia: {
      sm: '0.5',
      md: '0.8',
    },
  },
}