ODX Websites UI

General

ODX Websites design foundations and tokens based on Tailwind.

Installation

1. Install package: pnpm add -D @odx/websites-ui

2. Install peer dependency: pnpm add -D tailwindcss

3. Init tailwind: npx tailwindcss init

4. Add the paths to all of your template files in your tailwind.config.js file and add odx websites-ui tailwind preset:

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

5. Add the style.css and fonts.css to your project by using the the @odx/websites-ui package:

   Via JavaScript:

   import '@odx/websites-ui/style';
   import '@odx/websites-ui/fonts';

   or via CSS:

   @import '@odx/websites-ui/style';
   @import '@odx/websites-ui/fonts';