Kinode Style

Shared styles for Kinode apps.

Usage

Vite/React/TS

I prefer to use Vite and React with Typescript.

yarn create vite my-app --template react-ts

UnoCSS

UnoCSS is the preferred method for styling our apps.

First, install UnoCSS to your app's UI codebase:

yarn add unocss

Next, add our index.css (NOT input.css) to the src folder (or modify your own to suit), and add the files in assets to your public folder.

Then, add our uno.config.ts file to the root of your project (or modify it as necessary).

Then, add the following two lines to your index.tsx/main.tsx:

import '@unocss/reset/tailwind.css'
import 'uno.css'

Finally, modify your vite.config.ts:

// other imports...
import react from '@vitejs/plugin-react'
import UnoCSS from 'unocss/vite'

export default defineConfig({
  plugins: [
    UnoCSS(), // must be BEFORE react()
    react()
  ],
  // ...
})

Tailwind

Some of our apps are using Tailwind. First, install Tailwind to your app's UI codebase:

yarn add tailwindcss && npx tailwindcss init

Then, replace your new tailwind.config.js file with our config file (or modify it as necessary).

Next, add our input.css (NOT index.css) to the src folder (or modify your own to suit), and add the files in assets to your own assets folder.

While developing, use tailwindcss to automatically convert the Tailwind styles to CSS:

# Note: This will overwrite any existing `index.css` file!
npx tailwindcss -i ./src/input.css -o ./src/index.css --watch