Как использовать медиазапросы в пользовательском css в Tailwind 4?

Question

[Сергей delphinpro]

В предыдущей версии была директива @screen, можно было легко писать

@screen(xl) {
  стили
}

В последней версии такой директивы нет.

Суть проблемы:

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

.block {
  --width1: 1em;
  --width2: 2em;

  .block-inner1 {
    width: var(--width1);
  }
  .block-inner2 {
    width: var(--width2);
  }

  @screen(xl) {
    --width1: 3em;
    --width2: 5em;
  }
}

В текущей вариации я вижу только такое использование:

.block {
  --width1-sm: 1em;
  --width2-sm: 2em;

  --width1-xl: 3em;
  --width2-xl: 5em;

  .block-inner1 {
    @apply
    w-[--width1-sm]
    xl:w-[--width1-xl]
    ;
  }
  .block-inner2 {
    @apply
    w-[--width2-sm]
    xl:w-[--width2-xl]
    ;
  }
}

Ну или использование глобальных переменных в директиве @theme и создание утилитарных классов через @utility, что всё равно приведет к написанию подобной портянки.

Конечно можно писать чистые css media с указанием значений.

@media (width > 768px) { --width1: 3em; }

Но и тут налицо неудобство в использовании значений для точек переключения вместо мнемоник (sm, xl и т.п.)

Ищу варианты использования медиазапросов в своём css коде, либо может есть вариант изменять значения непосредственно у css переменных?
Условно, типа такого:

.block {
--width: 1em;
@apply xl:--width-[4em];
}

Comments

[Антон Антон]

кажется, тут непонимание utility-first подхода и попытка смешать его с чем-то типа БЭМ.
я бы сделал переменные в теме и вместо указания .block у родителя и .block-innerХ у детей сразу писал бы у детей в классах вместо block-innerX w-width1-sm xl:w-widthX-xl
выделение стилей в отдельные классы может потребоваться, но при нормальном разбиении на компоненты очень редко.
ну и надо расширить пример, потому что тут пока вообще не понятно, либо зачем переменные, либо зачем tailwind с его apply

[Сергей delphinpro]

Антон Антон, утилитарный подход я понимаю. БЭМ здесь не используется.
в примерах я показал использование директивы apply просто чтобы написать все рядом. С тем же успехом все эти apply пишутся прямо в разметке в виде классов. Не суть.

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

Раньше я бы сделал так

.block {
  --width1: 1em;

  @screen(lg) {
    --width1: 3em;
  }

  @screen(xl) {
    --width1: 7em;
  }
}

Как это сделать в четверке, я не понимаю. И об этом спрашиваю.

Answer 1

[Антон Антон]

кажется, можно сделать примерно так:
https://play.tailwindcss.com/i1ix27ccg5

@import "tailwindcss";

@theme {
  --width1: 1em;
}

@layer components {
  .my {
    @apply bg-green-200;

    @media (width >= theme(--breakpoint-md)) {
      --width1: 3em;
    }

    @media (width >= theme(--breakpoint-xl)) {
      --width1: 7em;
    }
  }
}

Comments

[Сергей delphinpro]

Благодарю.