Tailwind CSS: есть ли способ настроить таргетинг на следующего брата или сестру?

У меня есть радиовход с надписью, как показано 9X_tailwind-css ниже. ввод скрыт, а метка используется для 9X_tailwind-css создания визуально привлекательного круга, по 9X_tailwind-css которому пользователь может щелкнуть.

Когда 9X_tailwind-css пользователь щелкает по метке ввода, проверяется. Я 9X_tailwind-css пытаюсь понять, как это сделать, чтобы придать 9X_tailwind-css этикетке другой стиль.

Этого можно добиться 9X_tailwind-css в чистом CSS с помощью селектора следующего 9X_tailwind-css родственника.

input[type="radio"]:checked + label { background-color: #bfb !important; border-color: #4c4 !important; }

Есть ли что-то подобное в tailwind.css, которое 9X_tailwind-css я мог бы использовать вместо этого?

11
0

tailwind-css
5
Общее количество ответов: 5

Ответ #1

Ответ на вопрос: Tailwind CSS: есть ли способ настроить таргетинг на следующего брата или сестру?

Вот complex variant, который я написал для этой цели (проверено 9X_tailwind-css с помощью tailwindcss 2.0.1)

// tailwind.config.js const plugin = require("tailwindcss/plugin"); const focusedSiblingPlugin = plugin(function ({ addVariant, e }) { addVariant("focused-sibling", ({ container }) => { container.walkRules((rule) => { rule.selector = `:focus + .focused-sibling\\:${rule.selector.slice(1)}`; }); }); }); module.exports = { // ... plugins: [focusedSiblingPlugin], variants: { extend: { backgroundColor: ["focused-sibling"], }, }, };

12
0

Ответ #2

Ответ на вопрос: Tailwind CSS: есть ли способ настроить таргетинг на следующего брата или сестру?

Для тех, кто хочет реализовать это, с момента 9X_tailwind-css введения режима JIT (Tailwind CSS v2.1 +) sibling selector variant доступен.

12
0

Ответ #3

Ответ на вопрос: Tailwind CSS: есть ли способ настроить таргетинг на следующего брата или сестру?

В настоящее время в Tailwind нет ничего 9X_tailwind-css встроенного. Ближайшим элементом будет Pseudo-Class Variants, у 9X_tailwind-css которого есть префикс "отмечен". Но 9X_tailwind-css это применимо только к самому радио. Чтобы 9X_tailwind-css настроить таргетинг на братьев и сестер, вам 9X_tailwind-css нужно написать свой собственный complex variant, а затем 9X_tailwind-css вы могли бы сделать что-то вроде

4
0

Ответ #4

Ответ на вопрос: Tailwind CSS: есть ли способ настроить таргетинг на следующего брата или сестру?

Мне было интересно то же самое, и, поскольку 9X_tailwind-css я создал свои собственные варианты с момента 9X_tailwind-css моего дебюта в Tailwind, я подумал, что 9X_tailwind-css могу создать для вас быстрый.

Моя проблема 9X_tailwind-css с предыдущими ответами заключается в том, что 9X_tailwind-css класс ориентирован на брата или сестру. Класс 9X_tailwind-css должен быть добавлен к первому элементу 9X_tailwind-css и использоваться как таковой:

Код для variant должен 9X_tailwind-css выглядеть примерно так:

const plugin = require("tailwindcss/plugin"); const nextOnChecked = plugin(function ({ addVariant, e }) { addVariant('nextOnChecked', ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { return `.${e(`nextOnChecked${separator}${className}`)}:checked + *`; }) }); }); module.exports = { variants: { extend:{ border: ['nextOnChecked'], backgroundColor: ['nextOnChecked'], }, }, plugins: [ nextOnChecked ], };

Эта часть .${e('nextOnChecked${separator}${className}')}:checked + * будет 9X_tailwind-css использоваться в контексте этого примера 9X_tailwind-css следующим образом:

.nextOnChecked\:bg-blue-500:checked + *{ background-color: ...; }

Именно так я создаю большинство 9X_tailwind-css своих вариантов - от модели DOM, которая 9X_tailwind-css изменяет состояние, до модели DOM, стили 9X_tailwind-css которой меняются.

1
0

Ответ #5

Ответ на вопрос: Tailwind CSS: есть ли способ настроить таргетинг на следующего брата или сестру?

В этой ситуации вы можете использовать групповое 9X_tailwind-css наведение.

https://tailwindcss.com/docs/hover-focus-and-other-states

1
0