Getting SolidJs and Vite set up

[guevarez30]

Having trouble getting daisyui to appear with SolidJs and Vite.

My tailwind config

import daisyui from "daisyui";
export default {
  plugins: [daisyui],
  content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  daisyui: {
    themes: ["light"],
  },
};

My vite config

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

export default defineConfig({
  plugins: [solidPlugin(), tailwindcss()],
  server: {
    port: 3000,
  },
  build: {
    target: "esnext",
  },
});

My index.jsx

import { render } from "solid-js/web";
import "./index.css";
import App from "./App";

render(() => <App />, document.getElementById("app"));

Following the vite tailwind installation guide v4 has me place a slightly different tailwind import.

@import "tailwindcss";

Now my app is successfully running tailwind, but I can not get the daisyui components to appear styled. Any suggestions ?

[saadeghi]

With Tailwind CSS 4, you don't need a tailwind.config.js file anymore.

Install daisyUI 5 beta and add it to CSS file:
https://v5.daisyui.com/docs/install/

There's also a Solid.js install guide:
https://v5.daisyui.com/docs/install/solid/

Let me know if you have any questions.