Topics

SolidJS•13mo ago

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

high1•13mo ago

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

high1•13mo ago

Classlist usage is documented https://www.solidjs.com/docs/latest/api#classlist

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.

Grahf•13mo ago

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'
        }

}

high1•13mo ago

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.

Solid is a declarative reactive Javascript library for creating user interfaces.

11KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

problem with "use:" and custom directives in tsxI copied the custom directive from the docs ``` import { onCleanup } from 'solid-js'; export defau Uncaught TypeError: _tmpl$6 is not a functionI'm trying to create a library that exposes a web component that's implemented internally with Solid CreateResource Not complete Fetch (promise) when page first loads, but completes when VsCode SavesHey I'm severely confused about what's happening under the hood for npm run dev. When I'm using crea HTTP trip, custom backendI was reading about this main idea of SSR, that it skips one step by fetching data and sending it fr force a dom update when updating a signal before the rest of the onMount functionin this code `csvColumns` is dependant on setData, how can I force the render update? ```jsx c Add a ref and make it also exposableTo create a ref, I can write: ```jsx <input ref={ref} /> ``` In order to expose it to a parent compo Running tests in docker fails, but works outside of dockerI am attempting to set up a Docker development environment for a SolidJS application using Docker Co Best way to implement a dialog in Solid.jsI'm using Solid.js for a library and need to implement a dialog to capture some user input (say, a s Cannot find package 'solid-start-node' imported from 'solid-start/bin.cjs'I created a new project with `npm init solid@latest`, with the options [with-websocket], [ssr], [typ Nested routing not workingOne video is with npm, the other with pnpm Both not working, what am I doing wrong? cat.tsx ```tsx