Conditional tailwind css using signal
Hi there,
I am looking for a way to apply a tailwind css style to a div when the signal is set to true.
Is that possible?
4 Replies
It is
You can use solid's built in classList, or you could use clsx or classnames, and conditionally add classes
<div class={clsx('flex items-center', useTw && 'bg-red-500')}
useTw would be a signal
or something reactive
Classlist usage is documented
https://www.solidjs.com/docs/latest/api#classlist
SolidJS
Solid is a purely reactive library. It was designed from the ground up with a reactive core. It's influenced by reactive principles developed by previous libraries.
I don't think tailwind recommends using tailwind like this but this is what I do:
class={
whitespace-pre-wrap overflow-scroll h-full px-20 py-2 overflow-x-hidden ${
seeAlsoText() ? 'w-2/3' : 'w-full'
}}This is completely fine with tailwind - it's just that using template strings like this is not that ergonomic when something is truthy or falsey, and become cumbersome if used a lot.