Skip to content

Integrating Jux with PostCSS

Installing Jux as PostCSS plugin is the recommended way to seamlessly use Jux in your project. This guide will walk you through the steps to set up Jux as a PostCSS plugin in your project.

  1. Install Jux CLI
    Terminal
    npm install -D @juxio/cli postcss
  2. Initialize a new project
    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': {}
    }
    }
  3. Configure your include files

    Add the path to your source files in jux.config.ts. Jux will scan these files to generate the CSS file.

    jux.config.ts
    export default {
    preflight: true,
    include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{ts,tsx}'],
    exclude: [],
    /* The core tokens of your design system */
    core_tokens: {},
    /* The themes for your design system */
    themes: {},
    };
  4. Add Jux’s @layer directive to your main CSS file
    main.css
    @layer juxbase, juxtokens, juxutilities;
  5. Start your build process
    Terminal
    postcss src/main.css -o output.css

    Include the generated CSS file in your project and start using Jux to style your components.

    index.tsx
    import './main.css';
    import { css } from '@juxio/css';
    export default function Home() {
    return (
    <div
    className={css({
    color: 'violet',
    '&:hover': {
    color: 'darkviolet',
    },
    })}
    >
    Hello from Jux 🤖
    </div>
    );
    }
  6. Use Jux in your project

    Start using Jux to style your components.

    index.tsx
    import './main.css';
    import { css } from '@juxio/css';
    export default function Home() {
    return (
    <div
    className={css({
    color: 'violet',
    '&:hover': {
    color: 'darkviolet',
    },
    })}
    >
    Hello from Jux 🤖
    </div>
    );
    }