This guide assumes that you have already setup React and Tailwind CSS in your Vite app. If you haven’t, please follow the Vite and Tailwind CSS installation guides.

​
Install Subframe

Run the following command in the root of your repository to install Subframe and configure your project:

npx @subframe/cli@latest init

​
Configure Vite to use import aliases

  1. Configure the compilerOptions in the tsconfig.app.json file so Typescript understand your import aliases.
{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "./src/*"
            ]
        },
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true,
        "noUncheckedSideEffectImports": true+
    },
    "include": ["src"]
}
  1. Update vite.config.ts so Vite can resolve paths without error:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            "@/*": "./src/*"
        }
    }
})

​
Troubleshooting

If you run into any issues with the installation, refer to the manual installation guide for all of the steps needed to get Subframe working in your codebase.