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:

npx @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.