SolidStart

Install and configure SolidStart.

Create project

Start by creating a new SolidJS project using solid-start:

npm init solid@latest

When asked make sure to use the template with-tailwindcss:

Project Name? my-app
Is this a Solid-Start project? yes
Which template would you like to use? with-tailwindcss
Use TypeScript? yes

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.cjs
Configure the import alias for the src directory: ~/*

Fonts

I use Inter as the default font. Inter is not required. You can replace it with any other font.

Here's how I configure Inter for SolidStart:

1. Install the fontsource package:

npm install @fontsource/inter

2. Import the font in the app.tsx:

import { Suspense } from "solid-js"
 
import { Router } from "@solidjs/router"
import { FileRoutes } from "@solidjs/start/router"
 
import Nav from "~/components/Nav"
 
import "@fontsource/inter"
import "./app.css"
 
export default function App() {
  return (
    <Router
      root={(props) => (
        <>
          <Nav />
          <Suspense>{props.children}</Suspense>
        </>
      )}
    >
      <FileRoutes />
    </Router>
  )
}

1. Configure theme.extend.fontFamily in tailwind.config.cjs

const { fontFamily } = require("tailwindcss/defaultTheme")
 
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ["variant", [".dark &", '[data-kb-theme="dark"] &']],
  content: ["./src/**/*.{ts,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter", ...fontFamily.sans]
      }
    }
  }
  // ...
}

App structure

Here's how I structure my Solid apps. You can use this as a reference:

.
├── public
│   ├── favicon.ico
│   └── ...
├── src
│   ├── components
│   │   ├── ui
│   │   │   ├── button.tsx
│   │   │   ├── input.tsx
│   │   │   └── ...
│   │   ├── main-nav.tsx
│   │   ├── page-header.tsx
│   │   └── ...
│   ├── lib
│   │   └── utils.ts
│   ├── routes
│   │   ├── [...404].tsx
│   │   ├── index.tsx
│   │   └── ...
│   ├── app.css
│   ├── app.tsx
│   └── ...
├── app.config.ts
├── tailwind.config.cjs
└── ...

I place the UI components in the components/ui folder.
The rest of the components such as <PageHeader /> or <MainNav /> are placed in the components folder.
The lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.

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>
  )
}