daisyUI with Vite + Solidjs + Typescript

Photo by David Clode on Unsplash

daisyUI is a component library for UI development with html or JSX that uses tailwindcss for styling. I am using it for the UI for an app that I’m writing with solidjs.

At time of writing, winter 2023, the instructions in daisyUI’s installation steps for the vite+solidjs example don’t work out of the box for a solidJS app with typescript. Here are the things that I added in order to make it work.

The project that I added daisyUI to was created with the solidJS template for typescript:

npm create vite@latest my-app — — template solid-ts

Installation

install as devDependencies:

"autoprefixer": "^10.4.16",
"daisyui": "^3.9.3",
"postcss": "^8.4.31",
"tailwindcss": "^3.3.5",

install as regular dependency:

"daisyui": "^3.9.3",

These are the exact entries that were added to my package.json.

Update index.css

Replace all contents of ./src/index.css with this:

@tailwind base;
@tailwind components;
@tailwind utilities;

Add ./tailwind.config.js

module.exports = {                                                                                                                                     
  content: ['./src/**/*.{js,ts,jsx,tsx}'],                                                                                                                                                                                                                                                                                                      
  plugins: [require("daisyui")],                                                                                                        
};  

Add ./postcss.config.cjs

module.exports = {                                                                                                                                     
  plugins: [require('tailwindcss'), require('autoprefixer')],                                                                                                                                                                                                                                                                                   
};