This is the base/core part of the IOIO Design System, which introduces unified design patterns that should be used across different web applications and platforms.

The source of this plugin is designed in such a way that only tailwind js plugin classes as source files should be used.

We also expose default tailwind config that can be inherited into a standart project where you may want to use tailwind, but still use the predefined config and custom classes from this project.

We also introduce tailwind JIT compiler with MutationObserver which allows one to use tailwind in the browser and be able to JIT compile at run time

To work with this plugin with tailwind, you need to wrap the config into your tailwind instance, or enable our internal JIT at runtime, depending on your needs.

Enable base config on your project

const tailwindcss = require('tailwindcss');
const ioioCore = require('ioio-kit-core');

module.exports = ioioCore.config({
    purge: { content: ['./public/**/*.html', './src/**/*.vue'] },
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    },
    variants: {
      extend: {},
    }
});

Enable JIT at runtime

import ioioKit from '@ioiotv/ioio-kit-core';
import ioioKitPlugins from '@ioiotv/ioio-kit-core/src';

const css = '';
ioioKit.enable(
  `
  @tailwind base;
  @tailwind components;
  ${css}
  @tailwind utilities;
  `, {
    plugins: ioioKitPlugins
})

• Passing the plugins prop is required only if you want to import just some plugins. Passing empty array or null will automatically include all available plugins internally.