Logo Windi CSS

Границы

Закругленная граница

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

none
sm
default
md
lg
xl
2xl
3xl
4xl
1/2
full
CSS
interpret
.rounded-3xl {
  border-radius: 1.5rem;
}
Персонализация
windi.config.js
export default {
  theme: {
    borderRadius: {
      none: '0',
      sm: '0.125rem',
      DEFAULT: '4px',
      md: '0.375rem',
      lg: '0.5rem',
      full: '9999px',
      large: '12px',
    },
  },
}

Толщина границы

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

default
0
1
2
3
4
5
CSS
interpret
.border {
  border-width: 1px;
}
Персонализация
windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      none: '0',
      sm: '2px',
    },
  },
}

Цвет границы

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

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.border-gray-500 {
  --tw-border-opacity: 1;
  border-color: rgba(107, 114, 128, var(--tw-border-opacity));
}
Персонализация

Вы можете настроить цветовую палитру, отредактировав раздел theme.colors в файле windi.config.js, или настроить только цвета границ, используя раздел theme.borderColor.

windi.config.js
export default {
  theme: {
    borderColor: theme => ({
      ...theme('colors'),
      DEFAULT: theme('colors.gray.300', 'currentColor'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Непрозрачность границы

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

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
.border-opacity-50 {
  --tw-border-opacity: 0.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      borderOpacity: {
        light: '0.1',
      },
    },
  },
}

Стиль границы

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

solid
dashed
dotted
double
none
CSS
.border-solid {
  border-style: solid;
}

Разделить ширину

Утилиты для управления шириной границы между элементами.

Разделить Y

default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}

Разделить X

default
reverse
2
4
6
8
10
12
14
16
18
20
CSS
.divide-x > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-x-reverse: 0;
  border-right-width: calc(1px * var(--tw-divide-x-reverse));
  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
}
Персонализация

Шкала ширины разделения по умолчанию наследует свои значения из шкалы borderWidth, поэтому, если вы хотите настроить свои значения для ширины границы и ширины разделения вместе, используйте раздел theme.borderWidth в файле windi.config.js.

windi.config.js
export default {
  theme: {
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

Чтобы настроить только значения ширины разделения, используйте раздел theme.divideWidth в файле windi.config.js.

windi.config.js
export default {
  theme: {
    divideWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
  },
}

Разделить цвет

Утилиты для управления цветом границы между элементами.

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.divide-gray-500 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(107, 114, 128, var(--tw-divide-opacity));
}
Персонализация
windi.config.js
export default {
  theme: {
    divideColor: theme => ({
      ...theme('borderColors'),
      primary: '#3490dc',
      secondary: '#ffed4a',
      danger: '#e3342f',
    }),
  },
}

Разделить непрозрачность

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

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 0.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      divideOpacity: {
        10: '0.1',
        20: '0.2',
        95: '0.95',
      },
    },
  },
}

Разделить стиль

Утилиты для управления стилем границы между элементами.

solid
dashed
dotted
double
none
CSS
.divide-dashed > :not([hidden]) ~ :not([hidden]) {
  border-style: dashed;
}

Ширина кольца

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

default
inset
0
1
2
4
6
8
CSS
.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  -webkit-box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      ringWidth: {
        DEFAULT: '2px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

Цвет кольца

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

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.ring-gray-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgba(107, 114, 128, var(--tw-ring-opacity));
}
Персонализация
windi.config.js
const colors = require('windicss/colors')

export default {
  theme: {
    ringColor: {
      white: colors.white,
      pink: colors.fuchsia,
    },
  },
}

Непрозрачность кольца

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

0
5
10
20
25
30
40
50
60
70
75
80
90
95
100
CSS
.ring-opacity-50 {
  --tw-ring-opacity: 0.5;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      ringOpacity: {
        15: '0.15',
        35: '0.35',
        65: '0.65',
      },
    },
  },
}

Ширина смещения кольца

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

0
1
2
4
6
8
10
12
14
16
20
CSS
.ring-offset-2 {
  --tw-ring-offset-width: 2px;
}
Персонализация
windi.config.js
export default {
  theme: {
    extend: {
      ringOffsetWidth: {
        3: '3px',
        6: '6px',
        10: '10px',
      },
    },
  },
}

Цвет смещения кольца

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

transparent
current
gray-500
red-500
yellow-500
blue-500
green-500
CSS
.ring-offset-gray-500 {
  --tw-ring-offset-opacity: 1;
  --tw-ring-offset-color: rgba(107, 114, 128, var(--tw-ring-offset-opacity));
}
Персонализация
windi.config.js
const colors = require('windicss/colors')

export default {
  theme: {
    ringOffsetColor: {
      white: colors.white,
      pink: colors.fuchsia,
    },
  },
}