Skip to main content
This guide assumes that you have already setup React and Tailwind CSS in your Astro app. If you haven’t, please follow the Astro, Astro React, and Tailwind CSS guides.

​
Install Subframe

Run the following command in the root of your repository to install Subframe and configure your project: 
bash npm npx @subframe/cli@latest init  bash yarn yarn dlx @subframe/cli@latest init  bash pnpm pnpx     @subframe/cli@latest init  bash bun bunx @subframe/cli@latest init

​
Configure Astro to use 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"]

}

​
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.