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.
-
Create a New Vite Project (Skip if using an existing project)
If you’re starting from scratch, create a new Vite project:
Terminal npm create vite@latest my-jux-vite-app --template react-tscd my-jux-vite-appTerminal pnpm create vite@latest my-jux-vite-app --template react-tscd my-jux-vite-appTerminal yarn create vite@latest my-jux-vite-app --template react-tscd my-jux-vite-app -
Install Jux CLI
Terminal npm install -D @juxio/cli postcssTerminal pnpm add -D @juxio/cli postcssTerminal yarn add -D @juxio/cli postcss -
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 --postcssThis will install the necessary dependencies, and create
jux.config.ts
andpostcss.config.js
files in your project root.postcss.config.js module.exports = {plugins: {'@juxio/postcss': {}}} -
Configure Jux
Open
jux.config.ts
and update theinclude
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: {},}; -
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; -
Import Global CSS in your Vite project
In your main entry point (usually
src/main.tsx
orsrc/main.js
), import your global CSS:main.tsx import './index.css';// ... rest of your imports and app initialization -
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 (<divclassName={css({color: 'violet',fontSize: '2rem','&:hover': {color: 'darkviolet',},})}>Hello from Jux in Vite! 🚀</div>);}export default App;