AwsmBuff Posts

AwsmBuff

•Created by AwsmBuff on 3/7/2024 in #help

TailwindCSS: Class-Strings build with variables

Since TailwindCSS does not support classes with variables (like I used before with twind), how would you color 10 elements with a Tailwind class but the color is retrieved from a list? For example: dark:bg-${color}-200 but the color is different for every button. I would use much more classes like text-color etc. so it was the easiest to do it with a variable that changes with every element.

12 replies

DDeno

•Created by AwsmBuff on 7/18/2023 in #help

Signal Arrays do not work with HTML-Elements?

I tried to debug my problem for a while until I realized that this works:

import { useSignal } from "@preact/signals";

export default function Island() {
  const activated = useSignal(false);
  return (
    <button
      onClick={() => {
        activated.value = !activated.value;
      }}
      class={activated.value ? "bg-blue-800" : "bg-red-800"}
    >
      Test
    </button>
  );
}

import { useSignal } from "@preact/signals";

export default function Island() {
  const activated = useSignal(false);
  return (
    <button
      onClick={() => {
        activated.value = !activated.value;
      }}
      class={activated.value ? "bg-blue-800" : "bg-red-800"}
    >
      Test
    </button>
  );
}

but this does not:

import { useSignal } from "@preact/signals";

export default function Island() {
  const activated = useSignal([false]);
  return (
    <button
      onClick={() => {
        activated.value[0] = !activated.value[0];
      }}
      class={activated.value[0] ? "bg-blue-800" : "bg-red-800"}
    >
      Test
    </button>
  );
}

import { useSignal } from "@preact/signals";

export default function Island() {
  const activated = useSignal([false]);
  return (
    <button
      onClick={() => {
        activated.value[0] = !activated.value[0];
      }}
      class={activated.value[0] ? "bg-blue-800" : "bg-red-800"}
    >
      Test
    </button>
  );
}

17 replies

DDeno

•Created by AwsmBuff on 4/22/2023 in #help

How to display data from a Handler on every page?

Hi, I am having the problem, that the PageProps are not accessible in the _app.tsx and I have not figured out how to access PageProps in a component (in the /components folder). If I give a component the PageProps parameter, Deno complains that I am not giving an argument in the calling file. Can someone help me with that? It is probably something that is done all the time in a project. In the end I just want to get something with a handler from a server and then display it in a component but as I stated, I do not know how to access that because I want to display it on every page using the app-wrapper. TL;DR: I want to make a HTTP Request and display the response on every page. How?

1 replies

DDeno

•Created by AwsmBuff on 3/16/2023 in #help

Fresh: How to make Styles global with twindv1?

With the new twind-Plugin (v1), does anybody know how to do global styles? It was preflight before, but it does not seem to work like that anymore. I am trying for quite some time now to use injectGlobal and searching about both versions (through repos, documentations and forums) but I can not make it. Does anyone have an example or a suggestion do it in another way? 🥺 A solution would safe me hours of trial-and-error.

2 replies