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.

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.