Vite

Create project

Begin by creating a new React project with vite:

Add Tailwind and its configuration

Install tailwindcss and its peer dependencies

Add this import statement to your main CSS file, src/index.css in our case:

Loading...

Edit tsconfig.json file

In the latest version of Vite, TypeScript configuration is split into three files, with two requiring modifications.

Update the compilerOptions section in both tsconfig.json and tsconfig.app.json by adding the baseUrl and paths properties.

Loading...

Edit tsconfig.app.json file

Add the following code to the tsconfig.app.json file to configure path resolution for your IDE:

Loading...

Add plugin to vite.config.ts

Add the @tailwindcss/vite plugin to your Vite configuration.

Loading...

Update vite.config.ts

Add the following code to vite.config.ts to ensure your app can resolve paths without errors:

Loading...

Run the CLI

Run the init command with default options to set up:

Setup for PaceUI

Note: It will add useful dependencies, extra variables, and a default theme to your CSS file. You can explore more customization options in theme

That's it

You’re ready to start adding components to your project

The command above will add the Button component to your project. You can then import it using the following syntax:

Loading...