Vite

Install and configure Vite.

Create project

Start by creating a new Vite project:

npm create vite@latest

When asked make sure to use Solid:

✔ Project name: ... vite-project
✔ Select a framework: › Solid
✔ Select a variant: › TypeScript

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies, then generate your tailwind.config.js and postcss.config.js files:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Edit tsconfig.json file

Add the following code to the tsconfig.json file to resolve paths:

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

Update vite.config.ts

Add the following code to the vite.config.ts so your app can resolve paths without error

# (so you can import "path" without error)
npm i -D @types/node

import path from "path"
 
import solid from 'vite-plugin-solid';
import { defineConfig } from "vite"
 
export default defineConfig({
  plugins: [solid()],
  resolve: {
    alias: {
      "~": path.resolve(__dirname, "./src")
    }
  }
})

Run the CLI

Run the solidui-cli init command to setup your project:

npx solidui-cli@latest init

Configure ui.config.json

You will be asked a few questions to configure ui.config.json:

Would you like to use TypeScript? (recommended) yes
Where is your global CSS file? src/App.css
Where is your tailwind.config.js located? tailwind.config.js
Configure the import alias for the src directory: ~/*

That's it

You can now start adding components to your project.

npx solidui-cli@latest add button

The command above will add the Button component to your project. You can then import it like this:

import { Button } from "~/components/ui/button"
 
export default function Home() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  )
}