Roma Prokopets, вот источники для обучения:
• htmlacademy для прокачки навыков вёрстки с нуля
• MDN для справочной информации
• cssgridgarden интерактивная игра для обучения гридам
• flexboxfroggy интерактивная игра для обучения флексам

юзаю все перечисленное, или юзал раньше, здесь просто тонкий момент

background-size

Вообще оно есть на mdn

Тока ради бога не надо юзать сокращённую запись, она не для людей

нет, идея - говно, много повторяющихся стилей под которые надо писать миксины/функции

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse))
}

.space-x-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0px * var(--tw-space-x-reverse));
  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)))
}

[...]

.-space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(-0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(-0.125rem * var(--tw-space-y-reverse))
}

.-space-x-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.125rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.125rem * calc(1 - var(--tw-space-x-reverse)))
}

.-space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(-0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(-0.375rem * var(--tw-space-y-reverse))
}

.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)))
}

.-space-y-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(-0.625rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(-0.625rem * var(--tw-space-y-reverse))
}

.-space-x-2\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.625rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.625rem * calc(1 - var(--tw-space-x-reverse)))
}

.-space-y-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(-0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(-0.875rem * var(--tw-space-y-reverse))
}

.-space-x-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.875rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.875rem * calc(1 - var(--tw-space-x-reverse)))
}

так напиши лучше

я русским языком сказал - дай, билять, чеклист, базовых, билять, классов

ты и получил чеклист, он тебе не нравится

я получил повторяющуюся хуетень которую ещё нужно чистить

тем более без аннотаций

ты получил пункт - классы для отступов

читаешь документацию, собираешь пункты

то есть ещё и документацию втянул, вообще молодец

делаешь идеальный (еще один) фреймворк и радуешься жизни

это не цель

😐

Это жирный момент который надо искать в доке в первую очередь

Всем привет!) Подскажите, а можно ли с этой структурой как то сделать так, чтобы все переносимые flex элементы прижимались друг к другу? Сейчас они переносятся на половину контейнера

https://codepen.io/Arbuzzz/pen/YzNRRJX

как в css in js сделать .class+.class?