solid-jsx not working

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [solidPlugin(), mdx({ jsxImportSource: "solid-jsx" })],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";

import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [solidPlugin(), mdx({ jsxImportSource: "solid-jsx" })],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

createEffect(() => {
    document.querySelectorAll("pre code").forEach((el) => {
      console.log(el)
    });
  });

createEffect(() => {
    document.querySelectorAll("pre code").forEach((el) => {
      console.log(el)
    });
  });

import transformerAttributifyJsx from "@unocss/transformer-attributify-jsx";

import {
  defineConfig,
  presetAttributify,
  presetUno,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  transformers: [
    transformerAttributifyJsx(), 
  ],
});

import transformerAttributifyJsx from "@unocss/transformer-attributify-jsx";

import {
  defineConfig,
  presetAttributify,
  presetUno,
} from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetAttributify(),
  ],
  transformers: [
    transformerAttributifyJsx(), 
  ],
});

  <div bg-lime p-5 class="[&>p]:bg-red">
      <p> kek</p>
    </div>

  <div bg-lime p-5 class="[&>p]:bg-red">
      <p> kek</p>
    </div>

.custom-div {
  @apply text-center bg-red;
}

.custom-div {
  @apply text-center bg-red;
}

@layer base {
  .custom-div {
    @apply flex text-yellow-500;
  }
}

@layer base {
  .custom-div {
    @apply flex text-yellow-500;
  }
}