Tofui + Vite

A seamless way to integrate Tofui (A css framework built on top of TenoxUI) in vite!

Installation

1. Install the plugin

npm i @tofui/vite-plugin

2. Use the plugin

// vite.config.js
import { defineConfig } from 'vite'
import tofui from '@tofui/vite-plugin'

export default defineConfig({
  plugins: [tofui()]
})

3. Add Tofui configuration

// tofui.config.js
export default {
  include: ['index.html', 'src/**/*.{js,jsx}'],
  exclude: ['**/node_modules/**/*', '**/dist/**/*'],
  utilities: {
    bg: 'background',
    p: (v) => ({ rules: v && v * 0.25 + 'rem' })
  },
  plugins: [
    {
      utility(ctx) {
        if (typeof ctx.utility === 'function') {
          return { ...ctx, ...ctx.utility(ctx.value) }
        }
      }
    }
  ]
}

4. Import modules

// main.js
import 'virtual:tofui:dev'
import 'virtual:tofui.css'

5. Start writing your class names!

export default function App() {
  return <div className="bg-red p-10"></div>
}