Integrating Jux with Vite

This guide will walk you through the process of setting up Jux in a Vite project. Vite is a modern build tool that provides a faster and leaner development experience for modern web projects.

1. Create a New Vite Project (Skip if using an existing project)

   If you’re starting from scratch, create a new Vite project:

   npm

   Terminal

   npm create vite@latest my-jux-vite-app --template react-ts
   cd my-jux-vite-app

   pnpm

   Terminal

   pnpm create vite@latest my-jux-vite-app --template react-ts
   cd my-jux-vite-app

   yarn

   Terminal

   yarn create vite@latest my-jux-vite-app --template react-ts
   cd my-jux-vite-app

2. Install Jux CLI

   npm

   Terminal

   npm install -D @juxio/cli postcss

   pnpm

   Terminal

   pnpm add -D @juxio/cli postcss

   yarn

   Terminal

   yarn add -D @juxio/cli postcss

3. Initialize Jux in your project

   Run the Jux CLI to initialize Jux in your project. This will install the necessary dependencies and create the jux.config.ts file in your project root.

   Terminal

   npx jux init --postcss

   This will install the necessary dependencies, and create jux.config.ts and postcss.config.js files in your project root.

   postcss.config.js

   module.exports = {
       plugins: {
           '@juxio/postcss': {}
       }
   }

4. Configure Jux

   Open jux.config.ts and update the include paths to match your Vite project structure:

   jux.config.ts

   export default {
     preflight: true,
     include: ['./src/**/*.{js,jsx,ts,tsx}'],
     exclude: [],
   
     /* The core tokens of your design system */
     core_tokens: {},
   
     /* The themes for your design system */
     themes: {},
   };

5. Add Jux’s @layer directive to your main CSS file

   Create or update your global CSS file (e.g., src/index.css) to include Jux layers:

   main.css

   @layer juxbase, juxtokens, juxutilities;

6. Import Global CSS in your Vite project

   In your main entry point (usually src/main.tsx or src/main.js), import your global CSS:

   main.tsx

   import './index.css';
   // ... rest of your imports and app initialization

7. Start using Jux in your project

   Now you can start using Jux in your Vite components:

   index.tsx

   import { css } from '@juxio/css';
   
   function App() {
     return (
       <div
         className={css({
           color: 'violet',
           fontSize: '2rem',
           '&:hover': {
             color: 'darkviolet',
           },
         })}
       >
         Hello from Jux in Vite! 🚀
       </div>
     );
   }
   
   export default App;