Subframe works with any framework that uses Typescript, React, and Tailwind CSS.

This guide will walk through all of the steps needed to get Subframe working in your codebase.

For this example, we’ll assume you have a project with the following file structure:

my-app/
|-- src/
|   |-- main.tsx
|   `-- styles.css
|-- index.html
|-- package.json
`-- tsconfig.json

​
Set up Tailwind CSS

You can find more information on how to set up Tailwind CSS in the official Tailwind CSS documentation.

First, install Tailwind CSS, PostCSS and Autoprefixer in your project.

npm install -D tailwindcss@^3 postcss autoprefixer

Next, initialize your Tailwind CSS config:

npx tailwindcss init -p

This will create a tailwind.config.js file in your project root. The file structure should now look like this:

my-app/
|-- src/
|   |-- main.tsx
|   `-- styles.css
|-- index.html
|-- package.json
|-- tsconfig.json
|-- postcss.config.js
`-- tailwind.config.js

Update the tailwind.config.js file to include the src directory and any files we might use Tailwind CSS in.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
	"./index.html",
	"./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
	extend: {},
  },
  plugins: [],
  presets: []
}

We’re assuming you’ll sync your Subframe projects to somewhere inside your src/ directory. If not, you’ll need to adjust the content array in your tailwind.config.js file accordingly.

Finally, to include Tailwind CSS in your CSS, add the following to your src/styles.css file:

src/styles.css
@tailwind base;
@tailwind components;
@tailwind utilities;

And include ‘styles.css’ in your App:

src/main.tsx
import './styles.css';

​
Install Subframe

We strongly recommend using @subframe/cli to initialize your project. If for some reason that’s not possible or you are troubleshooting issues, you can follow the steps below.

​
Create a .subframe/sync.json file

This file contains Subframe configuration settings that are used when syncing components.

.subframe/sync.json
{
	"directory": "./src/ui",
	"importAlias": "@/ui/*",
	"projectId": "YOUR_PROJECT_ID"
}

You can find your project ID in your URL in the Subframe app: https://app.subframe.com/<YOUR_PROJECT_ID>/playground.

​
Install the necessary dependencies

Subframe depends on @subframe/core. Run the following command to install the dependencies:

npm install @subframe/core@latest

​
Include Subframe’s preset in your Tailwind CSS config

This will ensure that the theme you setup in Subframe applies to your app.

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
	content: [
		"./index.html",
		"./src/**/*.{js,jsx,ts,tsx}"
	],
	theme: {
		extend: {},
	},
	plugins: [],
	presets: [
		require("./src/ui/tailwind.config")
	]
}

​
Sync your Subframe components

Run the following command to download your Subframe component code into your codebase:

npx @subframe/cli@latest sync --all

The Subframe CLI will look for the project settings in your .subframe directory and download the components accordingly.